Development Tools - Web Standards: Mastering HTML5, CSS3, and XML - page 392

Skeleton
Skeleton is a boilerplate for responsive, mobile-friendly development [37]. The default grid of Skeleton is a variation of
the 960 pixels wide grid system. Skeleton's typography feature supports strong hierarchy with basic styles. The default
font is Helvetica Neue, which can be easily changed. Regular paragraphs have a font size of 14px and 21px line height by
default. Skeleton also supports buttons, forms, and other responsive web site components through CSS3 Media Queries.
Less Framework
The Less Framework is an adaptive CSS grid system, containing four layouts and three sets of typography presets, all
based on a single grid composed of 68 px columns with 24 px gutters [38]. The four layouts are the default, 992px wide
10 column layout, the Tablet layout with 8 columns at 768 pixels, the mobile layout with 3 columns at 320 pixels, and
the wide mobile layout with 5 columns at 480 pixels. Only the number of columns and the width of the outer margins
change in different layouts. The typography of the Less Framework is based on harmonious type sizes calculated using
the Golden Ratio. The Less Framework provides backward-compatibility through graceful degradation to the default
992px layout.
Gumby
Gumby Framework is a responsive CSS framework, including multiple grid types with different column variations
such as a 12-grid and a 16-grid layout system [39]. Gumby supports nested gridding, and supports hybrid grids, tiles,
fancy tiles, and semantic tiles. Gumby Framework is built on a Sass preprocessor, and uses modular scale and a
Golden Ratio tool for typography. Gumby is easy to customize, and all the main components, their colors, sizes, and
fonts can be quickly changed.
Browsers as Development Tools
Although the primary aim of web browsers is to process and render web documents, they can also be used in
development and standardization. Accessibility can be effectively evaluated by turning off style sheets and nontext
content or by applying a text-based browser.
There are various built-in development tools in browsers such as the Developers Tools in Internet Explorer (F12) [40]
which, among others, have a DOM Explorer, a Console, a Debugger, and Emulation. Emulation can be useful to
test older web sites that targeted a particular version of Internet Explorer, or simply to test any web site for
backward-compatibility. To do so, you can change the document mode, the browser profile, and the user agent
string (Figure 11-8 ).