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

css-map documentation

Jump to...

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.

In css-map, the <body> element is set to :
  • 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
  • ...
For your front-end developments, the best way is to define elements font-size in em units to keep the typography adaptative.
Convert pixels in em and rem units
Assuming the default font-size is set to "px" units, and is called "@font-size", the calculation rules are :
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!!
In css-map, the default font-size is set to 15px.
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

View code

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
If you compile sources by yourself, you can change the breakpoints values in the settings.less file.
                                    
                                        /* 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 compile sources by yourself, you can change / add / remove colors in the settings.less file.

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).
As you can see, there is also a @gray color, but it is voluntarily excluded from @aColors array.
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.

View code

Grids

Grids in css-map are set to :
  • 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

Go to reminder

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 color alert with FontAwesome icon. Nunc nunc lundium aliquet elementum ac pulvinar proin. This is a link lorem et, dapibus, ultricies.
                                    
                                        <!-- 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

Error alert. Nunc nunc lundium aliquet elementum ac pulvinar proin. This is a link lorem et, dapibus, ultricies.

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. Nunc nunc lundium aliquet elementum ac pulvinar proin. This is a link lorem et, dapibus, ultricies. Sit mauris cras, ultricies enim ac elementum amet, vel, elementum sagittis.
                                    
                                        <!-- 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 with Ionicons icon. Nunc nunc lundium aliquet elementum ac pulvinar proin. This is a link lorem et, dapibus, ultricies. Sit mauris cras, ultricies enim ac elementum amet, vel, elementum sagittis.
                                    
                                        <!-- 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 with FontAwesome icon. Nunc nunc lundium aliquet elementum ac pulvinar proin. This is a link lorem et, dapibus, ultricies.
                                    
                                        <!-- 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

Go to reminder

Badges are usefull to highlight informations, counters, unread messages...

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

Go to reminder

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.

By default, column items take 100% width on small screens and lower.
Neverthless, you can easily override this default behaviour (with specific classes).

Basic grids

class="columns"
Auto
Auto
Auto
Auto
                                    
                                        <!-- 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"

1
1
1
1
1
1
1
1
1
1
1
1
Default : 12/12
Small (>=360px) : 4/12
Medium (>=768px) : 3/12
Large (>=990px) : 6/12
X-Large (>=1200px) : 4/12
Default : 12/12
Small (>=360px) : 8/12
Medium (>=768px) : 9/12
Large (>=990px) : 6/12
X-Large (>=1200px) : 8/12

View code

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"

1
1
1
1
1
1
1
1
1
1
1
1
Offset 4
3/12 with offset 1
X-Large : offset 6
Large : offset 3
Medium : offset 5
Small : offset 0 and 100% width

View code

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"

I'm the last item but first in HTML!
Lorem ipsum..
I'm the first item but third in HTML!
Lorem ipsum..
S:last
M:last
L:last
XL:last
S:first
M:first
L:first
XL:first

View code

Remove multiligne

class="cc-no-multiligne" : remove multiligne on grid container

7
6 /!\ TOO LARGE
                                    
                                        <!-- 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

First in html
Second in html
Third in html
Fourth in html
                                    
                                        <!-- 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!

3
9
6 in 3
6 in 3
4 in 9
4 in 9
4 in 9
                                    
                                        <!-- 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>
                                    
                                
8
4
4 in 8
6 in 8 | Ridiculus ridiculus sit!
2 in 8
6 in 4
6 in 4
                                    
                                        <!-- 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

Start
Start
                                    
                                        <!-- Items X alignments -->
                                        <div class="columns cc-justify-start">
                                            <div class="cc-3">Start</div>
                                            <div class="cc-3">Start</div>
                                        </div>
                                    
                                
Centered
Centered
                                    
                                        <!-- Items X alignments -->
                                        <div class="columns cc-justify-center">
                                            <div class="cc-3">Centered</div>
                                            <div class="cc-3">Centered</div>
                                        </div>
                                    
                                
Ending
Ending
                                    
                                        <!-- Items X alignments -->
                                        <div class="columns cc-justify-end">
                                            <div class="cc-3">Centered</div>
                                            <div class="cc-3">Centered</div>
                                        </div>
                                    
                                
Spacing on 100% width
Spacing on 100% width
Spacing on 100% width
                                    
                                        <!-- 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>
                                    
                                
Equal spacing
Equal spacing
Equal spacing
                                    
                                        <!-- 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

To make Y alignements successful, you have to combine cc-align-* with columns.

In this way, the item will react as a flex container.
Bacon ipsum dolor amet nisi t-bone meatball tri-tip. Shank ad velit, et corned beef id brisket t-bone.

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>
                                    
                                
Bacon ipsum dolor amet nisi t-bone meatball tri-tip. Shank ad velit, et corned beef id brisket t-bone.

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>
                                    
                                
Bacon ipsum dolor amet nisi t-bone meatball tri-tip. Shank ad velit, et corned beef id brisket t-bone.

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>
                                    
                                
Bacon ipsum dolor amet nisi t-bone meatball tri-tip. Shank ad velit, et corned beef id brisket t-bone.

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

3/12
4/12 : Centered between 3 and 2
2/12 : Pulled to the right
auto align left
(float:left like)
auto align right
(float:right like)

View code

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

align self top

Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus.
align self bottom
align self center
align self stretch
align self baseline

View code

Masoury layouts

Go to reminder

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"

To make masonry layout display successful, you have to combine cc-masonry with columns.

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
I'm nĀ°1 in HTML
I'm nĀ°2 in HTML
I'm nĀ°3 in HTML
I'm nĀ°4 in HTML
I'm nĀ°5 in HTML
I'm nĀ°6 in HTML
I'm nĀ°7 in HTML
I'm nĀ°8 in HTML
I'm nĀ°9 in HTML
I'm nĀ°10 in HTML
I'm nĀ°11 in HTML
I'm nĀ°12 in HTML
I'm nĀ°13 in HTML
I'm nĀ°14 in HTML
                                    
                                        
                                        <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

Go to reminder

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 color message with FontAwesome icon.
Nunc nunc lundium aliquet elementum ac pulvinar proin. This is a link lorem et, dapibus, ultricies. Sit mauris cras, ultricies enim ac elementum amet, vel, elementum sagittis.
                                    
                                        <!-- 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 message. Nunc nunc lundium aliquet elementum ac pulvinar proin. This is a link lorem et, dapibus, ultricies. Sit mauris cras, ultricies enim ac elementum amet, vel, elementum sagittis.

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 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. Nunc nunc lundium aliquet elementum ac pulvinar proin. This is a link lorem et, dapibus, ultricies. Sit mauris cras, ultricies enim ac elementum amet, vel, elementum sagittis.
                                    
                                        <!-- 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 with Ionicons icon. Nunc nunc lundium aliquet elementum ac pulvinar proin. This is a link lorem et, dapibus, ultricies. Sit mauris cras, ultricies enim ac elementum amet, vel, elementum sagittis.
                                    
                                        <!-- 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

Status message with FontAwesome icon. Nunc nunc lundium aliquet elementum ac pulvinar proin. This is a link lorem et, dapibus, ultricies. Sit mauris cras, ultricies enim ac elementum amet, vel, elementum sagittis.
Nunc nunc lundium aliquet elementum ac pulvinar proin. Lorem et, dapibus, ultricies. Sit mauris cras, ultricies enim ac elementum amet, vel, elementum sagittis.
                                    
                                        <!-- 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

Go to reminder

Build modals with css-map is very easy.
You just have to respect a specific syntax to display modals properly!

Include the minimalist css-map.js file for modals openings and closures.

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.

View code

Modals width

css-map provide 3 sizes of modals :
  • 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
On small screens (<768px), all modals are set to 90% width, regarless sizes classes.

View code

Disabled modals overlay

data-disabled-overlay : Disabled the modal closing by clicking on 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!

The modal structure change a little bit.
Need a wrapper around the <div class="modal-body"></div> element

View code

Nested modals

View code

Fullscreen modals (added in v3.0.5)

data-fullscreen : show a modal in "fullscreen" mode.

The exemple below combines fullscreen mode with fixed header and footer !
Just combine data-fullscreen and data-fixed-hf attributes and keep the data-fixed-hf HTML structure.

View code

Tabs

Go to reminder

You can use tabs to display horizontal lists, menus, etc...

Just add the active class class="active" on the item element to highlight it.

Basic tabs

class="tabs" : Create a default tab list
                                    
                                        <!-- 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

class="cc-underlined" : Underlined a tab list
                                    
                                        <!-- Underlined tabs -->
                                        <ul class="tabs cc-underlined">
                                            ...same HTML structure...
                                        </ul>
                                    
                                

Bordered tabs

class="cc-bordered" : Add borders around tabs items
                                    
                                        <!-- Bordered tabs -->
                                        <ul class="tabs cc-bordered">
                                            ...same HTML structure...
                                        </ul>
                                    
                                

Tabs thickness

class="cc-thin" : Display a thin tab list

View code

class="cc-fat" : Display a fat tab list

View code

Tabs main color

class="cc-{color}" : Change tabs main color.
By default, tabs are colorized with the @primary color.

Use a color defined in css-map framework
                                    
                                        <!-- 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" : Align items to the left (all devices)
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

class="cc-pills" : Display tabs items as pills.
By default, pills items are chained.

View code

Unchained Pills tabs

class="cc-pills cc-unchained" : Display tabs items as unchained pills.

View code

Elements in css-map

Blockquotes

Go to reminder

<blockquote> tag specifies a section that is quoted from another source.
By default, blockquotes are colorized with the @primary color.

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.
Gitman, git superhero
                                    
                                        <!-- 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.
Gitman, git superhero
                                    
                                        <!-- 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.
Gitman, git superhero
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.
Gitman, git superhero
                                    
                                        <!-- 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.
Gitman, git superhero
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.
Gitman, git superhero
                                    
                                        <!-- 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

Go to reminder

Basic buttons & "btn-like" links

class="btn" : Display a HTML link as a button
                                    
                                        <!-- Basic buttons & btn-like link -->
                                        <a href="#" class="btn">"Btn-like" HTML link</a>
                                        <button>Button</button>
                                    
                                

Buttons thickness

class="cc-thin" : Display a thin button
                                    
                                        <!-- Thin button & HTML link -->
                                        <a href="#" class="btn cc-thin">Thin HTML link</a>
                                        <button class="cc-thin">Thin button</button>
                                    
                                
class="cc-fat" : Display a fat button
                                    
                                        <!-- Fat button & HTML link -->
                                        <a href="#" class="btn cc-fat">Fat HTML link</a>
                                        <button class="cc-fat">Fat button</button>
                                    
                                

Colorized buttons

class="cc-bg-{color}" : Display a colorized button

{color} : A color defined in css-map framework
                                    
                                        <!-- 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

class="cc-outlined cc-bg-{color}" : Display an outlined button (must be combined with a bg-color)

{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

class="cc-disabled" : Disabled button / link action
                                    
                                        <!-- 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

Go to reminder

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

In css-map, forms are composed of a succession of divisions with class="form-item"

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

class="form-item cc-inline" : wrap an inline couple of <label> + <input />
                                    
                                        <!-- 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

class="form-item cc-chained" : wrap an chain of <input />
                                    
                                        <!-- 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" : Display a chained serie of label + radio input (on the same line)
class="form-radio block" : Display a label + radio input (one par line)
class="form-radio disabled" : Display a disabled block label + radio input

View code

View code

Checkbox inputs

class="form-checkbox" : Display a chained serie of label + checkbox input (on the same line)
class="form-checkbox block" : Display a block label + checkbox input (one par line)
class="form-checkbox disabled" : Display a disabled block label + checkbox input

View code

View code

Prefix & Suffix

class="form-ps" : wrap an chain of prefix / input / suffix

Prefix & suffix must be placed into <span> elements.
$ .00
$
.00

View code

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.

$ .00
$ .00

View code

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

$ .00
                                    
                                        <!-- Main color -->
                                        <form class="cc-green">
                                            ...form components...
                                        </form>
                                    
                                

Images

Go to reminder

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

She is my cat and her name is Virus

Classic image (responsive)

She is my cat and her name is Virus

                                    
                                        <!-- 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

She is my cat and her name is Virus

Classic image

She is my cat and her name is Virus

                                    
                                        <!-- Bordered image -->
                                        <img src="..." alt="..." class="cc-bordered"/>
                                    
                                

Shadowed images

class="cc-shadowed" : Apply a shadow to an image

Image below is shadowed

She is my cat and her name is Virus

Classic image

She is my cat and her name is Virus

                                    
                                        <!-- Shadowed image -->
                                        <img src="..." alt="..." class="cc-shadowed"/>
                                    
                                

Lists

Go to reminder

Basic lists

Exemple of an unordered list
  • 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>
                                    
                                
Exemple of an ordered list
  1. 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.
  2. Bacon ipsum dolor amet venison chuck cow picanha tenderloin beef ribs tongue flank short ribs.
  3. 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

class="cc-unstyled" : Unstyled the list (remove dots before each line)
  • 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

class="cc-horizontal" : Display each item on the same line
On small screens (< 768px), all items are dispayed as block
  • 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

Go to reminder

css-map provides 3 loaders :

Each loader has its own HTML structure

Dots loader

By default, number of dots is set to 12. You can change the number of dots, loader speed, and loader color by editing the settings.less files and compile source files by yourself.

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)

View code

Spinner loader

You can change the spinners thickness, spinners color and loader rotation speed by editing the settings.less files and compile source files by yourself.

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

You can change the loader color and animation speed by editing the settings.less files and compile source files by yourself.
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

Go to reminder

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

View code

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

class="cc-bordered" : Add table borders
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

class="cc-unbordered" : Remove table borders
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

class="cc-equal-cols" : Display all columns with the same width
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

By default, cells show content vertically centered.

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

By default, cells show content vertically centered.

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

View code

Helpers in css-map

Texts helpers

Go to reminder

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

By default, all texts are left aligned.

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

Go to reminder

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

In the exemples below, each element have a padding of 1em and a primary background-color for a better learning and comprehension.

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

In the exemples below, each element have a padding of 1em and a primary background-color for a better learning and comprehension.
10%
33.333%
40%
66.666%
85%
                                    
                                        <!-- 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")

In the exemples below, each element have a background-color for a better learning and comprehension.

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

View code

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")

In the exemples below, each element have a padding of 1 em and a primary background-color for a better learning and comprehension.

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

View code

Blocks background colors

class="cc-bg-{color}" : Apply a background-color to this element.

{color} : A color defined in css-map framework

When you use these classes, the text color is set to white by default.
In the exemples below, each element have a padding of 1 em for a better learning and comprehension.

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

You can easily show or hide a block, regarding the screen width.
Block visibilities depends of the breakpoints used in css-map.
In the exemples below, hidden blocks will be shown with an opacity of 0.3 for a better learning and comprehension.
Hide blocks on all devices
class="cc-hidden" : Hide block on all devices
I'm hidden 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
class="cc-hidden-{letter}" : Hide block on {letter} device and upper

{letter} : can be set to "s", "m", "l", "xl"
Set {letter} to 'xs' as no sense. It means : "Hide this block on XS screens and upper".
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)

View code

Hide blocks on targeted device only
class="cc-hidden-{letter}-only" : Hide block on {letter} 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
class="cc-hidden-{letter}-down" : Hide block on {letter} device and lower

{letter} : can be set to "xs", "s", "m", "l"
Set {letter} to 'xl' as no sense. It means : "Hide this block on XL screens and lower".
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)

View code

Show blocks on targeted device only
class="cc-shown-{letter}-only" : Show this block on {letter} 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)

View code

Icons in css-map

Go to reminder

Icons alignments

class="icon-left" : the left icon has a margin-right of 8 px
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>