Version

1.0.8

Operating System

macOS

Device

Mini

Steps to reproduce

Try to transpile the scss with libsass

What is expected?

scss transpiles successfully

What is actually happening?

SCSS processing failed: file "[...]/soft-ui-design-system-pro/assets/scss/soft-design-system-pro/_gradients.scss", line 15, col 23: Top-level selectors may not contain the parent selector "&".

Solution

It's actually hard to tell if this is a bug. I do not know much about scss, but I think this is violating the scss standard.

Since libsass is deprecated, I will try to test this out with another scss implementation, like dartsass.

Additional comments

Background: I use your awesome library with the hugo framework. They use libsass as the standard scss transpiler, though I think that will change with one of the next releases.

Version

1.0.8

Reproduction link

https://brunoamaral.eu

Operating System

iOS

Device

iPhone 12

Browser & Version

Safari and Brave

Steps to reproduce

1. open the website on a mobile phone
2. swiping left /right makes the content shift a bit

What is expected?

no horizontal scroll

What is actually happening?

swiping left /right makes the content shift a bit

Solution

Additional comments

I tried to find the offending elements forcing the horizontal scroll with the following, but it didn't return anything.

var docWidth = document.documentElement.offsetWidth;

[].forEach.call(
  document.querySelectorAll('*'),
  function(el) {
    if (el.offsetWidth > docWidth) {
      console.log(el);
    }
  }
);

Version

1.0.8

Reproduction link

https://brunoamaral.eu
It's a private repo, if you really need access to it, please let me know.

Operating System

Unix / MacOS

Device

n/a

Browser & Version

n/a

Steps to reproduce

I upgraded from version 1.0.x to 1.0.8 and now it fails to process using goHugo.io and PostCSS as a module.

Start building sites …
hugo v0.92.0+extended darwin/amd64 BuildDate=unknown
Error: Error building site: POSTCSS: failed to transform "scss/soft-design-system-pro.css" (text/css): TypeError: t.test is not a function
    at /Users/brunoamaral/Labs/odb/site/stdin:6:4
    at /Users/brunoamaral/Labs/odb/site/node_modules/purgecss/lib/purgecss.js:1:9044
    at Array.some (<anonymous>)
    at P.isSelectorSafelistedGreedy (/Users/brunoamaral/Labs/odb/site/node_modules/purgecss/lib/purgecss.js:1:9033)
    at /Users/brunoamaral/Labs/odb/site/node_modules/purgecss/lib/purgecss.js:1:10103
    at Array.some (<anonymous>)
    at P.shouldKeepSelector (/Users/brunoamaral/Labs/odb/site/node_modules/purgecss/lib/purgecss.js:1:10086)
    at /Users/brunoamaral/Labs/odb/site/node_modules/purgecss/lib/purgecss.js:1:7137
    at /Users/brunoamaral/Labs/odb/site/node_modules/postcss-selector-parser/dist/selectors/container.js:225:20
    at Root.each (/Users/brunoamaral/Labs/odb/site/node_modules/postcss-selector-parser/dist/selectors/container.js:207:16)
    at Root.walk (/Users/brunoamaral/Labs/odb/site/node_modules/postcss-selector-parser/dist/selectors/container.js:224:17) {
  postcssNode: Rule {
    raws: { before: '', between: '', semicolon: false, after: '' },
    type: 'rule',
    nodes: [
      [Declaration], [Declaration],
      [Declaration], [Declaration],
      [Declaration], [Declaration],
      [Declaration], [Declaration],
      [Declaration], [Declaration],
      [Declaration], [Declaration],
      [Declaration], [Declaration],
      [Declaration], [Declaration],
      [Declaration], [Declaration],
      [Declaration], [Declaration],
      [Declaration], [Declaration],
      [Declaration], [Declaration],
      [Declaration]
    ],
    parent: Root {
      raws: [Object],
      type: 'root',
      nodes: [Array],
      source: [Object],
      lastEach: 2,
      indexes: [Object],
      [Symbol(isClean)]: true,
      [Symbol(my)]: true
    },
    source: { start: [Object], input: [Input], end: [Object] },
    selector: ':root',
    lastEach: 2,
    indexes: {},
    [Symbol(isClean)]: true,
    [Symbol(my)]: true
  }
}

What is expected?

finish the build

What is actually happening?

an error that I can't understand where it's coming from. Even tried to downgrade my version of postCSS but didn't work.

Solution

Additional comments

Version

1.1.1

Reproduction link

http://example.com

Operating System

Windows

Device

Lenovo ThinkPad

Browser & Version

Chrome(110.0.5481.178) / Firefox(newest)

Steps to reproduce

1. Create a new Angular project.

2. Install packages: "bootstrap": "5.2.3", "choices.js": "9.0.1", "popper.js": "^1.16.1" (you can also use the newest choices version, same error here)

3. Add ReactiveForms to Angular project.

4. Add Soft UI Design System PRO scss/js to assets.

5. Add styles/scripts to angular.json:

"styles": [
"node_modules/@fortawesome/fontawesome-free/css/fontawesome.min.css",
"node_modules/bootstrap/scss/bootstrap.scss",
"node_modules/choices.js/public/assets/styles/choices.min.css",
"apps/my-app/src/assets/scss/soft-design-system-pro.scss", // Path is like that because we use Nx
...
],
"scripts": [
"node_modules/@fortawesome/fontawesome-free/js/fontawesome.min.js",
"node_modules/bootstrap/dist/js/bootstrap.bundle.min.js",
"node_modules/popper.js/dist/umd/popper.min.js",
"node_modules/choices.js/public/assets/scripts/choices.min.js",
"apps/my-app/src/assets/js/soft-design-system-pro.min.js",
...
]

6. Add form-element to page:

<label class="form-label" for="selectExample">Example:</label>
<select id="selectExample" #selectExample formControlName="example">
  <option value="value 1">Value 1</option>
  <option value="value 2">Value 2</option>
</select>

7. Add Choices over Component:

export class ExampleComponent implements AfterViewInit {
  @ViewChild("selectExample") exampleRef!: ElementRef;

  // Create form in constructor or ngOnInit

  ngAfterViewInit() {
    const selectElement = this.exampleRef.nativeElement;
    const choices = new Choices(selectElement);
  }

}

What is expected?

I expect that the Select is displayed like e.g. here (I used dashboard as example, because I don't find a usage in the Soft UI Design System PRO docs):
https://demos.creative-tim.com/soft-ui-dashboard-pro/pages/pages/account/settings.html#basic-info

What is actually happening?

The select is rendered, but instead of the arrow at the end of the field, I have a rectangle (so something that is not found) and the arrow of choices.js is places in the top-left corner of this rectangle.

Solution

I tried to swap the libraries in the style imports. This fixes the issue, but then the Creative Tim styles are not applied to the input field, so it fixes the only semi.

Additional comments

Sorry for not adding a link with the reproduce. Hope it's ok without. If not, please let me know and I will take the time to create one.
And also to avoid confusion: The order ID runs to a different mail address than the one associated with my account. This is because we use Gitlab in the company, so we don't have a Github account. So for simplicity I used my private Github account.

When the top menu is expanded, page elements are visible through the menu items

Version

1.0.9

Reproduction link

https://github.com/creativetimofficial/ct-soft-ui-design-system-pro

Operating System

Windows [Version 10.0.19044.1645]

Device

Dell

Browser & Version

n/a

Steps to reproduce

1. Unzip archive
2. Navigate to pages/podcast.html
3. Got to line 1475
4. Notice that there are two missing </div> tags between lines 1475 and 1476

What is expected?

All tags are properly closed.

What is actually happening?

Two divs do not have closing tags.

Solution

Add the two tags.

Additional comments

Version

1.1.1

Operating System

Windows

Device

Lenovo ThinkPad

Browser & Version

Chrome(110.0.5481.178) / Firefox(newest)

Steps to reproduce

1. Create a new Angular project.

2. Install packages: "bootstrap": "5.2.3", "choices.js": "9.0.1", "popper.js": "^1.16.1" (you can also use the newest choices version, same error here)

3. Add ReactiveForms to Angular project.

4. Add Soft UI Design System PRO scss/js to assets.

5. Add styles/scripts to angular.json:
   "styles": [
   "node_modules/@fortawesome/fontawesome-free/css/fontawesome.min.css",
   "node_modules/bootstrap/scss/bootstrap.scss",
   "node_modules/choices.js/public/assets/styles/choices.min.css",
   "apps/my-app/src/assets/scss/soft-design-system-pro.scss", // Path is like that because we use Nx
   ...
   ],
   "scripts": [
   "node_modules/@fortawesome/fontawesome-free/js/fontawesome.min.js",
   "node_modules/bootstrap/dist/js/bootstrap.bundle.min.js",
   "node_modules/popper.js/dist/umd/popper.min.js",
   "node_modules/choices.js/public/assets/scripts/choices.min.js",
   "apps/my-app/src/assets/js/soft-design-system-pro.min.js",
   ...
   ]

6. Add form-element to page:

<label class="form-label" for="selectExample">Example:</label>
<select id="selectExample" #selectExample formControlName="example">
  <option value="value 1">Value 1</option>
  <option value="value 2">Value 2</option>
</select>

8. Add Choices over Component:

export class ExampleComponent implements AfterViewInit {
  @ViewChild("selectExample") exampleRef!: ElementRef;

  // Create form in constructor or ngOnInit

  ngAfterViewInit() {
    const selectElement = this.exampleRef.nativeElement;
    const choices = new Choices(selectElement);
  }

}

What is expected?

I expect that the Select is displayed like e.g. here (I used dashboard as example, because I don't find a usage in the Soft UI Design System PRO docs):
https://demos.creative-tim.com/soft-ui-dashboard-pro/pages/pages/account/settings.html#basic-info

What is actually happening?

The select is rendered, but instead of the arrow at the end of the field, I have a rectangle (so something that is not found) and the arrow of choices.js is places in the top-left corner of this rectangle.

Solution

I tried to swap the libraries in the style imports. This fixes the issue, but then the Creative Tim styles are not applied to the input field, so it fixes the only semi.

Additional comments

Sorry for not adding a link with the reproduce. Hope it's ok without. If not, please let me know and I will take the time to create one.

So many styles applied to images that I have no clue as to waht they do.

UX Issue: Unable to download project in the Soft UI Design System Pro

Description: Save and Preview buttons work as anticipated. When clicking the Download Project button, nothing happens. The below error code is thrown when inspecting the page.

Replication with other Design Builders: I also confirmed I can successfully download projects using the Soft UI Dashboard builder.
Screenshot of error code:

Every page need a "back to top" button, this template not containt this element, please solve this element.

Version

1.0.9

Reproduction link

https://brunoamaral.eu/post/drop-dead-digital/

Operating System

iOS

Device

iphone 12

Browser & Version

safari latest

Steps to reproduce

1. Add margin and padding for different breakpoints to the section after a header, such as header-7: py-0 mt-0 py-md-5 mt-md-5 instead of py-5 mt-5 that is used right now
2. When I checked, these new breakpoints didn't have any effect.

Maybe i'm missing something regarding bootstrap 5, let's not rule that out. Yet, on mobile, single pages tend to show only the title and the user has no cue that they can scroll down. Specially now that Safari shows the address bar on the bottom by default.

What is expected?

different margin and padding on mobile

What is actually happening?

nothing

Solution

Additional comments

Version

1.0.8

Operating System

macOS

Device

Mini

Steps to reproduce

Try to transpile the scss with libsass

What is expected?

scss transpiles successfully

What is actually happening?

SCSS processing failed: file "[...]/soft-ui-design-system-pro/assets/scss/soft-design-system-pro/_gradients.scss", line 15, col 23: Top-level selectors may not contain the parent selector "&".

Solution

It's actually hard to tell if this is a bug. I do not know much about scss, but I think this is violating the scss standard.

Since libsass is deprecated, I will try to test this out with another scss implementation, like dartsass.

Additional comments

Background: I use your awesome library with the hugo framework. They use libsass as the standard scss transpiler, though I think that will change with one of the next releases.

Missing image on the page: assets/img/white-circle.png

Version

1.0.9

Reproduction link

https://www.creative-tim.com/learning-lab/bootstrap/navbar/soft-ui-design-system

Operating System

Windows 10

Device

Asus X555LB

Browser & Version

Microsoft Edge

Steps to reproduce

I just want use, nothing special.
If you look your site (https://www.creative-tim.com/learning-lab/bootstrap/navbar/soft-ui-design-system), there is too not working.

What is expected?

My expectation is: your product should work.

What is actually happening?

I am waiting your solution, because I can't continue this part of project.

Solution

Additional comments

Hi,

I'm running into some issues with the Sass files. I am using Laravel 8 and I integrated this template into my resources folder. I added on my package.json all the dev dependencies existing in the json file of the template. I run the commands npm install and then npm run dev.

The error:

My laravel webpack.mix.js file:

Hello,
first, thank you for your product.

I wouldn't notice this, but I have HTML markup for badge done this way:
<span class="badge bg-secondary rounded-pill badge-secondary">3</span>
and while trying to fix this, I found this:

.badge-secondary {
    background-color: theme-color("secondary");
    color: color-yiq(theme-color("secondary"));
}

Those mixins are from bootstrap4 and result is:

By the way, that code is correct - it supports bootstrap 4 way (badge badge-secondary) and bootstrap 5 way (badge bg-secondary). Problem is that you support both versions :) Not big issue, easy to fix.

Thank you

JS error during page load: Uncaught SyntaxError: Unexpected token ')'

JS Warning on page: rellax.min.js:24 Rellax: The elements you're trying to select don't exist.

Version

1.0.8

Reproduction link

https://codepen.io/robbitt07/pen/PoJONKx

Operating System

Mac OS

Device

Macbook Pro 16

Browser & Version

Chrome 96.0.4664.110

Steps to reproduce

1. Added Select Field

What is expected?

Expecting the choices.min.js to render the select input and options per the same as the documentation.

What is actually happening?

Nothing is happening, select is same as standard bootstrap.

Solution

Additional comments

Trying to copy the HTML code from hero-sections.html > Page Headers (first element) fails with JS error:

Cannot read property 'select' of null

Version

1.0.9

Reproduction link

https://github.com/creativetimofficial/ct-soft-ui-design-system-pro

Operating System

Windows [Version 10.0.19044.1645]

Device

Dell

Browser & Version

n/a

Steps to reproduce

1. Unzip archive
2. cd into soft-ui-design-system-pro-html-v1.0.9 directory
3. Run npm install
4. Run npm start

What is expected?

npm start should successfully start the application.

What is actually happening?

The script exits with status code 1. The following is the terminal output.

C:\Repos\soft-ui\soft-ui-design-system-pro-html-v1.0.9>npm start

> [email protected] start C:\Repos\soft-ui\soft-ui-design-system-pro-html-v1.0.9
> npm run open-app


> [email protected] open-app C:\Repos\soft-ui\soft-ui-design-system-pro-html-v1.0.9
> gulp open-app

Error: Cannot find module 'sass'
Require stack:
- C:\Repos\soft-ui\soft-ui-design-system-pro-html-v1.0.9\gulpfile.js
- C:\Repos\soft-ui\soft-ui-design-system-pro-html-v1.0.9\node_modules\gulp\node_modules\gulp-cli\lib\shared\require-or-import.js
- C:\Repos\soft-ui\soft-ui-design-system-pro-html-v1.0.9\node_modules\gulp\node_modules\gulp-cli\lib\versioned\^4.0.0\index.js
- C:\Repos\soft-ui\soft-ui-design-system-pro-html-v1.0.9\node_modules\gulp\node_modules\gulp-cli\index.js
- C:\Repos\soft-ui\soft-ui-design-system-pro-html-v1.0.9\node_modules\gulp\bin\gulp.js
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:902:15)
    at Function.Module._load (internal/modules/cjs/loader.js:746:27)
    at Module.require (internal/modules/cjs/loader.js:974:19)
    at require (internal/modules/cjs/helpers.js:93:18)
    at Object.<anonymous> (C:\Repos\soft-ui\soft-ui-design-system-pro-html-v1.0.9\gulpfile.js:3:33)
    at Module._compile (internal/modules/cjs/loader.js:1085:14)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1114:10)
    at Module.load (internal/modules/cjs/loader.js:950:32)
    at Function.Module._load (internal/modules/cjs/loader.js:790:12)
    at Module.require (internal/modules/cjs/loader.js:974:19) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    'C:\\Repos\\soft-ui\\soft-ui-design-system-pro-html-v1.0.9\\gulpfile.js',
    'C:\\Repos\\soft-ui\\soft-ui-design-system-pro-html-v1.0.9\\node_modules\\gulp\\node_modules\\gulp-cli\\lib\\shared\\require-or-import.js',
    'C:\\Repos\\soft-ui\\soft-ui-design-system-pro-html-v1.0.9\\node_modules\\gulp\\node_modules\\gulp-cli\\lib\\versioned\\^4.0.0\\index.js',
    'C:\\Repos\\soft-ui\\soft-ui-design-system-pro-html-v1.0.9\\node_modules\\gulp\\node_modules\\gulp-cli\\index.js',
    'C:\\Repos\\soft-ui\\soft-ui-design-system-pro-html-v1.0.9\\node_modules\\gulp\\bin\\gulp.js'
  ]
}
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] open-app: `gulp open-app`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] open-app script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\james\AppData\Roaming\npm-cache\_logs\2022-05-11T02_25_19_645Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] start: `npm run open-app`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\james\AppData\Roaming\npm-cache\_logs\2022-05-11T02_25_19_686Z-debug.log

Solution

Additional comments

Version

1.0.6

Reproduction link

https://codepen.io/niErik/pen/oNwpgPw

Operating System

OSx

Device

iMac

Browser & Version

Brave, Firefox, Safari

Steps to reproduce

1. Take https://www.creative-tim.com/learning-lab/bootstrap/navs/soft-ui-design-system -> "Tabs with icons"
2. Remove "active" class from first "a" tag
3. Add "active" class to second "a" tag
4. Reload site

What is expected?

The second element should have a border and white background

What is actually happening?

No element seems to be active

Solution

Additional comments

For all pages under 'Sections' during the page load, JS error is bumped:
components is not defined at hero-sections.html:3568 at hero-sections.html:3615

Version

1.1.1

Reproduction link

https://brunoamaral.eu/tests/

Operating System

MacOS

Device

Macbook

Browser & Version

sonoma

Steps to reproduce

1. tried to reproduce the example seen on case study example the https://demos.creative-tim.com/soft-ui-design-system-pro/pages/case-study.html
2. In every combination of position-relative or position-absolute, the shadow drifts away

What is expected?

shadow below the image

What is actually happening?

shadow overflows

Solution

Additional comments

Version

1.0.8

Reproduction link

https://brunoamaral.eu

Operating System

iOS

Device

iPhone 12

Browser & Version

Brave Browser

Steps to reproduce

open the home page, notice a 1px line right under the header.

On scroll, the animation gets a bit stuck.

What is expected?

No line at the bottom and smoother scroll

What is actually happening?

open the home page, notice a 1px line right under the header.

On scroll, the animation gets a bit stuck.

Solution

Additional comments

The issue with the line under the header also happens on Safari.

Screenshot and recording of the two issues:
https://drive.brunoamaral.net/d/s/lSDhxmulyo6NCy7cCFQoYRYJhnaHohyN/ElqIQ0UrKkmfjg9kDNdrVJn8n_Q4JvSf-HrEgGf5H6gg

Version

1.0.3

Reproduction link

http://n/a

Operating System

OSX

Device

Mac

Browser & Version

N/A

Steps to reproduce

1. Download package
2. Run npm I
3. run node ./node_modules/gulp/bin/gulp.js watch
4. Modify any scss file

You'll get the error below.

[22:21:03] Starting 'watch'...
[22:21:12] Starting 'compile-scss'...
Error in plugin "sass"
Message:
assets/scss/soft-design-system-pro/_variables-extend.scss
Error: File to import not found or unreadable: ../variables.
on line 6 of assets/scss/soft-design-system-pro/_variables-extend.scss
from line 21 of assets/scss/soft-design-system-pro.scss

@import "../variables";

What is expected?

Variables.scss should exist

What is actually happening?

It doesn't exist.

Solution

Additional comments

Version

Version 1.0.8

Reproduction link

https://jsfiddle.net/

Operating System

Windows 10

Device

Laptop

Browser & Version

Chrome

Steps to reproduce

I'm running into some issues with the Sass files. I am using Laravel 8 and I integrated this template into my resources folder. I added on my package.json all the dev dependencies existing in the json file of the template. I run the commands npm install and then npm run dev.

What is expected?

To be able to run the commands

What is actually happening?

ERROR in ./resources/assets/scss/presentation/soft-design-system-pro.scss
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Top-level selectors may not contain the parent selector "&".

Solution

Additional comments

Version

v1.0.2

Reproduction link

https://photos.app.goo.gl/nsQnFB2sCKhLBGzh6

Operating System

OSX

Device

Macbook PRO

Browser & Version

Chrome Version 89.0.4389.82

Steps to reproduce

Solution

Additional comments

Version

1.0.8

Reproduction link

https://brunoamaral.eu/pt/post/o-dia-construi-motor-de-busca/

Operating System

MacOS

Device

macbook

Browser & Version

Big Sur

Steps to reproduce

Open the page and find the button

What is expected?

gradient and colours on the button

What is actually happening?

button renders as grey with white text

Solution

Additional comments

Errors are generated by non-standard HTML chunks inside the IFRAME blocks

I think that' s a responsibility that I have --> cause error

The build errors that occur on html-minifier

 </html>
[eleventy:prod]         at new HTMLParser (D:\work\repo-creative-tim\priv-eleventy-soft-ui-pro\node_modules\html-minifier\src\htmlparser.js:244:13)
[eleventy:prod]         at minify (D:\work\repo-creative-tim\priv-eleventy-soft-ui-pro\node_modules\html-minifier\src\htmlminifier.js:980:3)

Version

1.0.3

Reproduction link

https://doesntmatteranymore.com

Operating System

Really? Your stuff depends on the OS? I thought it was built on Bootstrap.

Device

Again, Bootstrap doesn't depend on devices, but Soft UI-Pro does.

Browser & Version

The latest

Steps to reproduce

1. The image in your footer appears above the footer, causing a href links to not work:

I purchased your bundle a few years ago. No problems whatsoever, but this is a completely unacceptable work that cost me a new client.

What is actually happening?

Who knows, it sure as heck ain't bootstrap!!

Solution

Give me my money back. I can't make this work no matter what I throw at it. It cost me 9 days of mess and stress.
I'm on MODXcloud which gives me the ability to duplicate various environments and I'm at a loss here as to what to do except I'm never going to buy another design from Creative Tim ever again. Don't worry, bad-mouthingr anyone isn't ever my game.

Additional comments

Missing asset:
assets/img/curved-images/curved8.png net::ERR_FILE_NOT_FOUND
On the file system, there is a curved8.jpg

Version

1.0.8

Reproduction link

https://imgur.com/JyacuU6

Operating System

Windows 10

Device

PC

Browser & Version

Vivaldi 4.0

Steps to reproduce

1. Go to: https://www.creative-tim.com/product/soft-ui-design-system-pro for example
2. Hover over main menu
3. Text is blurry ( see: https://imgur.com/JyacuU6 )

I've tested this in the latest version of Vivaldi, Edge and Firefox- all with the same blurriness. Tested on a PC running the latest version of Windows 10 with a 1080p screen.

What is expected?

The font to be less blurry and more crisp like the other texts on the webpage.

What is actually happening?

The text in the main menu is blurry

Solution

Additional comments

blog-posts.html bumps error on access:

Error

[eslint ]Plugin "react" was conflicted between ".eslintrc.json" and "BaseConfig >>

Message

I installed All dependencise and i Run the Project but when i want code new Features to it and save them
than every time i save the new Code and changes it throw me this Error, please help