This is an example page showing what this framework does and how you do it. We do encourage you to view the source code to see how simple it is to get things done using the bx Framework.

All of this demo page is using nothing but plain, unmodified bx along with semantic HTML. Even though bx supports its own inclusion of Open Sans, it is here served by Google Fonts.

BX main page View source

Grid

At the heart of responsive web development in general, a grid represents the base of page structure. It organizes the content into columns which in smaller devices breaks apart to instead fill the device's width. Feel free to resize your browser if possible.

This is a div with the classes half column applied. It is placed in a div with the row class.

This is a half column inside another half column div

This is anoter half column inside that same other half column div

Look at all these rows and columns for as long as you want. The text in the columns denotes its class.

one

nine

two

eight

three

seven

four

six

five

six

four

seven

three

eight

two

nine

one

Forms

Making forms can many times be inconsistent and tedious. This is however something we want to change, which is why we normalize form element sizes to be consistent and apply our layout framework upon forms to make them truly magical and sparkling.

Your name Vegetables Carrot Broccolli Spenach Cabbage Happy? Yes No

Details

Generic

Headers come in different sizes, text can be colored in different ways and buttons include several semantic variants. If you want a link to display as a button, simply apply the class button to it.

Headers

Header 1

Header 2

Header 3

Header 4

Header 5

Header 6

Colors

This is written using normal text. Nothing added. No classes or stuff.

This text is written using the brand color. It is set in a single SCSS variable and defines colors in lots of places.

Buttons

Tables

Structuring data in tables can be useful. We have improved the ordinary HTML tables to display their data in a more clear way. For extra clarity, apply the zebra class to the table and it will be as amazing as the second example below.

Article number	Descriptive name	Count
219-3912	Cucumber, pickled	192
214-9184	Medjool Dates	753
591-4910	Lemon	753
489-2581	Cat pants	2
938-1953	Tofu	35

Player	Score
Eric	109 812
Olaf	93 812
Rudolph	83 125
Mattias	12 983
CoolKid98	9 817
Nicholaus	2 286

Notices

To be or not to be notified? Notifications come in many forms and shapes and their job is to at a glance show that something has happened. Often they show how many occurrences there are, the severity of the errand or something else.

Notice boxes

Growing mustaches takes time.

The system is unstable!

You need to update stuff.

Your system is up to date!

Notice bubbles

Bubbles can be standalone or placed on things. If you place a bubble on a button or a link with the button class it will float up in the right corner.

19 new comments

Images

The framework is ready for handling images on the responsive web. It is prepared for SVG icons and images, with classes to color them according to your brand colors. Also, it helps your images to fit nicely within the layout.

This is a small image with the stretch class applied. It will fill its column.

Images will by default never be wider than the container.

This is an SVG image using the secondary class on its path to style it with the brand color and primary on the black border.