Introduction

BEMSkel, or short for BEM Skeleton, is a lightweight CSS framework using BEM and SASS. It's designed to provide a solid foundation for building a component-based web applications and user interfaces. It is written using the BEM (Block, Element, Modifier) naming convention to provide a consistent and strict naming convention which allows you to divide your user interface into independent blocks and allow reuse of existing code.

BEMSkel was initially based on Skeleton boilerplate but was rewritten using BEM and added with useful features for building component-based user interfaces. It provides styles for the most commonly used elements such as text, buttons, tables, and forms. It also includes two ways of creating grid systems -- grid and flexbox. As a simple rule, use grid if you need to support older browsers or flexbox if you only want to support modern browsers.

If you like BEMSkel, feel free to share it, tweet it, or start using it. <3

Grid

The grid is a 12-column fluid grid with a maximum width of 1000px, that shrinks with the browser device at smaller sizes. The maximum width can be changed with one line of CSS in the _variables.scss file and all columns will resize accordingly. The syntax is simple and it makes coding responsive much easier. Use the grid layout if you need support for older browsers such as IE9 and below

col--2

col--10

col--3

col--9

col--4

col--8

col--5

col--7

col--6

col--6

col--7

col--5

col--8

col--4

col--9

col--3

col--10

col--2

col--11

col--1

col--2

col--10

col--3

col--9

1/3

2/3

1/2

1/2

Flexbox Grid

Use flexbox grid if you only want to support modern browsers. In this kind of layout, the width of the columns are implicit, so columns will adjust automatically to be equal width to their adjacent columns.

Auto

Auto

Auto

Auto

flex-grow: 2

flex-grow: 4

fixed-width: 200px

flex-grow: 4

flex-grow: large

flex-grow: default

Auto

Auto

Auto

Auto

flex-grow: 2

flex-grow: 4

fixed-width: 200px

flex-grow: 4

flex-grow: large

flex-grow: default

Typography

Type is all set with the rems, so font-sizes and spacial relationships can be responsively sized based on a single <html> font-size property. Out of the box, BEMSkel never changes the <html> font-size, but it's there in case you need it for your project. All measurements are still base 10 though so, an <h1> with 5.0remfont-size just means 50px.

The typography base is Roboto served by Google, set at 1.6rem (16px) over a 2.4rem line height (24px). Other type basics like anchors, strong, emphasis, and underline are all obviously included.

Headings create a family of distinct sizes each with specific letter-spacing, line-height, and margins.

Heading<h1> 50rem

Heading<h2> 42rem

Heading<h3> 36rem

Heading<h4> 30rem

Heading<h5> 24rem

Heading<h6> 15rem

Heading

Heading

Heading

Heading

Heading

Heading

Buttons

Different button styles are included in BEMSKEL -- classic, outline, raised, and large. Classic button styles are patterned after Bootstrap, which has 5 different color styles -- primary, secondary, info, warning, and danger. Button styles are also applied to a number of appropriate form elements but can also be applied to anchors with a .btn class.

Pagination

Media queries

BEMSkel uses media queries to serve its scalable grid, but also has a list of queries for convenience of styling across devices. The queries are mobile-first, meaning they target min-width. Mobile-first queries are how BEMSkel's grid is built and is the preferable method of organizing CSS. It means all styles outside of a media query apply to all devices, then larger devices are targeted for enhancement. This prevents small devices from having to parse tons of unused CSS. The sizes for the queries are: