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...

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 -->
                                    ├──── fontawesome.less <!-- icons 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