# 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