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.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
                                    ├──────── modals.less
                                    ├──────── tabs.less
                                    |
                                    ├── main/
                                    ├──────── 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 <!-- 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 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 @ --
                                    */
                                    // orange
                                    @orange : #ff810d;
                                    @orange-na : orange;
                                    /* Primary color */
                                    @primary : @orange;
                                    @primary-na : primary;
                                    // Green
                                    @green : #80ae37;
                                    @green-na : green;

                                    // By filling the @aColors array, you can use cc-bg-{color} and cc-{color} class with your own colors
                                    @aColors :
                                        @primary-na @primary,
                                        @green-na @green,
                                        @orange-na @orange;

                                    /*
                                        -- @ Texts @ --
                                    */
                                    @text-mc: #1A1A1A;   /* Texts ~ Main color (hexa, rgb, rgba...) */
                                    @text-fs : 1.7rem; /* Texts font-size  */

                                    // The body will have a font-size of 1.7rem (17px), and texts will be written with color #1A1A1A

                                    // You can easily define different font-size regarding the screen width by filling vars below

                                    // Font-size && line-height for phone screens (>= 360px)
                                    @text-fs-s: 1.6rem;     /* Textes font-size (applied to <body>) */
                                    @text-lh-s : 1.5;       /* Texts line-height : ~= font-size*1.5 */

                                    // Font-size && line-height for medium screens (>= 768px)
                                    @text-fs-m: 1.6rem;     /* Textes font-size (applied to <body>) */
                                    @text-lh-m : 1.5;       /* Texts line-height : ~= font-size*1.5 */

                                    // Font-size && line-height for large screens (>= 989px)
                                    @text-fs-l: 1.6rem;     /* Textes font-size (applied to <body>) */
                                    @text-lh-l : 1.5;       /* Texts line-height : ~= font-size*1.5 */

                                    // Font-size && line-height for x-large screens (>= 1200px)
                                    @text-fs-xl: 1.6rem;    /* Textes font-size (applied to <body>) */
                                    @text-lh-xl : 1.5;      /* Texts line-height : ~= font-size*1.5 */