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

css-map A mobile-first, responsive CSS framework, compiled with LESS and Autoprefixer, based on FlexBox grids

NPM package

$ npm install css-map

GitHub

Fork Star

Why css-map and what is it?

I'm Mickaël, a french front-end developer since 10 years. I currently work with a fantastic team in a french & fresh web agency : ALPIXEL

css-map is born from the desire to make my own CSS framework, to ensure the projects maintainabilities i'm working on, and to increase my work speed. css-map is the result of my experience in front-end developments since many years. css-map is a responsive and mobile-first CSS framework compiled with LESS and Autoprefixer, based on FlexBox grids.

Even if i would like css-map perfect, please open an issue on Github if you find a problem.

Plenty of features Alerts, modals, buttons, typography...

Mobile-first 4 breakpoints for adaptative websites.

Flexbox grids Build grids easily!

Few exemples of what css-map can do for you

Grids with css-map

                        
                            <!-- Grid container -->
                            <div class="columns">
                                <div>Hello World!</div>
                                <div>Hello World!</div>
                                <div>Hello World!</div>
                            </div>
                        
                    

Add a column Remove a column

Hello World!
Hello World!
Hello World!
1
1
1
1
1
1
1
1
1
1
1
1

Grid with adaptative columns

css-map has 4 breakpoints.
This exemple shows only medium and x-large breakpoints

View code

Medium and upper : 4 / 12
Default : 12 / 12
X-Large : 5 / 12
Medium and upper : 3 / 12
Default : 12 / 12
X-Large : 3 / 12
Medium and upper : 5 / 12
Default : 12 / 12
1
1
1
1
1
1
1
1
1
1
1
1

Modals with css-map

Using modals required the css-map.js file (only for opening and closure).

View code

Buttons / Links with css-map

View code

Alerts box with css-map

On alert boxes, the "close" button require the css-map.js file.
Nevertheless, you can build alert box without the "close" button. In that case, you don't need to load the css-map.js file.

View code

It's a success! Good job :)
It's an error!
Please check the list below :
  • Error 1 : Nunc nunc lundium aliquet elementum ac pulvinar proin.
  • Error 2 : Nunc nunc lundium aliquet elementum ac pulvinar proin.
  • Error 3 : Nunc nunc lundium aliquet elementum ac pulvinar proin.