CSS/LESS Files

1. Bootstrap

  • Bootstrap's LESS files are not included in the package except for the following:
    assets/css/less/bootstrap/variables.less assets/css/less/bootstrap/mixins.less
  • I have modified Bootstrap's CSS file slightly so it's different from original files you download from official site.
  • But you can use original Bootstrap CSS file without problem.
    Just remember to replace Ace's version of Bootstrap variables file located at assets/css/less/bootstrap/variables.less with original Bootstrap variables that you download, and re-compile Ace's LESS files into CSS again.
  • Specifically, I have changed @gutterWidth from 30 to 24 and changed @grid-float-breakpoint-max from @screen-sm-min(768px) to @screen-md-min(992px).
  • The result is that with default Bootstrap, mobile menu will be visible when window width is less than 768px but now it's been modified to 992px.
    And it's fine as most desktop browsers are wider than 1000px.

2. Third party

  • Third party plugin CSS files are inside assets/css/ folder.
  • Minified version is find inside dist/css/ folder.

3. Ace LESS

  • Ace's main CSS file (ace.css or ace.min.css) is generated by compiling LESS files.
  • You can find LESS files here assets/css/less and compile them into CSS using Node.js and LESS compiler using the following command:
    lessc ace.less ../ace.css
    or
    lessc ace.less --clean-css ../ace.min.css
  • Main less file is:
    assets/css/less/ace.less
  • Variable files are:
    assets/css/less/variables.less
    assets/css/less/fonts.less
    and
    assets/css/less/ace-features.less
    which enables feature selection.
  • If you don't have Node.js installed, you can download it here: http://nodejs.org/download/
    Then you should install less compiler using the following command:
    npm install -g less

4. Ace CSS

  • Ace's main CSS file is generated by compiling LESS files into CSS:
    lessc ace.less ../ace.css
  • But there is also:
    • ace-ie.css which has some rules for IE9 and below and should be included for IE only using conditional comments: 
      <!--[if lte IE 9>
<link rel="stylesheet" href="path/to/assets/ace-ie.css" />
<![endif]-->
    • ace-part2.css which is used when main CSS file (ace.css) is too large for IE9 and below (the 4096 selector limit). 
      <!--[if lte IE 9>
<link rel="stylesheet" href="path/to/assets/ace-part2.css" />
<![endif]-->
      See the following links for more info about this IE limitation:
      Link 1 & Link 2
    • ace-rtl.css file which is used for RTL (right to left) direction suitable for languages such as Arabic, Hebrew and Persian.
      For more info about using RTL, please see RTL section
    • ace-fonts.css which is the font definition file.
      Used only when you want to serve local fonts rather using fonts directly from google.
      You can also put content of ace-fonts.css on top of your main CSS file to reduce number of files.

5. Ace Skins

  • ace-skins.css file is generated by compiling
    assets/css/less/skins/skins.less
    using the following command:
    lessc skins/skins.less ../ace-skins.css
    or
    lessc skins/skins.less --clean-css ../ace-skins.min.css
  • If you don't want to use a separate skin file, you can compile ace.less using your skin of choice.
    To do that, edit
    assets/css/less/sidebar.less
    and replace
    @import "skins/no-skin.less"
    with
    @import "skins/skin-1.less
    or any other skin.
  • For more info about skins you may want to see skins section as well.

6. CSS file order

  • The correct order of including CSS files is as follows:
    1. bootstrap.css
    2. fontawesome.css if you want to use Fontawesome icons.
    3. ace-fonts.css
      You may want to serve fonts from your own server or hosted by Google.
      View this file for an example:
      mustache/app/views/layouts/partials/_shared/_template/fonts.mustache
    4. Third party css files such as chosen.css or ui.jqgrid.css
    5. ace.css. Ace's main CSS file.
    6. ace-part2.css. IE 9 and below have a 4096 selector limit.
      See the following links for more info about this IE limitation:
      Link 1 & Link 2
      I recommend building a custom, smaller CSS file according to your needs, using CSS builder and you may not need a second CSS file for IE.
    7. ace-skins.css. Ace skin CSS file, if you want to use a skin other that default one.
      You can also compile default Ace styles (ace.css) using a different skin. Please refer to the above "Ace Skins" section for more info.
    8. ace-rtl.css. Ace's RTL direction CSS file, if you want to use Arabic, Hebrew or Persian.
    9. ace-ie.css which is used by IE9 and below.
    10. Inline styles which is not recommend and you should always try to separate your CSS from your HTML and application code. 
  •  <link href="path/to/bootstrap.min.css" rel="stylesheet" />
 <link href="path/to/fontawesome.min.css" rel="stylesheet" /><!-- only if needed -->

 <link href="path/to/ace-fonts.css" rel="stylesheet" /><!-- you can also use google hosted fonts -->

 <link href="path/to/ace.min.css" rel="stylesheet" class="ace-main-stylesheet" />
 <!--[if lte IE 9]>
  <link href="path/to/ace-part2.min.css" rel="stylesheet" class="ace-main-stylesheet" />
 <![endif]-->

 <link href="path/to/ace-skins.min.css" rel="stylesheet" /><!-- only if needed -->
 <link href="path/to/ace-rtl.min.css" rel="stylesheet" /><!-- only if needed -->

 <!--[if lte IE 9]>
 <link href="path/to/ace-ie.min.css" rel="stylesheet" />
 <![endif]-->

 <style>
  /* not recommended to define new CSS rules inside your HTML page */
  .some-selector {
    color: red;
  }
 </style>

7. Fonts

  • Ace uses "Open Sans" font from Google as its a popular font with good character support.
    Only "normal" and "light" font weights are included to make the page load faster: http://fonts.googleapis.com/css?family=Open+Sans:400,300
    See this for more info: Google Open Sans
    You can use google hosted fonts: 
    
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Open+Sans:400,300" />
    Or serve from your own server: (especially good during development, so that your pages load faster) 
    <link rel="stylesheet" href="path/to/ace-fonts.css" />
    You can also embed the contents of "ace-fonts.css" files in your main CSS file to reduce number of files: 
    @font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  src: local('Open Sans Light'), local('OpenSans-Light'), url(path/to/font/DXI1ORHCpsQm3Vp6mXoaTXhCUOGz7vYGh680lGh-uXM.woff) format('woff');
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Open Sans'), local('OpenSans'), url(path/to/font/cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}
    Font files are located inside: assets/font
  • For icons you can use Fontawesome, Glyphicons or any other font library.
    Icon font files are located inside: assets/fonts and you can also serve CDN hosted fonts, for example: 
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" />
    Please also see Icons section for more info.

8. CSS Builder

  • There is also the in-browser CSS builder you can use to build a custom CSS output, using only the parts you need.
  • You can find it here: path/to/ace/build/css.html