At the core of our layouts is the bootstrap grid.
Designers: Download the grid layout Sketch file.
Layout Documentation
Bootstrap Grid Layout
Content Width
Responsive web design is a collection of practices to ensure the flexibility and fluidity of web content. With that in mind, it’s essential that web content remains fluid within its container.
CSS breakpoints are points where website content responds according to the device width. This allows us to create varying column widths within our grid. On a large screen, a content block may cover a quarter of the screen, while on a small screen it may cover half the screen.
During the design phase, it’s important to not add a width value to content to achieve a specific aesthetic layout (such as a section header with associated intro text). Capping the width of content to a specific width value that is less than the containing width of its intended wrapper can result in unwanted or irregular whitespace.
Padding and Margins
When designing layouts, it is important to be conscious of each of these. Using consistent padding, margins and spacing values creates a sense of cohesiveness between the elements.
Padding
An element’s padding area is the space between its content and its border. Padding creates extra space within an element.
Margin
An element’s margin area is the space beyond its padding and border. Margins create extra space around an element.