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>
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
This exemple shows only medium and x-large breakpoints
<!-- Grid container -->
<div class="columns">
<!-- Screen >= Medium : 4 cols -->
<div class="cc-4-m">...</div>
<!-- Screen >= Medium : 3 cols | Screen >= 1200px : 5 cols -->
<div class="cc-3-m cc-5-xl">...</div>
<!-- Screen >= Medium : 5 cols | Screen >= 1200px : 3 cols -->
<div class="cc-5-m cc-3-xl">...</div>
</div>
Medium and upper : 4 / 12
Default : 12 / 12
Default : 12 / 12
X-Large : 5 / 12
Medium and upper : 3 / 12
Default : 12 / 12
Medium and upper : 3 / 12
Default : 12 / 12
X-Large : 3 / 12
Medium and upper : 5 / 12
Default : 12 / 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).
<!-- Classic modal -->
<button data-target="modal-id" class="cc-bg-primary modal-open">Launch classic modal</button>
<!-- Modal minimal structure -->
<div id="modal-id" class="modal">
<!-- Close button -->
<button data-close-modal></button>
<!-- Overlay -->
<div class="modal-overlay"></div>
<!-- Modal content -->
<div class="modal-content">
<div class="modal-header">
...
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
...
</div>
</div>
</div>
<!-- ALL EXEMPLES IN THE DOCUMENTATION SECTION -->
Buttons / Links with ChuckCSS
<!-- Few exemples of buttons -->
<button>Classical button</button>
<button class="cc-bg-primary">Primary button</button>
<button class="cc-bg-primary cc-outlined">Outlined button</button>
<button class="cc-bg-primary"><i class="fas fa-times icon-left"></i>Iconed button</button>
<button class="cc-bg-primary cc-disabled">Disabled button</button>
<button class="cc-bg-primary cc-loading">Loading</button>
<!-- Few exemples of buttons-like links -->
<a href="#" class="btn">Classical Btn link</a>
<a href="#" class="btn cc-bg-primary">Primary link</a>
<a href="#" class="btn cc-bg-primary cc-outlined">Outlined link</a>
<a href="#" class="btn cc-bg-primary"><i class="fas fa-times icon-left"></i>Iconed link</a>
<a href="#" class="btn cc-bg-primary cc-disabled">Disabled link</a>
<a href="#" class="btn cc-bg-primary cc-loading">Loading</a>
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.
Nevertheless, you can build alert box without the "close" button. In that case, you don't need to load the chuckcss.js file.
<!-- Success -->
<div class="alert alert-success">
<i class="fas fa-thumbs-up icon-left"></i>
<button class="close"><i class="ion-ios-close-outline"></i></button>
It's a success! Good job :)
</div>
<!-- Error -->
<div class="alert alert-error">
<i class="fas fa-thumbs-down icon-left"></i>
<button class="close"><i class="ion-ios-close-outline"></i></button>
It's an error!<br />
Please check the list below :
<ul>
<li><strong>Error 1 :</strong> Nunc...</li>
<li><strong>Error 2 :</strong> Nunc...</li>
<li><strong>Error 3 :</strong> Nunc...</li>
</ul>
</div>
It's a success! Good job :)
It's an error!
Please check the list below :
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.