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

ChuckCSS A mobile-first, responsive CSS framework, compiled with LESS and Autoprefixer, based on FlexBox grids

Why ChuckCSS and what is it?

I'm Mickaël, a french front-end developer since 10 years. I currently work with a fantastic team in a french & fresh web agency : ALPIXEL

ChuckCSS is born from the desire to make my own CSS framework, to ensure the projects maintainabilities i'm working on, and to increase my work speed. ChuckCSS is the result of my experience in front-end developments since many years. ChuckCSS is a responsive and mobile-first CSS framework compiled with LESS and Autoprefixer, based on FlexBox grids.

Even if i would like ChuckCSS perfect, please open an issue on Github if you find a problem.

Plenty of features Alerts, modals, buttons, typography...

Mobile-first 4 breakpoints for adaptative websites.

Flexbox grids Build grids easily!

Few exemples of what ChuckCSS can do for you

Grids with ChuckCSS

                        
                            <!-- Grid container -->
                            <div class="columns">
                                <div>Hello World!</div>
                                <div>Hello World!</div>
                                <div>Hello World!</div>
                            </div>
                        
                    

Add a column Remove a column

Hello World!
Hello World!
Hello World!
1
1
1
1
1
1
1
1
1
1
1
1

Grid with adaptative columns

ChuckCSS has 4 breakpoints.
This exemple shows only medium and x-large breakpoints

View code

Medium and upper : 4 / 12
Default : 12 / 12
X-Large : 5 / 12
Medium and upper : 3 / 12
Default : 12 / 12
X-Large : 3 / 12
Medium and upper : 5 / 12
Default : 12 / 12
1
1
1
1
1
1
1
1
1
1
1
1

Modals with ChuckCSS

Using modals required the chuckcss.js file (only for opening and closure).

View code

Buttons / Links with ChuckCSS

View code

Alerts box with ChuckCSS

On alert boxes, the "close" button require the chuckcss.js file.
Nevertheless, you can build alert box without the "close" button. In that case, you don't need to load the chuckcss.js file.

View code

It's a success! Good job :)
It's an error!
Please check the list below :
  • Error 1 : Nunc nunc lundium aliquet elementum ac pulvinar proin.
  • Error 2 : Nunc nunc lundium aliquet elementum ac pulvinar proin.
  • Error 3 : Nunc nunc lundium aliquet elementum ac pulvinar proin.