css-map documentation
General presentation
css-map is a flexible, adaptative, mobile-first and easy to learn CSS framework.
Including the css-map.min.css file in your projects provides you just what you need to build modern websites, with flexible grids and powerful classes.
css-map is based on Less language.
If you are familiar with Less language, I recommend you to work directly with css-map source files, and compiling sources by yourself with Gulp or Grunt (or others css compilers). In this way, you can customize css-map with your own specific needs (colors, font-sizes, breakpoints, loaders speed animations, etc...).
Why Less ? Why not SASS ? Why not both ?
Even if SASS is the most CSS extension used in the world, I am not familiar enough with it to write a complete CSS framework. I have been particularly concerned by Less language many years ago.
Nevertheless, it is not excluded that one day, the community or I will write css-map in SASS language :)
css-map default setups
All variables are defined in the settings.less file.
Typography
css-map is based on CSS3 units : rem & em for moderns browsers and px unit for olds browsers.
The rem unit (root em) is relative to the font-size of the root element <html>.
The em unit is relative to the font-size of the parent element.
- font-family : Helvetica Neue
- font-size : 15px (1.5rem)
- line-height : 1.5
- color : #3a3a3a
The <html> base font-size is set to 62.5%. By this way, the rems is similar to using px :
- 1rem = 10px
- 1.1rem = 11px
- 1.2rem = 12px
- ...
Convert pixels in em and rem units
In pixels units : @font-size px
In em units : ((wanted font-size in pixels) / @font-size )em <==> Relative to the parent font-size!!
In rem units : ((wanted font-size in pixels) / 10)rem <==> Relative to the root font-size!!
I want "X" pixels | changeover in "em" units | changeover in "rem" units |
---|---|---|
I want "X" pixels | em changeover | rem changeover |
"X"px | "X" / 15 = "Y"em | "X" / 10 = "Y"rem |
... | ... | ... |
10px | 0.666em (10/15 = 0.666) | 1rem (10/10 = 1) |
12px | 0.8em | 1.2rem |
15px | 1em | 1.5rem |
17px | 1.133em | 1.7rem |
20px | 1.333em | 2.0rem |
Online Px to EM converter |
/* Text definitions in settings.less file */
/*
-- @ Texts @ --
*/
@text-mc: #3a3a3a; /* Texts ~ Main color (hexa, rgb, rgba...) */
@text-fs-old : 15px; /* Texts font-size ~ Used for old browsers that doesn't support rem units */
@text-fs: unit(@text-fs-old/10,rem); /* Textes font-size (applied to <body>) */
@text-lh : 1.5; /* Texts line-height : ~= font-size*1.5 */
Titles Hn
Titles are set in em units, in order to keep the typography adaptative.
The default color is the same as the <body> : #3a3a3a
element | font-size | line-height |
---|---|---|
element | font-size | line-height |
<h1> * class="h1-like" |
2em ~= 30px ~= 3.0rem |
1.5 ~= 45px ~= 4.5rem |
<h2> * class="h2-like" |
1.8em ~= 27px ~= 2.7rem |
1.5 ~= 40px ~= 4.0rem |
<h3> * class="h3-like" |
1.6em ~= 24px ~= 2.4rem |
1.5 ~= 36px ~= 3.6rem |
<h4> * class="h4-like" |
1.4em ~= 21px ~= 2.1rem |
1.5 ~= 31px ~= 3.1rem |
<h5> * class="h5-like" |
1.266em ~= 19px ~= 1.9rem |
1.5 ~= 28px ~= 2.8rem |
<h6> * class="h6-like" |
1.2em ~= 18px ~= 1.8rem |
1.5 ~=27px ~= 2.7rem |
/* Titles definitions in settings.less file */
/*
-- @ Titles @ --
*/
@title-mc : @text-mc; /* Hn ~ Titles main color */
@title-h1-fs : unit(30/@text-fs-old, em); // ~= 2em = 30px = 3rem
@title-h1-lh : 1.5; // ~= 45px = 4.5rem
@title-h2-fs : unit(27/@text-fs-old, em); // ~= 1.8em = 27px = 2.7rem
@title-h2-lh : 1.5; // ~= 40px = 4rem
@title-h3-fs : unit(24/@text-fs-old, em); // ~= 1.6em = 24px = 2.4rem
@title-h3-lh : 1.5; // ~= 36px = 3.6rem
@title-h4-fs : unit(21/@text-fs-old, em); // ~= 1.4em = 21px = 2.1rem
@title-h4-lh : 1.5; // ~= 31px = 3.1rem
@title-h5-fs : unit(19/@text-fs-old, em); // ~= 1.266em = 19px = 1.9rem
@title-h5-lh : 1.5; // ~= 28px = 2.8rem
@title-h6-fs : unit(18/@text-fs-old, em); // ~= 1.2em = 18px = 1.8rem
@title-h6-lh : 1.5; // ~= 27px = 2.7rem
@subtitle-mc : lighten(@title-mc,25%); /* Subtitle font-color */
@subtitle-fs : 70%;
Breakpoints
css-map is mobile-first and is based on 4 breakpoints : 360px, 768px, 990px and 1200px
breakpoint | suffix | description | equivalent to |
---|---|---|---|
breakpoint | suffix | description | equivalent to |
359px | -xs | X-Small screens from 0 to 359px | Tiny screens |
767px | -s | Small screens from 360px to 767px | Standards smartphones |
989px | -m | Medium screens from 768px to 989px | Tablet portrait and small tablets |
1199px | -l | Large screens from 990px to 1199px | Tablet landscape and large tablets |
> 1199px | -xl | X-Large screens higher or equal to 1200px | Standards desktop |
/* Breakpoints definitions in settings.less file */
/*
-- @ Media Queries @ --
*/
@xs-media-mw : 359px; /* Max-width for xs screens */
@s-media-mw : 767px; /* Max-width for small screens */
@m-media-mw : 989px; /* Max-width for medium screens */
@l-media-mw : 1199px; /* Max-width for large screens */
Colors
By default, css-map has 7 colors you can use. All colors are defined in the settings.less file.
color name | color hexa | color render |
---|---|---|
color name | color hexa | color render |
Primary | #29b7e1 |
primary
|
Green | #80ae37 |
green
|
Red | #c41515 |
red
|
Blue | #3498db |
blue
|
Purple | #8e44ad |
purple
|
Orange | #f39c12 |
orange
|
Yellow | #f1c40f |
yellow
|
If you want to create new colors class class="cc-bg-mynewcolor" and class="cc-mynewcolor", you have to add your new color definitions to the @aColors array (at the bottom of colors definitions).
It means that class="cc-gray"(for texts color property) and class="cc-bg-gray" (for background-color property) does not work in css-map.
/* Colors definitions in settings.less file */
/*
-- @ Colors @ --
*/
/* Primary color */
@primary : #29b7e1;
@primary-na : primary; /* Name of the color, for @aColors array */
@primary-li : lighten(@primary,10%); /* Lighten primary */
@primary-da : darken(@primary,10%); /* Darken primary */
// Green
@green : #80ae37;
@green-na : green; /* Name of the color, for @aColors array */
@green-li : lighten(@green,10%); /* Lighten green */
@green-da : darken(@green,10%); /* Darken green */
// red
@red : #c41515;
@red-na : red; /* Name of the color, for @aColors array */
@red-li : lighten(@red,10%); /* Lighten red */
@red-da : darken(@red,10%); /* Darken red */
// gray
@gray : #bababa;
@gray-na : gray; /* Name of the color, for @aColors array */
@gray-li : lighten(@gray,10%); /* Lighten gray */
@gray-da : darken(@gray,10%); /* Darken gray */
// blue
@blue : #3498db;
@blue-na : blue; /* Name of the color, for @aColors array */
@blue-li : lighten(@blue,10%); /* Lighten blue */
@blue-da : darken(@blue,10%); /* Darken blue */
// purple
@purple : #8e44ad;
@purple-na : purple; /* Name of the color, for @aColors array */
@purple-li : lighten(@purple,10%); /* Lighten purple */
@purple-da : darken(@purple,10%); /* Darken purple */
// orange
@orange : #f39c12;
@orange-na : orange; /* Name of the color, for @aColors array */
@orange-li : lighten(@orange,10%); /* Lighten orange */
@orange-da : darken(@orange,10%); /* Darken orange */
// yellow
@yellow : #f1c40f;
@yellow-na : yellow; /* Name of the color, for @aColors array */
@yellow-li : lighten(@yellow,10%); /* Lighten yellow */
@yellow-da : darken(@yellow,10%); /* Darken yellow */
// Colors array : Add any color you want \m/
// array(@color1-name @color1-value, @color2-name @color2-value,...);
@aColors :
@primary-na @primary,
@green-na @green,
@red-na @red,
@blue-na @blue,
@purple-na @purple,
@orange-na @orange,
@yellow-na @yellow;
Grids
- 12 columns in a row
- Each item has a default padding of 1 em
- Columns gutters are set to 0em
- Masonry cols have a gap of 1.5rem
/* Grids definitions in settings.less file */
/*
-- @ Grids @ --
*/
@cols-gutter : 0em; /* Gutter between 2 cols = Each column margin-left & margin-right */
@cols-total : 12; /* Total of cols in grid */
@cols-pa : 1em; /* Each column padding */
@cols-mat : 0em; /* Each column margin top */
@cols-mab : @cols-mat; /* Each column margin bottom */
@cols-masonry-gap : 1.5em; /* Gap between each column with masonry layout */
Blocks helpers in css-map
In css-map, blocks helpers defines the properties you can apply to blocks HTML elements (display, width, paddings, margins...).
By default, paddings and margins applied with the classes cc-pa and cc-ma are set to 1em
/* Helpers definitions in settings.less file */
/*
-- @ Helpers @ --
*/
@helper-pa : 1em; /* Used for helpers cc-pa */
@helper-pat : 1em; /* Used for helpers cc-pat */
@helper-par : 1em; /* Used for helpers cc-par */
@helper-pab : 1em; /* Used for helpers cc-pab */
@helper-pal : 1em; /* Used for helpers cc-pal */
@helper-ma : 1em; /* Used for helpers cc-ma */
@helper-mat : 1em; /* Used for helpers cc-mat */
@helper-mar : 1em; /* Used for helpers cc-mar */
@helper-mab : 1em; /* Used for helpers cc-mab */
@helper-mal : 1em; /* Used for helpers cc-mal */
Components in css-map
Alerts
css-map provides 5 types of alerts :
- Primary alerts : class="alert alert-primary"
- Info alerts : class="alert alert-info"
- Warning alerts : class="alert alert-warning"
- Error alerts : class="alert alert-error"
- Success alerts : class="alert alert-success"
The closing button requires the chuckss.js file.
Primary alerts
<!-- Primary alert -->
<div class="alert alert-primary">
<button class="close"><i class="ion-ios-close-outline"></i></button>
<i class="fa-bolt fas icon-left"></i>
<strong>Primary color</strong> alert with <strong>FontAwesome icon</strong>. Nunc nunc...
</div>
Error alerts
A list exemple 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.
<!-- Error alert -->
<div class="alert alert-error">
<button class="close"><i class="ion-ios-close-outline"></i></button>
<i class="fas fa-hand-spock icon-right"></i> <strong>Error</strong> alert. Nunc nunc ...
<p>A list exemple below :</p>
<ul>
<li><strong>Error 1 :</strong> Nunc nunc...</li>
<li><strong>Error 2 :</strong> Nunc nunc...</li>
<li><strong>Error 3 :</strong> Nunc nunc...</li>
</ul>
</div>
Success alerts
<!-- Success alert -->
<div class="alert alert-success">
<button class="close"><i class="ion-ios-close-outline"></i></button>
<i class="ion-android-checkmark-circle icon-left"></i> <strong>Success</strong> alert. Nunc nunc ...
</div>
Warning alerts
<!-- Warning alert -->
<div class="alert alert-warning">
<button class="close"><i class="ion-ios-close-outline"></i></button>
<i class="ion-android-bicycle icon-left"></i>
<strong>Warning</strong> alert with <strong>Ionicons icon</strong>. Nunc nunc ...
</div>
Info alerts
<!-- Info alert -->
<div class="alert alert-info">
<button class="close"><i class="ion-ios-close-outline"></i></button>
<i class="fa-exclamation-circle fas icon-left"></i>
<strong>Info</strong> alert with <strong>FontAwesome icon</strong>. Nunc nunc ...
</div>
Badges
You just have to add a <span class="badge">
Standards badges
Nunc nunc lundium aliquet 54 elementum ac pulvinar proin.
<!-- Badges exemples -->
<p>
Nunc nunc lundium aliquet <span class="badge">54</span> elementum ac pulvinar proin.
</p>
<p>
<button>
Button <span class="badge">554</span>
</button>
</p>
Colorized badges
Nunc nunc lundium aliquet 54 elementum ac pulvinar proin.
<!-- Badges exemples -->
<p>
Nunc nunc lundium aliquet <span class="badge cc-bg-primary">54</span> elementum ac pulvinar proin.
</p>
<p>
<button>
Button <span class="badge cc-bg-red">554</span>
</button>
</p>
Colorized parents containers
Nunc nunc lundium aliquet 54 elementum ac pulvinar proin.
<!-- Badges exemples -->
<p class="cc-bg-primary cc-pa">
Nunc nunc lundium aliquet <span class="badge">54</span> elementum ac pulvinar proin.
</p>
<p>
<button class="cc-bg-green">
Button <span class="badge">554</span>
</button>
</p>
Grids
css-map is based on a 12 columns grid. If you work with source files, you can easily change this value by updating the settings.less file and compiling sources yourself (with Grunt or Gulp)!
All our exemples are based on a 12 columns grid.
In the exemples below, each column item have a background-color for a better learning and comprehension.
Neverthless, you can easily override this default behaviour (with specific classes).
Basic grids
<!-- Basic grids -->
<div class="columns">
<div>Auto</div>
<div>Auto</div>
<div>Auto</div>
<div>Auto</div>
</div>
Set items width
class="cc-{number}" : applied all devices
class="cc-{number}-{letter}" : according to screen width
{number} : can be set from 1 to @cols-total (default : 12)
{letter} : can be set to "xs", "s", "m", "l", "xl"
Small (>=360px) : 4/12
Medium (>=768px) : 3/12
Large (>=990px) : 6/12
X-Large (>=1200px) : 4/12
Small (>=360px) : 8/12
Medium (>=768px) : 9/12
Large (>=990px) : 6/12
X-Large (>=1200px) : 8/12
<!-- Responsive grids -->
<div class="columns">
<div class="cc-4-s cc-3-m cc-6-l cc-4-xl">
Default : <strong>12/12</strong><br />
Small (>=360px) : <strong>4/12</strong><br />
Medium (>=768px) : <strong>3/12</strong><br />
Large (>=990px) : <strong>6/12</strong><br />
X-Large (>=1200px) : <strong>4/12</strong>
</div>
<div class="cc-8-s cc-9-m cc-6-l cc-8-xl">
Default : <strong>12/12</strong><br />
Small (>=360px) : <strong>8/12</strong><br />
Medium (>=768px) : <strong>9/12</strong><br />
Large (>=990px) : <strong>6/12</strong><br />
X-Large (>=1200px) : <strong>8/12</strong>
</div>
</div>
Offsets
class="cc-offset-{number}" : applied on all devices
class="cc-offset-{number}-{letter}" : according to screen width
{number} : can be set from 1 to @cols-total (default : 12)
{letter} : can be set to "xs", "s", "m", "l", "xl"
Large : offset 3
Medium : offset 5
Small : offset 0 and 100% width
<!-- Offsets grids -->
<div class="columns">
<div class="cc-offset-4">Offset 4</div>
</div>
<div class="columns">
<div class="cc-3 cc-offset-1">3/12 with offset 1</div>
</div>
<div class="columns">
<div class="cc-6-m cc-offset-6-xl cc-offset-3-l cc-offset-5-m cc-offset-0-s">
X-Large : offset 6<br />
Large : offset 3<br />
Medium : offset 5<br />
Small : offset 0 and 100% width
</div>
</div>
Ordering
class="cc-first" : item in first position (all devices)
class="cc-last" : item in last position (all devices)
class="cc-first-{letter}" : item in first position according to screen width
class="cc-last-{letter}" : item in last position according to screen width
{letter} : can be set to "xs", "s", "m", "l", "xl"
<!-- Ordering -->
<div class="columns">
<div class="cc-last">I'm the last item but first in HTML!</div>
<div>Lorem ipsum..</div>
<div class="cc-first">I'm the first item but third in HTML!</div>
<div>Lorem ipsum..</div>
</div>
<div class="columns">
<div class="cc-last-s">S:last</div>
<div class="cc-last-m">M:last</div>
<div class="cc-last-l">L:last</div>
<div class="cc-last-xl">XL:last</div>
</div>
<div class="columns">
<div class="cc-first-s">S:first</div>
<div class="cc-first-m">M:first</div>
<div class="cc-first-l">L:first</div>
<div class="cc-first-xl">XL:first</div>
</div>
Remove multiligne
class="cc-no-multiligne" : remove multiligne on grid container
<!-- Remove multiligne -->
<div class="columns cc-no-multiligne">
<div class="cc-7">7</div>
<div class="cc-6">6 /!\ TOO LARGE</div>
</div>
Reverse columns
class="cc-reverse" : reverse items display on a grid
<!-- Reverse columns -->
<div class="columns cc-reverse">
<div class="cc-3">First in html</div>
<div class="cc-3">Second in html</div>
<div class="cc-3">Third in html</div>
<div class="cc-3">Fourth in html</div>
</div>
Nested grids
class="columns" : Add "columns" class to an item. That's all!
<!-- Nested grids -->
<div class="columns">
<div class="cc-3">3</div>
<div class="cc-9">9</div>
</div>
<div class="columns">
<div class="columns cc-3">
<div class="cc-6">6 in 3</div>
<div class="cc-6">6 in 3</div>
</div>
<div class="cc-9 columns">
<div class="cc-4">4 in 9</div>
<div class="cc-4">4 in 9</div>
<div class="cc-4">4 in 9</div>
</div>
</div>
<!-- Nested grids -->
<div class="columns">
<div class="cc-8">8</div>
<div class="cc-4">4</div>
</div>
<div class="columns">
<div class="columns cc-8">
<div class="cc-4">4 in 8</div>
<div class="cc-6">6 in 8 | Ridiculus ...</div>
<div class="cc-2">2 in 8</div>
</div>
<div class="columns cc-4">
<div class="cc-6">6 in 4</div>
<div class="cc-6">6 in 4</div>
</div>
</div>
Columns alignments on X axis
class="cc-justify-start" : In a row, all items are pulled to the left
class="cc-justify-center" : In a row, all items are centered
class="cc-justify-end" : In a row, all items are pulled to the right
class="cc-justify-between" : 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" : In a row, all columns are evenly distributed in the line with equal space around them
<!-- Items X alignments -->
<div class="columns cc-justify-start">
<div class="cc-3">Start</div>
<div class="cc-3">Start</div>
</div>
<!-- Items X alignments -->
<div class="columns cc-justify-center">
<div class="cc-3">Centered</div>
<div class="cc-3">Centered</div>
</div>
<!-- Items X alignments -->
<div class="columns cc-justify-end">
<div class="cc-3">Centered</div>
<div class="cc-3">Centered</div>
</div>
<!-- Items X alignments -->
<div class="columns cc-justify-between">
<div class="cc-3">Spacing on 100% width</div>
<div class="cc-5">Spacing on 100% width</div>
<div class="cc-3">Spacing on 100% width</div>
</div>
<!-- Items X alignments -->
<div class="columns cc-justify-around">
<div class="cc-3">Equal spacing</div>
<div class="cc-5">Equal spacing</div>
<div class="cc-3">Equal spacing</div>
</div>
Columns alignments on Y axis
class="columns cc-align-start" : Position all items to the top of the grid container
class="columns cc-align-center" : Center all items on Y axis
class="columns cc-align-end" : Position all item to the bottom of the grid container
class="columns cc-align-baseline" : Position all items according to the baseline
class="columns cc-align-stretch" : Stretch all columns on Y axis
In this way, the item will react as a flex container.
Incididunt proident tenderloin ground round leberkas spare ribs. In alcatra commodo meatball. Consequat ea frankfurter biltong.
TOP CONTENT ALIGNMENT
Bacon ipsum dolor amet nisi t-bone meatball tri-tip.
<!-- Items Y alignments -->
<div class="columns">
<div class="cc-3">
Bacon ipsum dolor...
</div>
<div class="cc-9 columns cc-align-start">
<p>
<strong>TOP CONTENT ALIGNMENT</strong><br /><br />
Bacon ipsum...
</p>
</div>
</div>
Incididunt proident tenderloin ground round leberkas spare ribs. In alcatra commodo meatball. Consequat ea frankfurter biltong.
CENTER CONTENT ALIGNMENT
Bacon ipsum dolor amet nisi t-bone meatball tri-tip.
<!-- Items Y alignments -->
<div class="columns">
<div class="cc-3">
Bacon ipsum dolor...
</div>
<div class="cc-9 columns cc-align-center">
<p>
<strong>CENTER CONTENT ALIGNMENT</strong><br /><br />
Bacon ipsum...
</p>
</div>
</div>
Incididunt proident tenderloin ground round leberkas spare ribs. In alcatra commodo meatball. Consequat ea frankfurter biltong.
BOTTOM CONTENT ALIGNMENT
Bacon ipsum dolor amet nisi t-bone meatball tri-tip.
<!-- Items Y alignments -->
<div class="columns">
<div class="cc-3">
Bacon ipsum dolor...
</div>
<div class="cc-9 columns cc-align-end">
<p>
<strong>BOTTOM CONTENT ALIGNMENT</strong><br /><br />
Bacon ipsum...
</p>
</div>
</div>
Bacon ipsum dolor amet nisi t-bone meatball tri-tip.
Bacon ipsum dolor amet nisi t-bone meatball tri-tip.
Bacon ipsum dolor amet nisi t-bone meatball tri-tip.
<!-- Items Y alignments -->
<div class="columns">
<div class="columns cc-align-baseline">
<p style="line-height:2">
Bacon ipsum dolor amet nisi t-bone meatball tri-tip.
</p>
<p>
Bacon ipsum dolor amet nisi t-bone meatball tri-tip.
</p>
<p style="line-height:3">
Bacon ipsum dolor amet nisi t-bone meatball tri-tip.
</p>
</div>
</div>
Incididunt proident tenderloin ground round leberkas spare ribs. In alcatra commodo meatball. Consequat ea frankfurter biltong.
STRETCH CONTENT ALIGNMENT
Bacon ipsum dolor amet nisi t-bone meatball tri-tip.
<!-- Items Y alignments -->
<div class="columns">
<div class="cc-3">
Bacon ipsum dolor...
</div>
<div class="cc-9 columns cc-align-stretch">
<p>
<strong>STRETCH CONTENT ALIGNMENT</strong><br /><br />
Bacon ipsum...
</p>
</div>
</div>
Targeted column alignment on X axis
class="cc-left" : pull items to the left (all devices)
class="cc-right" : pull items to the right (all devices)
class="cc-center" : center items (all devices)
class="cc-left cc-w-auto" : combine classes for a "float:left"-like
class="cc-right cc-w-auto" : combine classes for a "float:right"-like
(float:left like)
(float:right like)
<!-- Columns alignments -->
<div class="columns">
<div class="cc-3 cc-left">3</div>
<div class="cc-4 cc-center">4 centered between 3 and 2</div>
<div class="cc-2 cc-right">2 right</div>
</div>
<div class="columns">
<div class="cc-w-auto cc-left">auto align left<br />(float:left like)</div>
<div class="cc-w-auto cc-right">auto align right<br />(float:right like)</div>
</div>
Targeted column alignment on Y axis
class="cc-align-self-top" : Position targeted item to the top of the grid container
class="cc-align-self-center" : Center targeted item on Y axis
class="cc-align-self-bottom" : Position targeted item to the bottom of the grid container
class="cc-align-self-baseline" : Position targeted item according to the baseline
class="cc-align-self-stretch" : Stretch targeted item on Y axis
Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus.
<!-- Targeted item Y alignments -->
<div class="columns">
<div class="cc-align-self-top">
align self top<br /><br />
Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui...
</div>
<div class="cc-align-self-bottom">
align self bottom
</div>
<div class="cc-align-self-center">
align self center
</div>
<div class="cc-align-self-stretch">
align self stretch
</div>
<div class="cc-align-self-baseline">
align self baseline
</div>
</div>
Masoury layouts
Masonry grids are experimental in CSS3. Please check browers compatilities with CanIUse
class="columns cc-masonry" : Let the grid container work as a multiple columns layout
class="columns cc-masonry cc-{number}-{letter}" : Number of columns according to screen width
{number} : Number of columns in the masonry grid. Can be set from 1 to infinite
{letter} : can be set to "xs", "s", "m", "l", "xl"
Basic masonry layout
The exemple below show a masonry with :
- 5 columns on X-Large screens
- 4 columns on Large screens
- 3 columns on Medium screens
- 2 columns on Small screens
- 1 column on X-Small screens
<div class="columns cc-masonry cc-5-xl cc-4-l cc-3-m cc-2-s cc-1-xs">
<div>I'm <strong>nĀ°1</strong> in HTML</div>
<div>I'm <strong>nĀ°2</strong> in HTML</div>
<div>I'm <strong>nĀ°3</strong> in HTML</div>
...
<div>I'm <strong>nĀ°12</strong> in HTML</div>
<div>I'm <strong>nĀ°13</strong> in HTML</div>
<div>I'm <strong>nĀ°14</strong> in HTML</div>
</div>
Messages
css-map provides 5 types of messages :
- Primary messages : class="message message-primary"
- Info messages : class="message message-info"
- Warning messages : class="message message-warning"
- Error messages : class="message message-error"
- Success messages : class="message message-success"
Primary messages
<!-- Primary messages -->
<div class="message message-primary">
<i class="ion-ios-pricetags icon-left"></i>
<strong>Primary color</strong> message with <strong>FontAwesome icon</strong>. Nunc nunc lundium aliquet elementum ac pulvinar proin. <a href="#">This is a link</a> lorem et...
</div>
Error messages
<!-- Error messages -->
<div class="message message-error">
<i class="fas fa-hand-spock icon-left"></i>
<strong>Error</strong> message...
<p>A list exemple below :</p>
<ul>
<li><strong>Error 1 :</strong> Nunc nunc lundium aliquet elementum ac pulvinar proin.</li>
<li><strong>Error 2 :</strong> Nunc nunc lundium aliquet elementum ac pulvinar proin.</li>
<li><strong>Error 3 :</strong> Nunc nunc lundium aliquet elementum ac pulvinar proin.</li>
</ul>
</div>
Success messages
<!-- Success message -->
<div class="message message-success">
<i class="ion-android-checkmark-circle icon-left"></i>
<strong>Success</strong> message...
</div>
Warning messages
<!-- Warning message -->
<div class="message message-warning">
<i class="ion-android-bicycle icon-left"></i>
<strong>Warning</strong> message with <strong>Ionicons icon</strong>. Nunc nunc ...
</div>
Info messages
<!-- Info message -->
<div class="message message-info">
<i class="fas fa-exclamation-circle icon-left"></i>
<strong>Status</strong> message with <strong>FontAwesome icon</strong>. Nunc nunc...
</div>
Modals with css-map
Build modals with css-map is very easy.
You just have to respect a specific syntax to display modals properly!
Place a modal's HTML at the bottom or at the top of your document, but not immediatly after the button who fire the modal.
Modals structure
.modal-open : Add this class to a button, link... to fire the targeted modal (this class is binded in the css-map.js file)
data-target attribute must contains the id of the modal you want to fire
data-close-modal attribute can be placed on any HTML element inside the modal. On click, the modal is closed.
<!-- Button -->
<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">
<a href="javascript:void(0)" class="btn cc-bg-red" data-close-modal>Close</a>
</div>
</div>
</div>
Modals width
- class="modal" : Display a basic modal of 50% width
- class="modal modal-small" : Display a small modal of 30% width
- class="modal modal-large" : Display a large modal of 80% width
<!-- Button : Classic modal -->
<button data-target="modal-id" class="cc-bg-primary modal-open">Launch classic modal (50%)</button>
<!-- Button : Small modal -->
<button data-target="modal-id-small" class="cc-bg-primary modal-open">Launch small modal (30%)</button>
<!-- Button : Large modal -->
<button data-target="modal-id-large" class="cc-bg-primary modal-open">Launch classic modal (80%)</button>
<!-- Classic modal -->
<div id="modal-id" class="modal">
...modal structure...
</div>
<!-- Small modal -->
<div id="modal-id-small" class="modal modal-small">
...modal structure...
</div>
<!-- Large modal -->
<div id="modal-id-large" class="modal modal-large">
...modal structure...
</div>
Disabled modals overlay
<!-- Button : Disabled overlay-->
<button data-target="modal-id-disabled" class="cc-bg-primary modal-open">Disabled the modal overlay</button>
<!-- Modal -->
<div id="modal-id-disabled" class="modal modal-small" data-disabled-overlay>
...modal structure...
</div>
Fixed Header & Footer on modals
data-fixed-hf : Make the <header> & <footer> fixed into the modal.
Very usefull when a modal display a very long content!
Need a wrapper around the <div class="modal-body"></div> element
<!-- Button : modal with fixed header & footer overlay -->
<button data-target="modal-id-fixed-hf" class="cc-bg-primary modal-open">Modal with fixed header & footer</button>
<!-- Modal structure for fixing header and footer -->
<div id="modal-id-fixed-hf" class="modal" data-fixed-hf>
<!-- Close button -->
<button data-close-modal></button>
<!-- Overlay -->
<div class="modal-overlay"></div>
<!-- Modal content -->
<div class="modal-content">
<div class="modal-header">
I'm a default modal with fixed header & footer
</div>
<!-- /!\ Add a wrapper around the modal body -->
<div class="wrap-modal-body">
<div class="modal-body">
... very long text...
</div>
</div>
<div class="modal-footer cc-txt-center">
<a href="javascript:void(0)" class="btn cc-bg-red" data-close-modal>Close</a>
</div>
</div>
</div>
Nested modals
<!-- Button : first modal -->
<button data-target="modal-id-nested" class="cc-bg-primary modal-open">Open the first modal</button>
<!-- First modal -->
<div id="modal-id-nested" class="modal">
...modal structure...
</div>
<!-- Second modal -->
<div id="modal-id-2" class="modal">
...modal structure...
</div>
<!-- Third modal -->
<div id="modal-id-3" class="modal">
...modal structure...
</div>
Fullscreen modals (added in v3.0.5)
data-fullscreen : show a modal in "fullscreen" mode.
Just combine data-fullscreen and data-fixed-hf attributes and keep the data-fixed-hf HTML structure.
<!-- Button : launch fullscreen modal -->
<button data-target="modal-id-fullscreen" class="cc-bg-primary modal-open">
Open a fullscreen modal mixed with fixed Header & Footer
</button>
<!-- Modal structure for fullscreen combined with fixed Header & Footer -->
<div id="modal-id-fullscreen" class="modal" data-fixed-hf data-fullscreen>
...'data-fixed-hf' modal structure...
</div>
Tabs
You can use tabs to display horizontal lists, menus, etc...
Basic tabs
<!-- Basic tabs -->
<ul class="tabs">
<li><a href="#">Link 1</a></li>
<li class="active"><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
<li><a href="#">Link 6</a></li>
<li><a href="#">Link 7</a></li>
</ul>
Underlined tabs
<!-- Underlined tabs -->
<ul class="tabs cc-underlined">
...same HTML structure...
</ul>
Bordered tabs
<!-- Bordered tabs -->
<ul class="tabs cc-bordered">
...same HTML structure...
</ul>
Tabs thickness
<!-- Thin tabs -->
<ul class="tabs cc-thin">
...same HTML structure...
</ul>
<!-- Combine thin and underlined tab -->
<ul class="tabs cc-underlined cc-thin">
...same HTML structure...
</ul>
<!-- Combine thin and bordered tab -->
<ul class="tabs cc-bordered cc-thin">
...same HTML structure...
</ul>
<!-- Fat tabs -->
<ul class="tabs cc-fat">
...same HTML structure...
</ul>
<!-- Combine fat and underlined tab -->
<ul class="tabs cc-underlined cc-fat">
...same HTML structure...
</ul>
<!-- Combine fat and bordered tab -->
<ul class="tabs cc-bordered cc-fat">
...same HTML structure...
</ul>
Tabs main color
<!-- Change main color -->
<ul class="tabs cc-purple">
...same HTML structure...
</ul>
<ul class="tabs cc-underlined cc-purple">
...same HTML structure...
</ul>
<ul class="tabs cc-bordered cc-purple">
...same HTML structure...
</ul>
Tab items alignment
class="cc-align-left-{letter}" : Align items to the left according to screen width
class="cc-align-right" : Align items to the right (all devices)
class="cc-align-right-{letter}" : Align items to the right according to screen width
class="cc-align-center" : Center items (all devices)
class="cc-align-center-{letter}" : Center items according to screen width
class="cc-align-stretch" : Stretch items (all devices)
class="cc-align-stretch-{letter}" : Stretch items according to screen width
class="cc-last" : Pull this item to the right as a "float:right"-like
{letter} : can be set to "s", "m", "l", "xl"
<!-- Items left alignment -->
<ul class="tabs cc-bordered cc-align-left">
...same HTML structure...
</ul>
<!-- Items right alignment -->
<ul class="tabs cc-bordered cc-align-right">
...same HTML structure...
</ul>
<!-- Items center alignment -->
<ul class="tabs cc-bordered cc-align-center">
...same HTML structure...
</ul>
<!-- Items stretch alignment -->
<ul class="tabs cc-bordered cc-align-stretch">
...same HTML structure...
</ul>
This exemple below show a tab with a :
- Left alignment on X-Large screens
- Right alignment on Large screens
- Stretch alignment on Medium screens
<!-- Screen alignement -->
<ul class="tabs cc-align-left-xl cc-align-right-l cc-align-stretch-m">
...same HTML structure...
</ul>
This exemple below show a tab with an item pulled to the right.
<!-- Pull item to the right -->
<ul class="tabs">
<li><a href="#">Link 1</a></li>
<li class="active"><a href="#">Link 2</a></li>
<li class="cc-last"><a href="#" class="btn cc-bg-red">Exit!</a></li>
<li><a href="#">Link 3</a></li>
</ul>
Pills tabs
<!-- Thin Pills tab -->
<ul class="tabs cc-pills cc-thin">
...same HTML structure...
</ul>
<!-- Pills tab -->
<ul class="tabs cc-pills">
...same HTML structure...
</ul>
<!-- Fat Pills tab -->
<ul class="tabs cc-pills cc-fat">
...same HTML structure...
</ul>
Unchained Pills tabs
<!-- Thin Pills tab -->
<ul class="tabs cc-pills cc-thin cc-unchained">
...same HTML structure...
</ul>
<!-- Pills tab -->
<ul class="tabs cc-pills cc-unchained">
...same HTML structure...
</ul>
<!-- Fat Pills tab -->
<ul class="tabs cc-pills cc-fat cc-unchained">
...same HTML structure...
</ul>
Elements in css-map
Blockquotes
<blockquote> tag specifies a section that is quoted from another source.
Use a color defined in css-map framework
Basic blockquote
Bacon ipsum dolor amet venison chuck cow picanha tenderloin beef ribs tongue flank short ribs. Meatball ribeye pancetta swine chuck turkey hamburger boudin. Boudin pork belly pancetta turkey bacon tri-tip tail flank jowl kevin filet mignon.
Bacon ipsum dolor amet venison chuck cow picanha tenderloin beef ribs tongue flank short ribs. Meatball ribeye pancetta swine chuck turkey hamburger boudin. Boudin pork belly pancetta turkey bacon tri-tip tail flank jowl kevin filet mignon.
<!-- Basic blockquote -->
<blockquote>
Bacon ipsum dolor amet venison chuck...
</blockquote>
<!-- Basic blockquote with footer -->
<blockquote>
Bacon ipsum dolor amet venison chuck...
<footer>Gitman, git superhero</footer>
</blockquote>
Quoted blockquote
class="cc-quoted" : Display a quoted blockquote
Bacon ipsum dolor amet venison chuck cow picanha tenderloin beef ribs tongue flank short ribs. Meatball ribeye pancetta swine chuck turkey hamburger boudin. Boudin pork belly pancetta turkey bacon tri-tip tail flank jowl kevin filet mignon.
<!-- Quoted blockquote -->
<blockquote class="cc-quoted">
Bacon ipsum dolor amet venison chuck...
<footer>Gitman, git superhero</footer>
</blockquote>
Change blockquote main color
class="cc-{color}" : Display a colorized blockquote
{color} : A color defined in css-map framework
Bacon ipsum dolor amet venison chuck cow picanha tenderloin beef ribs tongue flank short ribs. Meatball ribeye pancetta swine chuck turkey hamburger boudin. Boudin pork belly pancetta turkey bacon tri-tip tail flank jowl kevin filet mignon.
Bacon ipsum dolor amet venison chuck cow picanha tenderloin beef ribs tongue flank short ribs. Meatball ribeye pancetta swine chuck turkey hamburger boudin. Boudin pork belly pancetta turkey bacon tri-tip tail flank jowl kevin filet mignon.
<!-- Colorized blockquote -->
<blockquote class="cc-purple">
Bacon ipsum dolor amet venison chuck...
<footer>Gitman, git superhero</footer>
</blockquote>
<!-- Colorized & Quoted blockquote -->
<blockquote class="cc-purple cc-quoted">
Bacon ipsum dolor amet venison chuck...
<footer>Gitman, git superhero</footer>
</blockquote>
Revers blockquote
class="cc-reverse" : Reverse the blockquote
Bacon ipsum dolor amet venison chuck cow picanha tenderloin beef ribs tongue flank short ribs. Meatball ribeye pancetta swine chuck turkey hamburger boudin. Boudin pork belly pancetta turkey bacon tri-tip tail flank jowl kevin filet mignon.
Bacon ipsum dolor amet venison chuck cow picanha tenderloin beef ribs tongue flank short ribs. Meatball ribeye pancetta swine chuck turkey hamburger boudin. Boudin pork belly pancetta turkey bacon tri-tip tail flank jowl kevin filet mignon.
<!-- Reverse blockquote -->
<blockquote class="cc-reverse">
Bacon ipsum dolor amet venison chuck...
<footer>Gitman, git superhero</footer>
</blockquote>
<!-- Reverse & Colorized & Quoted blockquote -->
<blockquote class="cc-red cc-reverse cc-quoted">
Bacon ipsum dolor amet venison chuck...
<footer>Gitman, git superhero</footer>
</blockquote>
Buttons / Btn Links
Basic buttons & "btn-like" links
<!-- Basic buttons & btn-like link -->
<a href="#" class="btn">"Btn-like" HTML link</a>
<button>Button</button>
Buttons thickness
<!-- Thin button & HTML link -->
<a href="#" class="btn cc-thin">Thin HTML link</a>
<button class="cc-thin">Thin button</button>
<!-- Fat button & HTML link -->
<a href="#" class="btn cc-fat">Fat HTML link</a>
<button class="cc-fat">Fat button</button>
Colorized buttons
<!-- Colorized HTML link -->
<a href="#" class="btn cc-bg-primary">Primary</a>
<a href="#" class="btn cc-bg-blue">Blue</a>
<a href="#" class="btn cc-bg-green">Green</a>
<a href="#" class="btn cc-bg-purple">Purple</a>
<a href="#" class="btn cc-bg-red">Red</a>
<a href="#" class="btn cc-bg-orange">Orange</a>
<a href="#" class="btn cc-bg-yellow">Yellow</a>
<!-- Colorized button -->
<button class="cc-bg-primary">Primary</button>
<button class="cc-bg-blue">Blue</button>
<button class="cc-bg-green">Green</button>
<button class="cc-bg-purple">Purple</button>
<button class="cc-bg-red">Red</button>
<button class="cc-bg-orange">Orange</button>
<button class="cc-bg-yellow">Yellow</button>
Outlined buttons
{color} : A color defined in css-map framework
<!-- Outlined HTML link -->
<a href="#" class="btn cc-outlined cc-bg-primary">Outlined</a>
<a href="#" class="btn cc-outlined cc-bg-blue">Outlined</a>
<a href="#" class="btn cc-outlined cc-bg-green">Outlined</a>
<a href="#" class="btn cc-outlined cc-bg-purple">Outlined</a>
<a href="#" class="btn cc-outlined cc-bg-red">Outlined</a>
<a href="#" class="btn cc-outlined cc-bg-orange">Outlined</a>
<a href="#" class="btn cc-outlined cc-bg-yellow">Outlined</a>
<!-- Outlined button -->
<button class="cc-outlined cc-bg-primary">Outlined</button>
<button class="cc-outlined cc-bg-blue">Outlined</button>
<button class="cc-outlined cc-bg-green">Outlined</button>
<button class="cc-outlined cc-bg-purple">Outlined</button>
<button class="cc-outlined cc-bg-red">Outlined</button>
<button class="cc-outlined cc-bg-orange">Outlined</button>
<button class="cc-outlined cc-bg-yellow">Outlined</button>
Disabled buttons
<!-- Disabled HTML link -->
<a href="#" class="btn cc-disabled cc-bg-primary">Primary</a>
<a href="#" class="btn cc-disabled cc-outlined cc-bg-blue">Blue</a>
<a href="#" class="btn cc-disabled cc-bg-green">Green</a>
<a href="#" class="btn cc-disabled cc-outlined cc-bg-purple">Purple</a>
<a href="#" class="btn cc-disabled cc-bg-red">Red</a>
<a href="#" class="btn cc-disabled cc-outlined cc-bg-orange">Orange</a>
<a href="#" class="btn cc-disabled cc-bg-yellow">Yellow</a>
<!-- Disabled button -->
<button class="cc-disabled cc-bg-primary">Primary</button>
<button class="cc-disabled cc-outlined cc-bg-blue">Blue</button>
<button class="cc-disabled cc-bg-green">Green</button>
<button class="cc-disabled cc-outlined cc-bg-purple">Purple</button>
<button class="cc-disabled cc-bg-red">Red</button>
<button class="cc-disabled cc-outlined cc-bg-orange">Orange</button>
<button class="cc-disabled cc-bg-yellow">Yellow</button>
Loading buttons
class="cc-loading" : Display a loading button / link
For exemple, you can toggle a submit button with one line of javascript (simply by adding the cc-loading class).
<!-- Loading HTML link -->
<a href="#" class="btn cc-loading">I'm loading</a>
<a href="#" class="btn cc-bg-primary cc-loading">I'm loading</a>
<a href="#" class="btn cc-bg-primary cc-loading cc-outlined">I'm loading</a>
<a href="#" class="btn cc-bg-primary cc-loading cc-disabled">I'm loading</a>
<!-- Loading button -->
<button class="cc-loading">I'm loading</button>
<button class="cc-loading cc-bg-primary">I'm loading</button>
<button class="cc-loading cc-bg-primary cc-outlined">I'm loading</button>
<button class="cc-loading cc-bg-primary cc-disabled">I'm loading</button>
// Buttons loading exemple
$('button').on('click',function(e){
var target = $(this);
target.toggleClass('cc-loading cc-bg-red cc-bg-primary');
setTimeout(function(){
target
.html('<i class="far fa-handshake icon-left"></i> Done, thanks!')
.toggleClass('cc-disabled cc-loading cc-bg-red cc-bg-green')
},2500);
});
Forms
Build forms with css-map is easy. You just have to respect a specific syntax to render forms properly.
By default :
- Form items are colorized with @primary color. You can change the form main color easily.
- Label are displayed inline
- Wrappers with class="form-item" are displayed as block
On small screens (< 768px) :
- Label are displayed as block with 100% width
- Inputs are displayed as block with 100% width
Minimal forms syntax
class="form-item" : wrap a couple of <label> + a form field (input, select, textarea, ...)
<!-- Minimal forms syntax -->
<form>
<div class="form-item">
...label + input, select, textarea...
</div>
<div class="form-item">
...label + input, select, textarea...
</div>
<div class="form-item">
...label + input, select, textarea...
</div>
</form>
Basic fields
<!-- Basic Form -->
<form>
<div class="form-item">
<label>Name</label>
<input type="text" value="" placeholder="Name" name="" />
</div>
<div class="form-item">
<label>Name</label>
<input type="text" value="" placeholder="Name" name="" />
</div>
<div class="form-item">
<input type="submit" value="Submit" name="" />
</div>
</form>
Chained form items
<!-- Inline form items -->
<form>
<div class="form-item cc-inline">
...same as before...
</div>
<div class="form-item cc-inline">
...same as before...
</div>
<div class="form-item cc-inline">
...same as before...
</div>
</form>
Chained inputs in a form-item
<!-- Chained inputs -->
<form>
<div class="form-item cc-chained">
<label>Label</label>
<input type="text" value="" placeholder="Name" name="" />
<input type="text" value="" placeholder="Name" name="" />
<input type="text" value="" placeholder="Name" name="" />
<input type="submit" value="Submit" name="submit-btn" />
</div>
</form>
Radio inputs
class="form-radio block" : Display a label + radio input (one par line)
class="form-radio disabled" : Display a disabled block label + radio input
<!-- Inline radio inputs -->
<form>
<div class="form-item">
<div class="form-radio">
<label>
<input type="radio" name="radio" value="1" checked="checked" />
Choice 1 (checked)
</label>
</div>
<div class="form-radio">
<label>
<input type="radio" name="radio" value="2" />
Choice 2
</label>
</div>
<div class="form-radio disabled">
<label>
<input type="radio" name="radio" value="3" disabled="disabled" />
Choice 3 (disabled)
</label>
</div>
</div>
</form>
<!-- Block radio inputs -->
<form>
<div class="form-item">
<div class="form-radio block">
<label>
<input type="radio" name="radio2" value="1" checked="checked" />
Choice 1 (checked)
</label>
</div>
<div class="form-radio block">
<label>
<input type="radio" name="radio2" value="2" />
Choice 2
</label>
</div>
<div class="form-radio block disabled">
<label>
<input type="radio" name="radio2" value="3" disabled="disabled" />
Choice 3 (disabled)
</label>
</div>
</div>
</form>
Checkbox inputs
class="form-checkbox block" : Display a block label + checkbox input (one par line)
class="form-checkbox disabled" : Display a disabled block label + checkbox input
<!-- Inline checkbox inputs -->
<form>
<div class="form-item">
<div class="form-checkbox">
<label>
<input type="checkbox" name="checkbox1" value="1" checked="checked" />
Choice 1 (checked)
</label>
</div>
<div class="form-checkbox">
<label>
<input type="checkbox" name="checkbox2" value="2" />
Choice 2
</label>
</div>
<div class="form-checkbox disabled">
<label>
<input type="checkbox" name="checkbox3" value="3" disabled="disabled" />
Choice 3 (disabled)
</label>
</div>
</div>
</form>
<!-- Block radio inputs -->
<form>
<div class="form-item">
<div class="form-checkbox block">
<label>
<input type="checkbox" name="checkbox4" value="1" checked="checked" />
Choice 1 (checked)
</label>
</div>
<div class="form-checkbox block">
<label>
<input type="checkbox" name="checkbox5" value="2" />
Choice 2
</label>
</div>
<div class="form-checkbox block disabled">
<label>
<input type="checkbox" name="checkbox" value="3" disabled="disabled" />
Choice 3 (disabled)
</label>
</div>
</div>
</form>
Prefix & Suffix
Prefix & suffix must be placed into <span> elements.
<!-- 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>
<div class="form-item">
<label>Prefix only</label>
<div class="form-ps">
<span>$</span>
<input type="text" placeholder="price" value="" name="">
</div>
</div>
<div class="form-item">
<label>Suffix only</label>
<div class="form-ps">
<input type="text" placeholder="price" value="" name="">
<span>.00</span>
</div>
</div>
</form>
Display label as a block
<label class="block"> : Display a label as a block element.
<!-- Block label -->
<form>
<div class="form-item">
<label class="block">I'm a label displayed as a block element</label>
<input type="text" placeholder="placeholder" value="" name="" />
</div>
<div class="form-item">
<label>I'm a default label (displayed as a inline element)</label>
<input type="text" placeholder="placeholder" value="" name="" />
</div>
</form>
Error styles
class="error" : Show a form-item as an error.
<!-- Input Error style -->
<div class="form-item error">
<label>Name</label>
<input type="text" placeholder="placeholder" value="" name="" />
</div>
<!-- Select Error style -->
<div class="form-item error">
<label>Choose an option</label>
<select name="">
<option selected="selected" disabled="disabled">-- Choose --</option>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
</div>
<!-- Textarea Error style -->
<div class="form-item error">
<textarea placeholder="textarea"></textarea>
</div>
<!-- Radio Error style -->
<div class="form-item">
<div class="form-radio error">
<label>
<input type="radio" value="1" name="radio" />
Error radio
</label>
</div>
</div>
<!-- Checkbox Error style -->
<div class="form-item">
<div class="form-checkbox error">
<label>
<input type="checkbox" value="1" name="checkbox" />
Error checkbox
</label>
</div>
</div>
<!-- Prefix/Suffix Error style -->
<div class="form-item error">
<div class="form-ps">
<span>$</span>
<input type="text" placeholder="price" value="" name="">
<span>.00</span>
</div>
</div>
<!-- Chained Inputs Error style -->
<div class="form-item cc-chained error">
<input type="text" value="" placeholder="Name" name="" />
<input type="submit" value="Submit" name="submit-btn" />
</div>
Change the form main color
class="cc-{color}" : Applied to the form element, change the form main color.
{color} : A color defined in css-map framework
<!-- Main color -->
<form class="cc-green">
...form components...
</form>
Images
css-map apply a max-width:100%;height:auto on all devices. In this way, by default, images are responsive.
Remove responsive on images
class="cc-no-responsive" : Delete the responsive caracteristic to an image
Image below is not responsive
Classic image (responsive)
<!-- Image no responsive -->
<img src="..." alt="..." class="cc-no-responsive"/>
Bordered images
class="cc-bordered" : Apply a border to an image
Image below is bordered
Classic image
<!-- Bordered image -->
<img src="..." alt="..." class="cc-bordered"/>
Shadowed images
class="cc-shadowed" : Apply a shadow to an image
Image below is shadowed
Classic image
<!-- Shadowed image -->
<img src="..." alt="..." class="cc-shadowed"/>
Lists
Basic lists
- Bacon ipsum dolor amet venison chuck cow picanha tenderloin beef ribs tongue flank short ribs. Meatball ribeye pancetta swine chuck turkey hamburger boudin. Boudin pork belly pancetta turkey bacon tri-tip tail flank jowl kevin filet mignon.
- Bacon ipsum dolor amet venison chuck cow picanha tenderloin beef ribs tongue flank short ribs.
- Bacon ipsum dolor amet venison chuck cow picanha tenderloin beef ribs tongue flank short ribs. Meatball ribeye pancetta swine chuck turkey hamburger boudin.
<!-- Basic unordered lists -->
<ul>
<li>...</li>
<li>...</li>
<li>...</li>
</ul>
- Bacon ipsum dolor amet venison chuck cow picanha tenderloin beef ribs tongue flank short ribs. Meatball ribeye pancetta swine chuck turkey hamburger boudin. Boudin pork belly pancetta turkey bacon tri-tip tail flank jowl kevin filet mignon.
- Bacon ipsum dolor amet venison chuck cow picanha tenderloin beef ribs tongue flank short ribs.
- Bacon ipsum dolor amet venison chuck cow picanha tenderloin beef ribs tongue flank short ribs. Meatball ribeye pancetta swine chuck turkey hamburger boudin.
<!-- Basic ordered lists -->
<ol>
<li>...</li>
<li>...</li>
<li>...</li>
</ol>
Unstyled lists
- Bacon ipsum dolor amet venison chuck cow picanha tenderloin beef ribs tongue flank short ribs. Meatball ribeye pancetta swine chuck turkey hamburger boudin. Boudin pork belly pancetta turkey bacon tri-tip tail flank jowl kevin filet mignon.
- Bacon ipsum dolor amet venison chuck cow picanha tenderloin beef ribs tongue flank short ribs.
- Bacon ipsum dolor amet venison chuck cow picanha tenderloin beef ribs tongue flank short ribs. Meatball ribeye pancetta swine chuck turkey hamburger boudin.
<!-- Unstyled lists -->
<ul class="cc-unstyled">
<li>...</li>
<li>...</li>
<li>...</li>
</ul>
Horizontal lists
- Bacon ipsum
- Short ribs.
- Boudin
- Short ribs
<!-- Horizontal lists -->
<ul class="cc-horizontal">
<li>Bacon ipsum</li>
<li class="fa-user cc-blue">Short ribs.</li>
<li>Boudin</li>
<li class="fa-plug cc-primary icon-right">Short ribs</li>
</ul>
Loaders
css-map provides 3 loaders :
Each loader has its own HTML structure
Dots loader
class="cc-loader" : dots loader main class
class="dot dot-{number}" : Include as many times as number if dots defined in the settings.less file (default : 12 dots)
<!-- Dots loader -->
<div class="cc-loader">
<div class="dot dot-1"></div>
<div class="dot dot-2"></div>
<div class="dot dot-3"></div>
<div class="dot dot-4"></div>
<div class="dot dot-5"></div>
<div class="dot dot-6"></div>
<div class="dot dot-7"></div>
<div class="dot dot-8"></div>
<div class="dot dot-9"></div>
<div class="dot dot-10"></div>
<div class="dot dot-11"></div>
<div class="dot dot-12"></div>
</div>
Spinner loader
class="cc-loader" : spinner loader main class
class="spinner" : Required class for child element
<!-- Spinner loader -->
<div class="cc-loader">
<div class="spinner"></div>
</div>
Caterpillar loader
Caterpillar loader is comprised of 5 dots. You can not change the number of dots into the caterpillar loader.
class="cc-loader caterpillar" : Caterpillar loader main class
class="chain chain-{number}" : Required class for child element
<!-- Spinner loader -->
<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>
Tables
Basic tables
ID | Country | Continent | Population |
---|---|---|---|
1 | United States of America | North America | 318.9 millions (2014) |
2 | France | Europe | 67 millions (2014) |
3 | NĆ©pal | Asia | 28 millions (2014) |
ID | Country | Continent | Population |
<!-- Basic table structure -->
<table>
<thead>
<tr>
<th>ID</th>
<th>Country</th>
<th>Continent</th>
<th>Population</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>United States of America</td>
<td>North America</td>
<td>318.9 millions (2014)</td>
</tr>
<tr>
<td>2</td>
<td>France</td>
<td>Europe</td>
<td>67 millions (2014)</td>
</tr>
<tr>
<td>3</td>
<td>NĆ©pal</td>
<td>Asia</td>
<td>28 millions (2014)</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>ID</td>
<td>Country</td>
<td>Continent</td>
<td>Population</td>
</tr>
</tfoot>
</table>
Responsive tables
Render tables properly on small screens is still a difficult thing.
css-map provides 2 approaches to render tables responsive, depending on your table complexity.
You are the only one decision-maker for which solution you will adopt :
- If your table display simple content, you can use a specific class cc-responsive on the table element itself. This method was first published by David Bushell
- If your table is more complex (long content, lot of cells, etc...), you can wrap your table with a <div class="wrap-table"></div> parent.
Simple responsive table
ID | Country | Continent | Population |
---|---|---|---|
1 | United States of America | North America | 318.9 millions (2014) |
2 | France | Europe | 67 millions (2014) |
3 | NĆ©pal | Asia | 28 millions (2014) |
ID | Country | Continent | Population |
<!-- Simple responsive table -->
<table class="cc-responsive">
...thead, tbody, tfoot...
</table>
Complex responsive table
ID | Country | Continent | Population | ||
---|---|---|---|---|---|
1 | United States of America | North America | 318.9 millions (2014) | See Edit Delete | |
2 | France | Europe | 67 millions (2014) | See Edit Delete | |
3 | NĆ©pal | Asia | 28 millions (2014) | See Edit Delete | |
ID | Country | Continent | Population |
<!-- Complex responsive table -->
<div class="wrap-table">
<table>
...thead, tbody, tfoot...
</table>
</div>
Bordered tables
ID | Country | Continent | Population |
---|---|---|---|
1 | United States of America | North America | 318.9 millions (2014) |
2 | France | Europe | 67 millions (2014) |
3 | NĆ©pal | Asia | 28 millions (2014) |
ID | Country | Continent | Population |
<!-- Bordered table -->
<table class="cc-bordered">
...
</table>
Unbordered tables
ID | Country | Continent | Population |
---|---|---|---|
1 | United States of America | North America | 318.9 millions (2014) |
2 | France | Europe | 67 millions (2014) |
3 | NĆ©pal | Asia | 28 millions (2014) |
ID | Country | Continent | Population |
<!-- Unbordered table -->
<table class="cc-unbordered">
...
</table>
Cols with equal widths
ID | Country | Continent | Population |
---|---|---|---|
1 | United States of America | North America | 318.9 millions (2014) |
2 | France | Europe | 67 millions (2014) |
3 | NĆ©pal | Asia | 28 millions (2014) |
ID | Country | Continent | Population |
<!-- Equal cols table -->
<table class="cc-equal-cols">
...
</table>
Align content to top
class="cc-valign-top" : Content into cells are aligned to the top
ID | Country | Continent | Population |
---|---|---|---|
1 | United States of America | North America | 318.9 millions
source : Wikipedia (2014) |
2 | France | Europe | 67 millions (2014)
source : Wikipedia (2014) |
3 | NĆ©pal | Asia | 28 millions (2014)
source : Wikipedia (2014) |
ID | Country | Continent | Population |
<!-- Align content to the top -->
<table class="cc-valign-top">
...
</table>
Hovered tables
class="cc-hovered" : Highlight a hovered row
ID | Country | Continent | Population |
---|---|---|---|
1 | United States of America | North America | 318.9 millions |
2 | France | Europe | 67 millions (2014) |
3 | NĆ©pal | Asia | 28 millions (2014) |
ID | Country | Continent | Population |
<!-- Hovered table -->
<table class="cc-hovered">
...
</table>
Colorized tables
class="cc-{color}" : Display a colorized table
{color} : A color defined in css-map framework
ID | Country | Continent | Population |
---|---|---|---|
1 | United States of America | North America | 318.9 millions |
2 | France | Europe | 67 millions (2014) |
3 | NĆ©pal | Asia | 28 millions (2014) |
ID | Country | Continent | Population |
<!-- Colorized table -->
<table class="cc-purple">
...
</table>
Striped rows
class="cc-striped" : Display a table with striped rows
ID | Country | Continent | Population |
---|---|---|---|
1 | United States of America | North America | 318.9 millions |
2 | France | Europe | 67 millions (2014) |
3 | NĆ©pal | Asia | 28 millions (2014) |
4 | United States of America | North America | 318.9 millions |
5 | France | Europe | 67 millions (2014) |
6 | NĆ©pal | Asia | 28 millions (2014) |
ID | Country | Continent | Population |
<!-- Striped rows -->
<table class="cc-striped">
...
</table>
Striped colums
class="cc-striped-col" : Display a table with striped columns
ID | Country | Continent | Population |
---|---|---|---|
1 | United States of America | North America | 318.9 millions |
2 | France | Europe | 67 millions (2014) |
3 | NĆ©pal | Asia | 28 millions (2014) |
ID | Country | Continent | Population |
<!-- Striped rows -->
<table class="cc-striped-col">
...
</table>
Colorize a targeted row
class="cc-bg-{color}" : Apply a background-color to this row
As written in the reminder, you have to apply this class to a <tr> element.
{color} : A color defined in css-map framework
ID | Country | Continent | Population |
---|---|---|---|
1 | United States of America | North America | 318.9 millions |
2 | France | Europe | 67 millions (2014) |
3 | NĆ©pal | Asia | 28 millions (2014) |
1 | United States of America | North America | 318.9 millions |
2 | France | Europe | 67 millions (2014) |
3 | NĆ©pal | Asia | 28 millions (2014) |
ID | Country | Continent | Population |
<!-- Colorize a targeted row -->
<table>
<thead>
<tr>
<th>ID</th>
<th>Country</th>
<th>Continent</th>
<th>Population</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>United States of America</td>
<td>North America</td>
<td>318.9 millions</td>
</tr>
<tr class="cc-bg-green">
<td>2</td>
<td>France</td>
<td>Europe</td>
<td>67 millions (2014)</td>
</tr>
<tr>
<td>3</td>
<td>NĆ©pal</td>
<td>Asia</td>
<td>28 millions (2014)</td>
</tr>
<tr class="cc-bg-purple">
<td>1</td>
<td>United States of America</td>
<td>North America</td>
<td>318.9 millions</td>
</tr>
<tr>
<td>2</td>
<td>France</td>
<td>Europe</td>
<td>67 millions (2014)</td>
</tr>
<tr class="cc-bg-blue">
<td>3</td>
<td>NĆ©pal</td>
<td>Asia</td>
<td>28 millions (2014)</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>ID</td>
<td>Country</td>
<td>Continent</td>
<td>Population</td>
</tr>
</tfoot>
</table>
Helpers in css-map
Texts helpers
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
Bacon ipsum dolor amet spare ribs drumstick porchetta tongue shank.
Cupim prosciutto biltong capicola. Andouille beef ribs tri-tip pig. Prosciutto corned beef chicken jerky burgdoggen leberkas.
Bacon ipsum dolor amet spare ribs drumstick porchetta tongue shank.
Cupim prosciutto biltong capicola. Andouille beef ribs tri-tip pig. Prosciutto corned beef chicken jerky burgdoggen leberkas.
Bacon ipsum dolor amet spare ribs drumstick porchetta tongue shank.
Cupim prosciutto biltong capicola. Andouille beef ribs tri-tip pig. Prosciutto corned beef chicken jerky burgdoggen leberkas.
Bacon ipsum dolor amet spare ribs drumstick porchetta tongue shank.
Cupim prosciutto biltong capicola. Andouille beef ribs tri-tip pig. Prosciutto corned beef chicken jerky burgdoggen leberkas. Cupim prosciutto biltong capicola. Andouille beef ribs tri-tip pig. Prosciutto corned beef chicken jerky burgdoggen leberkas. Cupim prosciutto biltong capicola. Andouille beef ribs tri-tip pig. Prosciutto corned beef chicken jerky burgdoggen leberkas.
<!-- Texts alignments -->
<p>...</p> <== same as ==> <p class="cc-txt-left">...</p>
<p class="cc-txt-right">...</p>
<p class="cc-txt-center">...</p>
<p class="cc-txt-justify">...</p>
Colorized texts
class="cc-{color}" : Apply a color on a text
{color} : A color defined in css-map framework
Bacon ipsum dolor amet spare ribs drumstick porchetta tongue shank.
Cupim prosciutto biltong capicola. Andouille beef ribs tri-tip pig. Prosciutto corned beef chicken jerky burgdoggen leberkas.
Bacon ipsum dolor amet spare ribs drumstick porchetta tongue shank.
Cupim prosciutto biltong capicola. Andouille beef ribs tri-tip pig. Prosciutto corned beef chicken jerky burgdoggen leberkas.
<!-- Colorized Texts -->
<p class="cc-blue">
...
</p>
<p class="cc-purple">
...
</p>
Blocks helpers
In css-map, blocks helpers defines properties you can apply to blocks HTML elements (display, width, paddings, margins...).
Blocks appearances
class="cc-block" : Display this element as a block element
class="cc-inline" : Display this element as inline element
class="cc-centered" : Combined with a width, center this element
class="cc-clearfix" or class="clearfix" : Fix clear of floated elements
I'm shown as a block element
I'm shown as a inline element
My width id 50% and I'm centered
<!-- Blocks appearances -->
<p class="cc-block">
I'm shown as a block element
</p>
<p class="cc-inline">
I'm shown as a inline element
</p>
<div class="cc-bg-green">
<p class="cc-w-50 cc-centered">
My width id 50% and I'm centered
</p>
</div>
Blocks widths
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%
class="cc-w-{number}" : Apply a width of {number}%
{number} : From 0 to 100, multiple of 5
<!-- Blocks widths -->
<div class="cc-w-10">10%</div>
<div class="cc-w-third">33.333%</div>
<div class="cc-w-40">40%</div>
<div class="cc-w-twothird">66.666%</div>
<div class="cc-w-85">85%</div>
Blocks paddings
class="cc-pa" : Apply a padding of 1em on the 4 sides
class="cc-pa-{number}" : Apply a padding of {number}px on the 4 sides
class="cc-pa{letter}" : Apply a padding of 1em on the {letter} side
class="cc-pa{letter}-{number}" : Apply a padding of {number}px on 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")
I have a padding of 1em on the 4 sides
I have a padding of 30px on the 4 sides
I have a padding-left of 1em
I have a padding-left of 30px
I have a padding-top of 30px and 1em on the other three sides
<!-- Blocks paddings -->
<p class="cc-pa">
I have a padding of 1em on the 4 sides
</p>
<p class="cc-pa-30">
I have a padding of 30px on the 4 sides
</p>
<p class="cc-pal">
I have a padding-left of 1em
</p>
<p class="cc-pal-30">
I have a padding-left of 30px
</p>
<p class="cc-pa cc-pat-30">
I have a padding-top of 30px and 1em on the other three sides
</p>
Blocks margins
class="cc-ma" : Apply a margin of 1em on the 4 sides
class="cc-ma-{number}" : Apply a margin of {number}px on the 4 sides
class="cc-ma{letter}" : Apply a margin of 1em on the {letter} side
class="cc-ma{letter}-{number}" : Apply a margin of {number}px on 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")
I only have a margin-bottom of 25px
I have a margin of 1em on the 4 sides
I have a margin-top of 20px and a margin-bottom of 50px
I have a margin-left of 30px and a margin-right of 50px
<!-- Blocks margins -->
<p class="cc-mab-25">
I only have a margin-bottom of 25px
</p>
<p class="cc-ma">
I have a margin of 1em on the 4 sides
</p>
<p class="cc-mat-20 cc-mab-50">
I have a margin-top of 20px and a margin-bottom of 50px
</p>
<p class="cc-mal-30 cc-mar-50">
I have a margin-left of 30px and a margin-right of 50px
</p>
Blocks background colors
class="cc-bg-{color}" : Apply a background-color to this element.
{color} : A color defined in css-map framework
I have a primary background-color
I have a purple background-color
<!-- Blocks background colors -->
<p class="cc-bg-primary">
I have a primary background-color
</p>
<p class="cc-bg-purple">
I have a purple background-color
</p>
Blocks visibilities
Block visibilities depends of the breakpoints used in css-map.
Hide blocks on all devices
<!-- Hide blocks on all devices -->
<div class="cc-hidden">
I'm hidden on all devices
</div>
Hide blocks on targeted device and upper
{letter} : can be set to "s", "m", "l", "xl"
It is the same as "cc-hidden" class : "hide this block on all devices (QED)"
cc-hidden-xl : Hidden on XL screens and upper (screen >= 1200px)
cc-hidden-l : Hidden on L screens and upper (screen >= 990px)
cc-hidden-m : Hidden on M screens and upper (screen >= 768px)
cc-hidden-s : Hidden on S screens and upper (screen >= 360px)
<!-- Hide blocks on targeted device and upper -->
<p class="cc-hidden-xl">
Hidden on XL screens and upper
</p>
<p class="cc-hidden-l">
Hidden on L screens and upper
</p>
<p class="cc-hidden-m">
Hidden on M screens and upper
</p>
<p class="cc-hidden-s">
Hidden on S screens and upper
</p>
Hide blocks on targeted device only
{letter} : can be set to "xs", "s", "m", "l", "xl"
cc-hidden-xl-only : Hidden on XL screens only (screen >= 1200px)
cc-hidden-l-only : Hidden on L screens only (990px <= screen < 1200px)
cc-hidden-m-only : Hidden on M screens only (768px <= screen < 990px)
cc-hidden-s-only : Hidden on S screens only (360px <= screen < 768px)
cc-hidden-xs-only : Hidden on XS screens only (screen < 360px)
<!-- Hide blocks on targeted device only -->
<p class="cc-hidden-xl-only">
Hidden on XL screens only
</p>
<p class="cc-hidden-l-only">
Hidden on L screens only
</p>
<p class="cc-hidden-m-only">
Hidden on M screens only
</p>
<p class="cc-hidden-s-only">
Hidden on S screens only
</p>
<p class="cc-hidden-xs-only">
Hidden on XS screens only
</p>
Hide blocks on targeted device and lower
{letter} : can be set to "xs", "s", "m", "l"
It is the same as "cc-hidden" class : "hide this block on all devices (QED)"
cc-hidden-l-down : Hidden on L screens and lower (screen < 1200px)
cc-hidden-m-down : Hidden on M screens and lower (screen < 990px)
cc-hidden-s-down : Hidden on S screens and lower (screen < 768px)
cc-hidden-xs-down : Hidden on XS screens and lower (screen < 360px)
<!-- Hide blocks on targeted device and lower -->
<p class="cc-hidden-l-down">
Hidden on L screens and lower
</p>
<p class="cc-hidden-m-down">
Hidden on M screens and lower
</p>
<p class="cc-hidden-s-down">
Hidden on S screens and lower
</p>
<p class="cc-hidden-xs-down">
Hidden on XS screens and lower
</p>
Show blocks on targeted device only
{letter} : can be set to "xs", "s", "m", "l", "xl"
cc-shown-xl-only : Shown on XL screens only (screen >= 1200px)
cc-shown-l-only : Shown on L screens only (990px <= screen < 1200px)
cc-shown-m-only : Shown on M screens only (768px <= screen < 990px)
cc-shown-s-only : Shown on S screens only (360px <= screen < 768px)
cc-shown-xs-only : Shown on XS screens only (screen < 360px)
<!-- Show blocks on targeted device only -->
<p class="cc-shown-xl-only">
Shown on XL screens only
</p>
<p class="cc-shown-l-only">
Shown on L screens only
</p>
<p class="cc-shown-m-only">
Shown on M screens only
</p>
<p class="cc-shown-s-only">
Shown on S screens only
</p>
<p class="cc-shown-xs-only">
Shown on XS screens only
</p>
Icons in css-map
Icons alignments
class="icon-right" : the left icon has a margin-left of 8 px
<!-- Icons alignments -->
<button class="cc-bg-primary">
<i class="fas fa-pencil-alt icon-left"></i>
Edit
</button>
<button class="cc-bg-red">
Delete
<i class="fas fa-pencil-alt icon-right"></i>
</button>