Our website use cookies to work properly. By browsing our website you understand cookies will be used on your computer. I understand

Getting started with ChuckCSS

Jump to...

FontAwesome and Ionicons

Since v3.0.8, Normalize.css, Font-Awesome and Ionicons are included in ChuckCSS! You have nothing to do!

- - -

For ChuckCSS < v3.0.8, please read the following :
If you want to use icons with ChuckCSS, please include FontAwesome and/or Ionicons files.

If you install ChuckCSS via NPM, FontAwesome and Ionicons are downloaded as dependencies.
Files will be in "node_modules" folder.
                                
                                    <!-- Include FontAwesome & Ionicons CSS files -->
                                    <link rel="stylesheet" href="PATH/font-awesome.min.css" type="text/css" media="screen" />
                                    <link rel="stylesheet" href="PATH/ionicons.min.css" type="text/css" media="screen" />
                                
                            

Working with dist files

When ChuckCSS is download, the dist files to include are into the "dist" folder (css and js files).
  • With NPM : node_modules/ChuckCSS/dist
                                
                                    <!-- Include the ChuckCSS CSS file -->
                                    <link rel="stylesheet" href="PATH/dist/chuckcss.min.css" type="text/css" media="screen" />

                                    <!-- ** OPTIONNAL ** -->
                                    <!-- Print file -->
                                    <link rel="stylesheet" href="PATH/dist/print.css" type="text/css" media="print" />

                                    <!-- ** OPTIONNAL ** -->
                                    <!-- Just before the </body> close tag, include the ChuckCSS JS file -->
                                    <!-- The javascript file is optionnal. It manages modals (openings and closures) and alerts (closures) -->
                                    <!-- You can easily create your own javascript file to manage by yourself modals and alerts -->
                                    <script type="text/javascript" src="PATH/dist/chuckcss.js"></script>
                                
                            

Working with source files

Working with source files give you the possibility to customize ChuckCSS with your own settings, colors, etc... but you have to be familiar with Less language.

By compiling your own dist file with Grunt or Gulp, combined with Autoprefixer, you can use powerfull mixins to build websites easily and faster.
                                
                                    <!-- ChuckCSS tree files -->
                                    chuckcss/
                                    |
                                    ├── front.less <!-- all @imports, base file of ChuckCSS -->
                                    ├── print.less <!-- print.css source file -->
                                    ├── settings.less <!-- all variables definitions -->
                                    |
                                    ├── components/
                                    ├──── alerts.less
                                    ├──── badges.less
                                    ├──── grids.less
                                    ├──── messages.less
                                    ├──── modals.less
                                    ├──── tabs.less
                                    |
                                    ├── core/
                                    ├──── animations.less <!-- radio, checkbox, loaders animations -->
                                    ├──── base.less <!-- <html> and <body> general definitions -->
                                    ├──── functions.less <!-- powerful mixins file -->
                                    ├──── generator.less <!-- grids items width, texts helpers... -->
                                    ├──── helpers.less
                                    ├──── responsive.less <!-- responsive mixins -->
                                    |
                                    ├── elements/
                                    ├──── blockquotes.less
                                    ├──── buttons.less
                                    ├──── forms.less
                                    ├──── images.less
                                    ├──── loaders.less
                                    ├──── tables.less
                                    └──── titles.less