2.5.Layout
Using a layout grid helps you to design a responsive and modular web application. The design of daimler.com is based on the Bootstrap grid system, one of the most popular HTML frameworks in the world.
This framework gives designers and developers useful tools to define component behaviour among different screen sizes.
First, Bootstrap defines a set of fixed layout breakpoints ranging from small smartphone screens up to large desktop displays. A component's layout is defined for each of those breakpoints.
Secondly, Bootstrap offers layout classes which help developers define an element's width across different breakpoints.
2.5.1.Breakpoints
Daimler's grid systems uses four fixed screen-widths as layout breakpoints: extra small, small, medium and large. See the following table how those breakpoints are defined:
When designing a digital application for Daimler, it is recommended that you provide a layout for each of those breakpoints to cover any eventualities that might come up during development.
2.5.2.Grid
Bootstrap uses a 12-column grid. The number of columns do not change across breakpoints - a mobile screen and a extra large desktop both use a 12 column layout. With increasing screen size the width of the columns will also increase, filling the available space. Gutter width is 30 pixel across all width.
The grid does not grow indefinitely – maximum width is set at 1200 pixels.
2.5.3.Artboard templates
There are artboard-templates available for Sketch. For each layout-breakpoint you will find an artboard already with predefined grid guides. Those templates are the perfect starting point for your design.
Sketch Design Kit
