karloespiritu / bemskel

A lightweight CSS framework written in BEM and SASS for building scalable component-based user interfaces

BEMSkel

BEMSkel is a a lightweight CSS framework written in BEM and SASS for building scalable component-based user interfaces. It includes commonly used UI components that I use on every web and React projects.

BEMSkel can be used as standalone CSS library or a starting point project. It's lightweight, minimal, and well-documented, leaving the creativity up to you.

• Minified production versions: dist/
• Unminified sources: src/

Features

• Written in BEM (Block, Modifier, Modifier) naming convention for classes to provide a consistent and strict to easily extend the framework.
• Uses 7-1 Architecture pattern for maintainable and scalable SASS.
• Includes two methods of creating grids - CSS Grid and Flexbox
• Gulp Build System
• Designed to be scalable and easy to customize. Use it as a standalone library or use it a starting point to build your next application.

Quick Start

$ git clone [email protected]:karloespiritu/bemskel.git

Customize

$ npm install
// customize the SASS files in /src
$ gulp watch

Browser support

• Chrome latest
• Firefox latest
• Opera latest
• Safari latest
• IE latest

BEMSkel works perfectly with almost all older versions of the browsers above, though IE certainly has large degradation prior to IE9.

Credits

• Normalize.css (http://necolas.github.io/normalize.css | Nicolas Gallagher, Jonathan Neal | MIT License)
• SASS Boilerplate (https://github.com/HugoGiraudel/sass-boilerplate) | Hugo Giraudel | MIT License)
• Skeleton (http://getskeleton.com) | Dave Gamache | MIT License)

bemskel's Issues

make it extensible and publish to npm

Hi,

I think you framework is very cool.
Curriously, very few bem framework appear on google.
https://www.google.fr/search?hl=fr&q=bem+framework

I would like to use it, but i wish, it will be in npm and I could extend directly scss file from my own code.

What do you think about it ?

Regards,

Guillaume.

Grid doesn't align properly

(I'm guess from two years without updates this project is probably dead, but figured I'd report this just the same.)

The grid doesn't properly align the columns:

Here, we have a row with default widths: 2 + 2 + 2 = 6.

And a second row with widths: 2 + 4 = 6.

So the first column is 2 units in either case, and you'd expect them to align, I think?