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]