CSS Files

Dist files

Inside dist/css folder you can find CSS files used in demo.
However I don't recommend using them, because they contain custom CSS for all plugins, multiple sidebar features that you might not need and the default sidebar and navbar themes, which you might not use.

So I recommend building a custom CSS as described below and including your chosen theme as described in Choosing Default Themes

Build custom CSS

Ace's sass files are placed inside scss and the main file is ace.scss .
In order to make changes and re-compile it you can start with modifying the following files:

• ace-features.scss : enable/disable features that you don't need, in order to reduce file size
• _variables.scss : general variables such as colors, etc
• _variables-more.scss : more variables for components such as tabs, etc
• _sidebar-themes-variables.scss : sidebar values and theme colors
• _navbar-themes-variables.scss : navbar values and theme colors
• pluging/*.scss. Some plguin files start with their variables

 
👉 And build CSS output using the following commands:

npm run css # just builds dist/css/ace.css and adds browser specific prefixes

npm run css-themes # just builds dist/css/ace-themes.css which is not recommended and you should include your chosen them in ace.css only
npm run css-all # builds ace.css, ace-themes.css, RTL files and adds browser specific prefixes
npm run css-min # minifies the CSS files above

Feature selection

As mentioned above to customize CSS output and remove unwanted features, you can modify ace-features.scss file.

For starters, you should defininely set only one of the $expandable , $hoverable , $hideable , $horizontal values to true.
Because you don't need three different minimized(collapsed) sidebar modes in your app. I enabled them all just for demo.

Or if you don't need Spaced Sidebars you should set $sidebar-spaced to be false .

Demo pages' CSS files

Some of Ace's demo pages have extra styling which I prefered not to include in the main ace.css because they are only used in that particular page.
For example the Asides page has some custom CSS rules for the animation of the "Hey there, if you want to talk ..." button. It's located at:
views/pages/asides/@page-style.css

Plugin CSS files

Most of Ace's demo pages use one or more plugins. For example for tables, date/time pickers, editors, etc.
These plugins might have CSS files that you should include before ace.css in HTML's head element.

If so, the list of included stylesheets for each page can be found here:
views/pages/PAGENAME/@vendor-stylesheets.hbs

For example in Form > Basic Elements page you can see that
views/pages/form-basics/@vendor-stylesheets.hbs
contains:

{{{include-css files="nouislider + css/ion.rangeSlider.min.css@ion-rangeslider"}}}

which means the main CSS file of noUiSlider as well as css/ion.rangeSlider.min.css file from Ion.RangeSlider plugins are used in Form Basics.