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

ChuckCSS reminder page

Jump to...

Grids / Masonry layouts

                                
                                    <!-- Grid container (row) -->
                                    <div class="columns">
                                        <!-- Grid item (child) -->
                                        <div>Column 1</div>
                                        <!-- Grid item (child) -->
                                        <div>Column 2</div>
                                        <!-- etc... -->
                                    </div>
                                
                            
class apply to element effect
class apply to element effect
class="columns" Grid container (row) Create a new grid container
class="cc-no-multiligne" Grid container (row) Disabled multiligne display
class="cc-reverse" Grid container (row) Reverse all columns order
Items width & offset
class="cc-{number}" Grid item (child) Set the column width
{number} : can be set from 1 to {@cols-total} (default : 12)
class="cc-{number}-{letter}" Grid item (child) Set the column width on {letter} screen and upper
{number} : can be set from 1 to {@cols-total} (default : 12)
{letter} : can be set to 'xl', 'l', 'm', 's'
class="cc-offset-{number}" Grid item (child) Set offset to column
{number} : can be set from 1 to {@cols-total} (default : 12)
class="cc-offset-{number}-{letter}" Grid item (child) Set offset to column on {letter} screen and upper
{number} : can be set from 1 to {@cols-total} (default : 12)
{letter} : can be set to 'xl', 'l', 'm', 's'
Columns X alignments
class="cc-justify-start" Grid container (row) In a row, all columns are pulled to the left
class="cc-justify-end" Grid container (row) In a row, all columns are pulled to the right
class="cc-justify-center" Grid container (row) In a row, all columns are centered
class="cc-justify-between" Grid container (row) In a row, all columns are evenly distributed in the line (first item is on the start line, last item on the end line)
class="cc-justify-around" Grid container (row) In a row, all columns are evenly distributed in the line with equal space around them
Columns Y alignments
class="columns cc-align-start" Grid container (row) Position all columns to the top of the grid container
class="columns cc-align-end" Grid container (row) Position all columns to the bottom of the grid container
class="columns cc-align-center" Grid container (row) Center all columns on Y axis
class="columns cc-align-baseline" Grid container (row) Position all columns according to the baseline
class="columns cc-align-stretch" Grid container (row) Stretch all columns on Y axis
Targeted item alignment on X axis
class="cc-first" Grid item (child) This column is diplayed first on the X axis
class="cc-first-{letter}" Grid item (child) This column is diplayed first on the X axis for {letter} screen and upper
{letter} : can be set to 'xl', 'l', 'm', 's'
class="cc-last" Grid item (child) This column is diplayed last on the X axis
class="cc-last-{letter}" Grid item (child) This column is diplayed last on the X axis for {letter} screen and upper
{letter} : can be set to 'xl', 'l', 'm', 's'
class="cc-left" Grid item (child) Target column is pulled to the left
class="cc-center" Grid item (child) Target column is centered
class="cc-right" Grid item (child) Target column is pulled to the right
class="cc-w-auto cc-right" Grid item (child) Target column has a "float : right;"-like performance
class="cc-w-auto cc-left" Grid item (child) Target column has a "float : left;"-like performance
Targeted item alignment on Y axis
class="cc-align-self-top" Grid item (child) This targeted column has a top alignment on Y axis
class="cc-align-self-center" Grid item (child) This targeted column is centered verticaly on Y axis
class="cc-align-self-bottom" Grid item (child) This targeted column has a bottom alignment on Y axis
class="cc-align-self-baseline" Grid item (child) This targeted column has a baseline alignment on Y axis
class="cc-align-self-stretch" Grid item (child) This targeted column is stretched on Y axis
Masonry layouts
class="cc-masonry" Grid container (row) Display columns as a verticaly Masonry layout
class="cc-masonry cc-{number}" Grid container (row) Display {number} columns as a verticaly Masonry layout
{number} : can be set from 1 to {@cols-total} (default : 12)
class="cc-masonry cc-{number}-{letter}" Grid container (row) Display {number} columns as a verticaly Masonry layout on {letter} screen and upper
{number} : can be set from 1 to {@cols-total} (default : 12)
{letter} : can be set to 'xl', 'l', 'm', 's'

Alerts

                                
                                    <!-- General structure -->
                                    <div class="alert alert-{type}">
                                        ...your alert text...
                                    </div>
                                
                            
class apply to element effect
class apply to element effect
class="alert alert-{type}" <div> Display an alert box
{type} : can be set to 'primary', 'info', 'warning', 'error' or 'success'

Messages

                                
                                    <!-- General structure -->
                                    <div class="message message-{type}">
                                        ...your message text...
                                    </div>
                                
                            
class apply to element effect
class apply to element effect
class="message message-{type}" <div> Display a message box
{type} : can be set to 'primary', 'info', 'warning', 'error' or 'success'

Badges

                                
                                    <span class="badge">...</span>
                                
                            
class apply to element effect
class apply to element effect
class="cc-bg-{color}" <span> Display badge with a specific background-color
{color} : A color defined in ChuckCSS framework

Tabs

                                
                                    <!-- General structure -->
                                    <ul class="tabs">
                                        <li>...</li>
                                        <li>...</li>
                                    </ul>
                                
                            
class apply to element effect
class apply to element effect
class="tabs" <ul> Display a default tabs container
Tabs global styles
class="cc-underlined" <ul> Display an underlined tabs container
class="cc-thin" <ul> Display a thin (narrow) tabs container
class="cc-fat" <ul> Display a fat (large) tabs container
class="cc-bordered" <ul> Display a bordered tabs container
class="cc-{color}" <ul> Change tabs main color
{color} : A color defined in ChuckCSS framework
Items alignments on X axis
class="cc-align-left" <ul> Align children tabs to the left
class="cc-align-left-{letter}" <ul> Align children tabs to the left for {letter} screen and upper
{letter} : can be set to 'xl', 'l', 'm', 's'
class="cc-align-center" <ul> Center children tabs
class="cc-align-center-{letter}" <ul> Center children tabs for {letter} screen and upper
{letter} : can be set to 'xl', 'l', 'm', 's'
class="cc-align-right" <ul> Align tabs children to the right
class="cc-align-right-{letter}" <ul> Align tabs children to the right for {letter} screen and upper
{letter} : can be set to 'xl', 'l', 'm', 's'
class="cc-align-stretch" <ul> Stretch children tabs on the line
class="cc-align-stretch-{letter}" <ul> Stretch children tabs on the line for {letter} screen and upper
{letter} : can be set to 'xl', 'l', 'm', 's'
class="cc-last" <li> Pull this target child to the right
Tabs pills
class="cc-pills" <ul> Tabs children are shown as chained pills
class="cc-pills cc-unchained" <ul> Tabs children are shown as unchained pills

Modals

View code

class apply to element effect
class apply to element effect
class="modal" <div> Default modal with 50% width
data-close-modal * (any element into the modal structure) Close the modal by clicking on this element
Modals width
class="modal modal-large" <div> Large modal with 80% width
class="modal modal-small" <div> Small modal with 30% width
Disabled overlay
data-disabled-overlay <div> Disabled overlay for closing the modal
Fixed Header & Footer
data-fixed-hf <div> Make the Header and Footer fixed into the modal (need a wrapper around the modal-body element)
Fullscreen modal
data-fullscreen <div> Show the modal in fullscreen mode

Loaders

Number of dots (only for dots loader),loaders colors, loaders speed can be set into the settings.less file.

Dots loader

                                
                                    <!-- Dots loader structure -->
                                    <div class="cc-loader">
                                        <div class="dot dot-1"></div>
                                        <div class="dot dot-2"></div>
                                        <div class="dot dot-3"></div>
                                        ...as long as {@loader-dots-count} variable (default : 12 dots)...
                                        <div class="dot dot-12"></div>
                                    </div>
                                
                            

Spinner loader

                                
                                    <!-- Spinner loader structure -->
                                    <div class="cc-loader">
                                        <div class="spinner"></div>
                                    </div>
                                
                            

Caterpillar loader

                                
                                    <!-- Caterpillar loader structure -->
                                    <div class="cc-loader caterpillar">
                                        <div class="chain chain-1"></div>
                                        <div class="chain chain-2"></div>
                                        <div class="chain chain-3"></div>
                                        <div class="chain chain-4"></div>
                                        <div class="chain chain-5"></div>
                                    </div>
                                
                            

FontAwesome / Ionicons

                                
                                    <!-- Exemple with FA icon -->
                                    <p class="fa-angle-right">Paragraph with FA icon</p>

                                    <!-- Exemple with IO icon -->
                                    <p class="ion-link">Paragraph with IO icon</p>
                                
                            
class apply to element effect
class apply to element effect
class="fa-{icon}" * Display a FontAwesome icon at the start of the element
{icon} : the icon classname
class="ion-{icon}" * Display a Ionicons icon at the start of the element
{icon} : the icon classname

Blocks helpers

                                
                                    <!-- Padding & Margin exemples -->
                                    <p class="cc-pat-20">I have a padding-top of 20px</p>
                                    <p class="cc-pa-20">I have a padding of 20px</p>
                                    <p class="cc-ma">I have a margin of 1em</p>
                                    <p class="cc-mab-20">I have a margin-bottom of 20px</p>

                                    <!-- Visibilities exemples -->
                                    <p class="cc-hidden-l">I'm hidden on large screens and up</p>
                                    <p class="cc-shown-m-only">I'm shown on meduim screens ONLY</p>
                                    <p class="cc-hidden-m-down">I'm hidden on meduim screens and lower</p>
                                
                            
class apply to element effect
class apply to element effect
class="cc-block" * Display element as block
class="cc-inline" * Display element as inline-block
class="cc-clearfix"
class="clearfix"
* Fixing clear of floated elements
class="cc-centered" * Center element into another element on X axis
Blocks width
class="cc-w-{number}" * Apply a width of {number}%
{number} : From 0 to 100, multiple of 5
class="cc-w-quarter" * Apply a width of 25.00%
class="cc-w-third" * Apply a width of 33.333%
class="cc-w-half" * Apply a width of 50.00%
class="cc-w-twothird" * Apply a width of 66.666%
class="cc-w-threequarter" * Apply a width of 75.00%
Blocks padding & margin
class="cc-pa" * Apply a padding of {@helper-pa} (default : 1em) on the 4 sides
{@helper-pa} value can be changed in the settings.less file
class="cc-pa{letter}" * Apply a padding of {@helper-pa} in the {letter} side
{letter} : can be set to 't' (for "top"), 'r' (for "right"), 'b' (for "bottom") or 'l' (for "left")
class="cc-pa-{number}" * Apply a padding of {number}px on the 4 sides
{number} : From 0 to 50, multiple of 5
class="cc-pa{letter}-{number}" * Apply a {number}px padding to the {letter} side
{number} : From 0 to 50, multiple of 5
{letter} : can be set to 't' (for "top"), 'r' (for "right"), 'b' (for "bottom") or 'l' (for "left")
class="cc-ma" * Apply a margin of {@helper-ma} (default : 1em) on the 4 sides
{@helper-ma} value can be changed in the settings.less file
class="cc-ma{letter}" * Apply a margin of {@helper-ma} in the {letter} side
{letter} : can be set to 't' (for "top"), 'r' (for "right"), 'b' (for "bottom") or 'l' (for "left")
class="cc-ma-{number}" * Apply a margin of {number}px on the 4 sides
{number} : From 0 to 50, multiple of 5
class="cc-ma{letter}-{number}" * Apply a {number}px margin to the {letter} side
{number} : From 0 to 50, multiple of 5
{letter} : can be set to 't' (for "top"), 'r' (for "right"), 'b' (for "bottom") or 'l' (for "left")
Blocks visibility
class="cc-hidden" * Hide element on all devices
class="cc-hidden-{letter}" * Hide element on {letter} screen and upper
{letter} : can be set to 'xl', 'l', 'm', 's'
class="cc-hidden-{letter}-only" * Hide element on {letter} screen ONLY
{letter} : can be set to 'xl', 'l', 'm', 's', 'xs'
class="cc-hidden-{letter}-down" * Hide element on {letter} screen and lower
{letter} : can be set to 'l', 'm', 's', 'xs'
class="cc-shown-{letter}-only" * Show element on {letter} screen ONLY
{letter} : can be set to 'xl', 'l', 'm', 's', 'xs'
Apply bgcolors
class="cc-bg-{color}" * Apply a {color} background-color to the element
{color} : A color defined in ChuckCSS framework

Texts helpers

                                
                                    <!-- Texts alignments -->
                                    <p class="cc-txt-center">Center the text</p>
                                    <p class="cc-txt-right">Aligns the text to the right</p>

                                    <!-- Apply colors -->
                                    <p class="cc-primary">I'm written in primary color</p>
                                    <p class="cc-bg-primary">I have a primary background-color</p>
                                
                            
class apply to element effect
class apply to element effect
Texts alignments
class="cc-txt-left" * Align text to the left
class="cc-txt-right" * Align text to the right
class="cc-txt-center" * Center the text
class="cc-txt-justify" * Justify the text
Apply colors
class="cc-{color}" * Write text in {color}
{color} : A color defined in ChuckCSS framework

Images

                                
                                    <img src="PATH" alt="ALT TEXT" class="cc-bordered" />
                                
                            
class apply to element effect
class apply to element effect
class="cc-no-responsive" <img /> Remove responsiveness from an image
class="cc-bordered" <img /> Display image with a thin border
class="cc-shadowed" <img /> Apply smooth shadow behind the image

Buttons / Links

View code

class apply to element effect
class apply to element effect
class="btn" <a> Display HTML link as a button
class="cc-fat" <button>
or
<a>
Inscrease line-height
class="cc-thin" <button>
or
<a>
Descrease line-height
class="cc-bg-{color}" <button>
or
<a>
Colorized button
{color} : A color defined in ChuckCSS framework
class="cc-outlined" <button>
or
<a>
Outlined button
class="fa-*" <button>
or
<a>
Display a FontAwesome icon on the left
class="ion-*" <button>
or
<a>
Display a Ionicons icon on the left
class="icon-right" <button>
or
<a>
Display icon to the right
Must be combined with class="fa-*" or class="ion-*"
class="cc-disabled" <button>
or
<a>
Display button as disabled
class="cc-loading" <button>
or
<a>
Display loading button

Forms

View code

class apply to element effect
class apply to element effect
class="cc-{color}" <form> Change form main color
{color} : A color defined in ChuckCSS framework
Label + input wrappers
class="form-item" <div> Label + Input wrapper
class="form-item cc-chained" <div> Chained inputs on the row (inputs collapsed)
class="form-item cc-inline" <div> Chained Label + Input wrapper on the row (inputs spaced)
class="form-item error" <div> Display label + input in red (error style)
Radio inputs
class="form-radio" <div> Label + input type radio wrapper
class="form-radio disabled" <div> Display label + input type radio wrapper as disabled
class="form-radio block" <div> Display label + input type radio wrapper as a block
class="form-radio error" <div> Display label + input type radio in red (error style)
Checkbox inputs
class="form-checkbox" <div> Label + input type checkbox wrapper
class="form-checkbox disabled" <div> Display label + input type checkbox wrapper as disabled
class="form-checkbox block" <div> Display label + input type checkbox wrapper as a block
class="form-checkbox error" <div> Display label + input type checkbox in red (error style)
Prefix & Suffix inputs
class="form-ps" <div> Display a prefix and/or suffix before/after the input
Label as blocks
class="block" <label /> Display label above the input (as a block element)

Tables

View code

class apply to element effect
class apply to element effect
Tables general styles
class="cc-unbordered" <table> Remove all cells borders
class="cc-bordered" <table> Add borders to all cells
class="cc-equal-cols" <table> Display all columns with equal width
class="cc-valign-top" <table> Display all columns with vertical-lign top
class="cc-hovered" <table> Highligh a row when the cursor enter in.
class="cc-{color}" <table> Change the main color of the table
{color} : A color defined in ChuckCSS framework
class="cc-striped" <table> Display a table with striped rows
class="cc-striped-col" <table> Display a table with striped columns
Specific row style
class="cc-bg-{color}" <tr> Display row with a specific background-color
{color} : A color defined in ChuckCSS framework
Responsive tables
class="cc-responsive" <table> Render table responsive for small screens < 768px;
class="wrap-table" <div> Wrapper for complex tables. Render table responsive for small screens < 768px;

Blockquotes

                                
                                    <!-- General structure -->
                                    <blockquote>
                                        ...citation
                                        <footer>...author</footer>
                                    </blockquote>
                                
                            
class apply to element effect
class apply to element effect
class="cc-quoted" <blockquote> Add a "quote" icon
class="cc-{color}" <blockquote> Change blockquote main color
{color} : A color defined in ChuckCSS framework
class="cc-reverse" <blockquote> Reverse blockquote display

Lists

                                
                                    <!-- General structure -->
                                    <ul>
                                        <li>...</li>
                                        <li>...</li>
                                        <li>...</li>
                                    </ul>
                                
                            
class apply to element effect
class apply to element effect
class="cc-unstyled" <ul> Remove the default style list
class="cc-horizontal" <ul> Display list horizontaly
class="fa-*" <li> Replace default list style by a FontAwesome icon
class="ion-*" <li> Replace default list style by a Ionicons icon
class="fa-* cc-{color}" <li> Replace default list style by a colorized FontAwesome icon
{color} : A color defined in ChuckCSS framework
class="ion-* cc-{color}" <li> Replace default list style by a colorized Ionicons icon
{color} : A color defined in ChuckCSS framework

Colors in ChuckCSS

By default, ChuckCSS has 7 colors you can use. All colors are defined in the settings.less file.
By working with ChuckCSS sources files, you can easily add, remove, change colors as you want!
color name color hexa color render
color name color hexa color render
Primary #29b7e1

I have a primary background-color

                                                        
                                                            <div class="cc-bg-primary"></div>
                                                        
                                                    

I'm written in primary color

                                                        
                                                            <div class="cc-primary"></div>
                                                        
                                                    
Green #80ae37

I have a green background-color

                                                        
                                                            <div class="cc-bg-green"></div>
                                                        
                                                    

I'm written in green color

                                                        
                                                            <div class="cc-green"></div>
                                                        
                                                    
Red #c41515

I have a red background-color

                                                        
                                                            <div class="cc-bg-red"></div>
                                                        
                                                    

I'm written in red color

                                                        
                                                            <div class="cc-red"></div>
                                                        
                                                    
Blue #3498db

I have a blue background-color

                                                        
                                                            <div class="cc-bg-blue"></div>
                                                        
                                                    

I'm written in blue color

                                                        
                                                            <div class="cc-blue"></div>
                                                        
                                                    
Purple #8e44ad

I have a purple background-color

                                                        
                                                            <div class="cc-bg-purple"></div>
                                                        
                                                    

I'm written in purple color

                                                        
                                                            <div class="cc-purple"></div>
                                                        
                                                    
Orange #f39c12

I have a orange background-color

                                                        
                                                            <div class="cc-bg-orange"></div>
                                                        
                                                    

I'm written in orange color

                                                        
                                                            <div class="cc-orange"></div>
                                                        
                                                    
Yellow #f1c40f

I have a yellow background-color

                                                        
                                                            <div class="cc-bg-yellow"></div>
                                                        
                                                    

I'm written in yellow color

                                                        
                                                            <div class="cc-yellow"></div>