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

Use ChuckCSS with a CDN (Content Delivery Network)

ChuckCSS is available on jsDelivr : https://www.jsdelivr.com/package/npm/ChuckCSS
                                
                                    <!-- Include the ChuckCSS CSS file -->
                                    <link media="screen" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ChuckCSS/dist/chuckcss.min.css" integrity="sha384-9Q5efsUnTOxxKSBqSr+Xu5C6NhT9C7ZpXmOJlQDLWsN43EpVBS1C/uqmwfuJJdw4" crossorigin="anonymous">

                                    <!-- ** OPTIONNAL ** -->
                                    <!-- Print file -->
                                    <link media="print" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ChuckCSS/dist/print.css" integrity="sha384-v3V621jdwau+HZBAsgh1A2BAbGS203f9aH7aedLd1AIWLQYDnluBvLmdMkgkN3hU" crossorigin="anonymous">

                                    <!-- ** 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 src="https://cdn.jsdelivr.net/npm/ChuckCSS/dist/chuckcss.js" integrity="sha384-ADz7aKD9VLw6IBaYl8pwAckpQVIk9vjGsvvNtj3lPPWWgcgu9ZgvNnR+AP7oz7x+" crossorigin="anonymous" defer></script>
                                
                            

ChuckCSS tree files

                                
                                    <!-- ChuckCSS tree files -->
                                    chuckcss/
                                    |
                                    ├── front-light.less <!-- all @imports, light version of ChuckCSS -->
                                    ├── front.less <!-- all @imports, base file of ChuckCSS -->
                                    ├── print.less <!-- print.css source file -->
                                    ├── settings-light.less <!-- all variables definitions for light version -->
                                    ├── settings.less <!-- all variables definitions -->
                                    |
                                    ├── components/
                                    ├──────── alerts.less
                                    ├──────── badges.less
                                    ├──────── grids.less
                                    ├──────── modals.less
                                    ├──────── tabs.less
                                    |
                                    ├── main/
                                    ├──────── animations.less <!-- radio, checkbox, loaders animations -->
                                    ├──────── base.less <!-- <html> and <body> general definitions -->
                                    ├──────── functions.less <!-- powerful mixins file -->
                                    ├──────── generator-light.less <!-- light generator classes... -->
                                    ├──────── generator.less <!-- grids items width, texts helpers... -->
                                    ├──────── helpers.less <!-- block helpers : visibility, width... -->
                                    ├──────── icons.less <!-- simple icons placement -->
                                    ├──────── normalize.less <!-- reset css -->
                                    ├──────── responsive.less <!-- responsive mixins -->
                                    |
                                    ├── elements/
                                    ├──────── blockquotes.less
                                    ├──────── buttons.less
                                    ├──────── forms.less
                                    ├──────── images.less
                                    ├──────── lists.less
                                    ├──────── loaders.less
                                    ├──────── tables.less
                                    └──────── titles.less
                                
                            

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.

Assuming your local project get a tree like that :

                                
                                    <!-- Your local project files -->
                                    local-project/
                                    |
                                    | ...somes files and folders...
                                    |
                                    ├── less/
                                    ├──────── main.less
                                    └──────── my-own-settings.less
                                
                            

In your main.less file, include the front.less from ChuckCSS dist repository, and your own settings file.

                                
                                    /* main.less */
                                    @charset "UTF-8";
                                    
                                    // Import front.less of front-light.less (if you want to work without grids) file from ChuckCSS
                                    @import "./node_modules/ChuckCSS/chuckcss/front";
                                    // You can create your own settings file, to override ChuckCSS settings
                                    @import "my-own-settings";


                                    // Now you can use all ChuckCSS mixins, animations, class, etc...
                                    p {
                                        ._reset; // <-- ._reset() is a ChuckCSS mixin (defined into functions.less)
                                        background-color: @red; // <-- You can use ChuckCSS predefined colors (defined into native ChuckCSS settings.less file or into your own settings file my-own-settings.less)
                                        ._transition; // <-- ._transition() is a ChuckCSS mixin (animate smoothly when the element state changes) (defined into functions.less)
                                        // or use a custom animation with parameters
                                        ._transition(0.6s, background-color, linear, 0.5s);

                                        &:hover {
                                            background-color: @green; // <-- background-color will change smoothly on hover
                                        }
                                    }
                                
                            

Now you can override the ChuckCSS default settings, with your own values, by adding variables into your settings file.

                                
                                    /* exemple of my-own-settings.less */
                                    /*
                                      * Extend the ChuckCSS settings.less file *
                                      *** OVERRIDE CHUCKCSS VARS ***
                                      * Specific vars
                                    */

                                    /*
                                        -- @ Class prefix @ --
                                    */
                                    @css-prefix: yolo; // Change the prefix class
                                    // Now you can use your own class 'yolo-txt-center', 'yolo-inside'.. and all usefull ChuckCSS class

                                    /*
                                        -- @ Colors @ --
                                    */
                                    /* Primary color */
                                    @primary: #29b7e1;
                                    @primary-na: primary;   /* Name of the color, for @aColors array */

                                    // Green
                                    @green: #80ae37;
                                    @green-na: green;   /* Name of the color, for @aColors array */

                                    // red
                                    @red:   #c41515;
                                    @red-na: red;   /* Name of the color, for @aColors array */

                                    // gray
                                    @gray: #bababa;

                                    // blue
                                    @blue: #3498db;
                                    @blue-na: blue;     /* Name of the color, for @aColors array */


                                    // Colors array: Add any color you want \m/
                                    // array(@color1-name @color1-value, @color2-name @color2-value,...);
                                    @aColors:
                                        @primary-na @primary,
                                        @green-na @green,
                                        @red-na @red,
                                        @blue-na @blue;



                                    /*
                                        -- @ Texts @ --
                                    */
                                    @text: {
                                        mc: #3a3a3a; /* Texts ~ Main color (hexa, rgb, rgba...) */
                                        fs: 1.6rem; // Font-size && line-height for small screens (<= 359px)
                                        lh: 1.5;
                                        fs-s: 1.6rem; // Font-size && line-height for phone screens (>= 360px)
                                        lh-s: 1.5;
                                        fs-m: 1.6rem; // Font-size && line-height for medium screens (>= 768px)
                                        lh-m: 1.5;
                                        fs-l: 1.6rem; // Font-size && line-height for large screens (>= 989px)
                                        lh-l: 1.5;
                                        fs-xl: 1.6rem; // Font-size && line-height for x-large screens (>= 1200px)
                                        lh-xl: 1.5;
                                    }