css-map reminder page
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 css-map 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 css-map 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
<!-- Button for launching modal -->
<button data-target="modal-id" class="modal-open">Launch modal</button>
<!-- Modal structure -->
<div id="modal-id" class="modal" data-disabled-overlay>
<!-- Close button -->
<button class="modal-close"></button>
<!-- Overlay -->
<div class="modal-overlay"></div>
<!-- Modal content -->
<div class="modal-content">
<div class="modal-header">
...
</div>
<div class="modal-body">
...modal content...
</div>
<div class="modal-footer">
...
</div>
</div>
</div>
<!-- Modal structure with fixed Header and Footer -->
<div id="modal-id" class="modal" data-fixed-hf>
<!-- Close button -->
<button class="modal-close"></button>
<!-- Overlay -->
<div class="modal-overlay"></div>
<!-- Modal content -->
<div class="modal-content">
<div class="modal-header">
...
</div>
<!-- ATTENTION, difference with standard modal : the modal-body has a wrapper -->
<div class="wrap-modal-body">
<div class="modal-body">
...modal content...
</div>
</div>
<div class="modal-footer">
...
</div>
</div>
</div>
| class | apply to element | effect |
|---|---|---|
| class | apply to element | effect |
| class="modal" | <div> | Default modal with 50% width |
| 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) |
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 css-map 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 css-map 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
<!-- 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 fa-times">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 fa-times">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>
| 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 css-map 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
<!-- Forms general structure -->
<form>
<div class="form-item">
<label>...</label>
<input ... />
</div>
...
</form>
<!-- Radio inputs general structure -->
<form>
<div class="form-item">
<div class="form-radio">
<label>
<input type="radio" name="" value="0" />
Choice 1
</label>
</div>
<div class="form-radio">
<label>
<input type="radio" name="" value="1" />
Choice 2
</label>
</div>
<div class="form-radio disabled">
<label>
<input type="radio" name="" value="2" disabled />
Choice 3 (disabled)
</label>
</div>
</div>
</form>
<!-- Checkbox inputs general structure -->
<form>
<div class="form-item">
<div class="form-checkbox">
<label>
<input type="checkbox" name="" value="m" checked="checked" />
Choice 1 (checked)
</label>
</div>
<div class="form-checkbox">
<label>
<input type="checkbox" name="" value="f" />
Choice 2
</label>
</div>
<div class="form-checkbox disabled">
<label>
<input type="checkbox" name="" value="0" disabled="disabled" />
Choice 3 (disabled)
</label>
</div>
</div>
</form>
<!-- Prefix & Suffix -->
<form>
<div class="form-item">
<label>Prefix and suffix</label>
<div class="form-ps">
<span>$</span>
<input type="text" placeholder="price" value="" name="" />
<span>.00</span>
</div>
</div>
</form>
| class | apply to element | effect |
|---|---|---|
| class | apply to element | effect |
| class="cc-{color}" | <form> |
Change form main color {color} : A color defined in css-map 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
<!-- General structure -->
<table>
<thead>
<tr>
<th>...</th>
<th>...</th>
</tr>
</thead>
<tbody>
<tr>
<td>...</td>
<td>...</td>
</tr>
<tr>
<td>...</td>
<td>...</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>...</td>
<td>...</td>
</tr>
</tfoot>
</table>
| 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 css-map 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 css-map 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 css-map 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 css-map framework |
| class="ion-* cc-{color}" | <li> |
Replace default list style by a colorized Ionicons icon {color} : A color defined in css-map framework |
Colors in css-map
By default, css-map has 7 colors you can use. All colors are defined in the settings.less file.
By working with css-map sources files, you can easily add, remove, change colors as you want!
By working with css-map 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
I'm written in primary color
|
| Green | #80ae37 |
I have a green background-color
I'm written in green color
|
| Red | #c41515 |
I have a red background-color
I'm written in red color
|
| Blue | #3498db |
I have a blue background-color
I'm written in blue color
|
| Purple | #8e44ad |
I have a purple background-color
I'm written in purple color
|
| Orange | #f39c12 |
I have a orange background-color
I'm written in orange color
|
| Yellow | #f1c40f |
I have a yellow background-color
I'm written in yellow color
|