Bootsmooth

UI Style Guide Template Maker
For Web Designers and Developers

VERSION 2.1.0

Download

Quickly Build Style Guides and Landing Pages

Bootsmooth is a lightweight CSS UI Framework for rapidly building and prototyping style guides and web pages.

Designed to be highly configurable and lightweight, its purpose is to lessen the steps needed to get a live version of a design mockup for development and testing.

How is it different than other CSS frameworks?

Bootsmooth was designed with one goal in mind:
All common web page elements can be styled through variables and mixins.

By applying OOP-like programming concepts like inheritance, complete style guides can be generated by setting variables. Custom classes can be extended from a set of pre-defined parents classes for easy integration with other CSS libraries in a project.

The framework is meant to be minimal and includes:

Responsive Grids

Need a 16 column grid with a max width of 1600px?
How about 12 columns grid at 960px?

Easily build fluid layouts with custom container sizes, columns, and gutters.

Col.

Col.
Col.
Col.

Col.
Col.

Colors

Pre-defined variables and classes for color palettes and fonts make it easy to generate different combinations for style guides.

Background Classes

Primary

Secondary 1

Secondary 2

Complement

Inverse

Foreground Classes

Primary .bs-fg-primary

Secondary 1 .bs-fg-secondary-1

Secondary 2 .bs-fg-secondary-2

Complement .bs-fg-complement

Inverse .bs-fg-inverse

Typography

Set base font styles for body and heading text.

Heading

Heading

Heading

Heading

Heading

 

Buttons

 

Tables

Column 1 Column 2 Column 3 Column 4 Column 5
1 2 3
1 2 3
1 2 3
1 2 3

Forms

Forms can be formatted using rows and columns or by making them inline.