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>
Grid with adaptative columns
This exemple shows only medium and x-large breakpoints
<!-- Grid container -->
<div class="columns">
<!-- Screen >= Medium : 4 cols -->
<div class="cc-4-m">...</div>
<!-- Screen >= Medium : 3 cols | Screen >= 1200px : 5 cols -->
<div class="cc-3-m cc-5-xl">...</div>
<!-- Screen >= Medium : 5 cols | Screen >= 1200px : 3 cols -->
<div class="cc-5-m cc-3-xl">...</div>
</div>
Default : 12 / 12
Medium and upper : 3 / 12
Default : 12 / 12
Medium and upper : 5 / 12
Default : 12 / 12
Modals with css-map
<!-- Classic modal -->
<button data-target="modal-id" class="cc-bg-primary modal-open">Launch classic modal</button>
<!-- Modal minimal structure -->
<div id="modal-id" class="modal">
<!-- Close button -->
<button data-close-modal></button>
<!-- Overlay -->
<div class="modal-overlay"></div>
<!-- Modal content -->
<div class="modal-content">
<div class="modal-header">
...
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
...
</div>
</div>
</div>
<!-- ALL EXEMPLES IN THE DOCUMENTATION SECTION -->
Buttons / Links with css-map
<!-- Few exemples of buttons -->
<button>Classical button</button>
<button class="cc-bg-primary">Primary button</button>
<button class="cc-bg-primary cc-outlined">Outlined button</button>
<button class="cc-bg-primary"><i class="fas fa-times icon-left"></i>Iconed button</button>
<button class="cc-bg-primary cc-disabled">Disabled button</button>
<button class="cc-bg-primary cc-loading">Loading</button>
<!-- Few exemples of buttons-like links -->
<a href="#" class="btn">Classical Btn link</a>
<a href="#" class="btn cc-bg-primary">Primary link</a>
<a href="#" class="btn cc-bg-primary cc-outlined">Outlined link</a>
<a href="#" class="btn cc-bg-primary"><i class="fas fa-times icon-left"></i>Iconed link</a>
<a href="#" class="btn cc-bg-primary cc-disabled">Disabled link</a>
<a href="#" class="btn cc-bg-primary cc-loading">Loading</a>
Alerts box with css-map
Nevertheless, you can build alert box without the "close" button. In that case, you don't need to load the css-map.js file.
<!-- Success -->
<div class="alert alert-success">
<i class="fas fa-thumbs-up icon-left"></i>
<button class="close"><i class="ion-ios-close-outline"></i></button>
It's a success! Good job :)
</div>
<!-- Error -->
<div class="alert alert-error">
<i class="fas fa-thumbs-down icon-left"></i>
<button class="close"><i class="ion-ios-close-outline"></i></button>
It's an error!<br />
Please check the list below :
<ul>
<li><strong>Error 1 :</strong> Nunc...</li>
<li><strong>Error 2 :</strong> Nunc...</li>
<li><strong>Error 3 :</strong> Nunc...</li>
</ul>
</div>
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.