Bootstrap

brix.io app edited this page Jun 3, 2015 · 9 revisions
Bootstrap considerations

Main goal of brix.io editor is to let users create html5 webpages without necessity of html hand coding. Most tasks can be accomplished by drag&drop of ready to use Bootstrap components (web bricks). We picked up Twitter Bootstrap as a base, but you are not limited to Bootstrap. You can create your own library of reusable components web bricks, sections.

Twitter Bootstrap is the most popular HTML, CSS, and JavaScript front-end framework for developing responsive, mobile-first web sites. All you need to use Bootstrap is to download from http://getbootstrap.com or include from a CDN along with jQuery.

To create Bootstrap based websites you need to follow some basic rules:

  • include the HTML5 doctype, lang attribute, correct character set and viewport
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
    </head>
</html>

viewport sets the width of the page (depends on the device) and initial zoom

  • to wrap site contents add containing element - there are two container classes:
    • .container provides a responsive fixed width container
    • .container-fluid provides a full width container (spans the entire width of the viewport)
  • do not put a container inside another container

Brix.io takes care about this settings for you!


Bootstrap fluid grid system

Bootstrap grid system it is the way to create responsive layout that appropriately scales up to 12 columns as the device or viewport size increases. It consists of container, rows and columns.

container
  • Provides the width constraints on responsive widths. Container changes when the responsive sizes change (rows and columns as percentage based do not change)
  • Takes care of padding for the content that it doesn’t touch the edge of the browser
  • There is no need to place container inside of another container (containers are not nestable)
row
  • Always use a row inside a container
  • Row provides a place for horizontal groups of columns
  • Acts as a wrapper while all the columns float left
  • Only columns can be immediate children of rows
column
  • Always use a column inside a row
  • Column padding gives your content the space it needs

It is possible to nest grids - you can make new grids inside of a column, just add rows right inside outer columns (a column acts like a container).

You can add an offset to the column. It is a left margin applied to a column to move it to the right.

Set push and pull modifier classes to add positioning to the columns.

See also:


See also: