awesome-bemcss

awesome-bemcss

Simple CSS Framework with BEM CSS convention implementation

Preview

http://i1176.photobucket.com/albums/x322/mazipanneh/awesome-bemcss_zpsrlpgn4yj.png

Download

- Download via github release - With npm : npm install awesome-bemcss

Demo And Cheatsheet

https://mazipan.github.io/awesome-bemcss/demo/

Usage

Using CSS Native :

<!-- awesome-bemcss css depedency -->
<link  rel="stylesheet" href="{URL_PATH}/css/awesome-bemcss.min.css" rel="stylesheet"/>

<!-- jquery library - {optional - if you want use the script} -->
<script type="text/javascript" src="{URL_PATH}/js/jquery.min.js"></script>

<!-- awesome-bemcss js depedency {optional - if you want use the script} -->
<script type="text/javascript" src="{URL_PATH}/js/awesome-bemcss.min.js"></script>

Using SASS Import :

<!-- import from your sass file -->
@import "./awesome-bemcss/src/scss/_awesome-bemcss";

Supported Component (in alphabetical order)

- alert - button (basic, outline, radius, dropdown) - card - checkbox (black and blue theme) - form - grid system (traditional grid and flex) - modal (white and blue theme) - pagination (basic and radius) - popover (dark theme) - radio (black and blue theme) - select - table (support sort arrow view) - tabs (horizontal and vertical) - textfield (basic for input text and textarea)

Using Technology

- SCSS from SASS - HTML - NodeJS, Grunt, etc.

License

MIT License

Folder Structure

- All code in src folder is SCSS code - All code in dist folder is production phase, if you prefer use final CSS - In src folder there is _awesome-bemcss.scss and awesome-bemcss.scss - _awesome-bemcss.scss using silent extends using char % without produce class - awesome-bemcss.scss will produce class - If you fluent with pre-processor SASS, I suggest using _awesome-bemcss.scss - In demo folder is demo file for sample using this framework, include cheatsheet
Hope will usefull for you all.

Question ? please email : [e-mail]