assets/css/less/bootstrap/variables.less
assets/css/less/bootstrap/mixins.less
assets/css/less/bootstrap/variables.less
with original Bootstrap variables that you download,
and re-compile Ace's LESS files into CSS again.
@gutterWidth from 30 to 24
and changed @grid-float-breakpoint-max from @screen-sm-min(768px) to @screen-md-min(992px).
768px
but now it's been modified to 992px.
1000px.
assets/css/ folder.
dist/css/ folder.
ace.css or ace.min.css) is generated by compiling LESS files.
assets/css/less
and compile them into CSS using Node.js and LESS compiler using the following command:
lessc ace.less ../ace.css
lessc ace.less --clean-css ../ace.min.css
assets/css/less/ace.less
assets/css/less/variables.less
assets/css/less/fonts.less
assets/css/less/ace-features.less
npm install -g less
lessc ace.less ../ace.css
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:
ace-rtl.css file which is used for RTL (right to left) direction suitable for languages such as Arabic, Hebrew and Persian.
ace-fonts.css which is the font definition file.
ace-fonts.css
on top of your main CSS file to reduce number of files.
ace-skins.css file is generated by compiling
assets/css/less/skins/skins.less
lessc skins/skins.less ../ace-skins.css
lessc skins/skins.less --clean-css ../ace-skins.min.css
ace.less using your skin of choice.
assets/css/less/sidebar.less
@import "skins/no-skin.less"
@import "skins/skin-1.less
mustache/app/views/layouts/partials/_shared/_template/fonts.mustache
<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>
http://fonts.googleapis.com/css?family=Open+Sans:400,300
<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
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.