Getting started with css-map | Responsive CSS framework

Download css-map

NPM Package

GitHub repository

Download from GitHub

Since v3.1.0, css-map includes Font-Awesome 5! Don't forget to update your class with new "far", "fal", "fas" and "fab" !

Since v3.0.8, Normalize.css, Font-Awesome and Ionicons are included in css-map! You have nothing to do!

- - -

For css-map < v3.0.8, please read the following :
If you want to use icons with css-map, please include FontAwesome and/or Ionicons files.

If you install css-map via NPM, FontAwesome and Ionicons are downloaded as dependencies.
Files will be in "node_modules" folder.

                                
                                    <!-- css-map < 3.0.8 ONLY! -->
                                    <!-- Include FontAwesome & Ionicons CSS files -->
                                    <link rel="stylesheet" href="PATH/font-awesome.min.css" type="text/css" media="screen" />
                                    <link rel="stylesheet" href="PATH/ionicons.min.css" type="text/css" media="screen" />

Working with dist files

When css-map is download, the dist files to include are into the "/dist" folder (css and js files).

With NPM : node_modules/css-map/dist

                                
                                    <!-- Include the css-map CSS file -->
                                    <link rel="stylesheet" href="PATH/dist/css-map.min.css" type="text/css" media="screen" />

                                    <!-- ** OPTIONNAL ** -->
                                    <!-- Print file -->
                                    <link rel="stylesheet" href="PATH/dist/print.css" type="text/css" media="print" />

                                    <!-- ** OPTIONNAL ** -->
                                    <!-- Just before the </body> close tag, include the css-map JS file -->
                                    <!-- The javascript file is optionnal. It manages modals (openings and closures) and alerts (closures) -->
                                    <!-- You can easily create your own javascript file to manage by yourself modals and alerts -->
                                    <script type="text/javascript" src="PATH/dist/css-map.js"></script>

Working with source files

Working with source files give you the possibility to customize css-map with your own settings, colors, etc... but you have to be familiar with Less language.

By compiling your own dist file with Grunt or Gulp, combined with Autoprefixer, you can use powerfull mixins to build websites easily and faster.

Gulp documentation
Grunt documentation
Autoprefixer documentation : css-map uses Autoprefixer to deal with CSS vendor prefixes. If you use the Gulpfile.js downloaded with css-map, Autoprefixer is already include. If you use your own Gruntfile or Gulpfile, integrate Autoprefixer by yourself.

                                
                                    <!-- css-map tree files -->
                                    css-map/
                                    |
                                    ├── front.less <!-- all @imports, base file of css-map -->
                                    ├── print.less <!-- print.css source file -->
                                    ├── settings.less <!-- all variables definitions -->
                                    |
                                    ├── components/
                                    ├──── alerts.less
                                    ├──── badges.less
                                    ├──── grids.less
                                    ├──── messages.less
                                    ├──── modals.less
                                    ├──── tabs.less
                                    |
                                    ├── core/
                                    ├──── animations.less <!-- radio, checkbox, loaders animations -->
                                    ├──── base.less <!-- <html> and <body> general definitions -->
                                    ├──── functions.less <!-- powerful mixins file -->
                                    ├──── fontawesome.less <!-- icons file -->
                                    ├──── generator.less <!-- grids items width, texts helpers... -->
                                    ├──── helpers.less
                                    ├──── responsive.less <!-- responsive mixins -->
                                    |
                                    ├── elements/
                                    ├──── blockquotes.less
                                    ├──── buttons.less
                                    ├──── forms.less
                                    ├──── images.less
                                    ├──── loaders.less
                                    ├──── tables.less
                                    └──── titles.less