Assembly is an open source CSS framework that makes the hard parts of designing for the web easy.
Include in the head of your HTML the Assembly stylesheet.
<link href="https://api.mapbox.com/mapbox-assembly/v0.23.1/assembly.min.css" rel="stylesheet">
<script async defer src="https://api.mapbox.com/mapbox-assembly/v0.23.1/assembly.js"></script>
Get started right away with this bare bones HTML template.
<html lang='en'> <head> <title><!-- Your title goes here --></title> <meta charset='utf-8'> <meta name='viewport' content='width=device-width, initial-scale=1'> <link rel='shortcut icon' href='Your favicon path goes here' type='image/x-icon'> <link href='https://api.mapbox.com/mapbox-assembly/v0.23.1/assembly.min.css' rel='stylesheet'> <script async defer src='https://api.mapbox.com/mapbox-assembly/v0.23.1/assembly.js'></script> </head> <body> <!-- Your page... --> </body> </html>
Unsure what else you need in the
<head>? Check out MDN's detailed guide.
Assembly includes everything you need to fully implement responsive, colorful web pages, web apps, dashboards, and more.
The core of Assembly is a set of composable, atomic utility classes covering most of your styling needs.
Complete reliance on atomic design can slow down development and foster inconsistency and bad UX. Assembly inserts the right opinions in the right places.
Assembly exposes its build process in a public API. Customize colors, fonts, and media queries; append your own stylesheets; and specify color variants to reduce file size.
Every element in Assembly is designed according to a 6 pixel baseline grid, even buttons and form components. Baseline grids don't just make your site look and feel better: they also make development more convenient. All the pieces naturally fit together without fiddling with line height or vertical alignment.
You should use
<h3> for third-level headings, not because you want a certain style. Similarly, you should use
<button> when a button is behaviorally and semantically appropriate, instead of
<a> tags or other elements with click handlers.
Assembly's reset allows you to use semantically appropriate HTML without battling browser-default styles. And its CSS rules are built to behave the same regardless of which element they're applied to. A heading style, or a button style, can be applied to any element by applying the appropriate classes.
border-box box model allows for more intuitive styling than the default
content-box model. For example, when you set a
w360 class, your element will always be 360 pixels wide, regardless of its padding and borders.
Assembly comes with more than 150 icons, intended to be used as inline SVGs. Inline SVGs are easy to resize and color.
Mobile-first media queries lead to cleaner code because there are fewer overrides. Start with a simple mobile layout, then add complexity with additional media-constrained rules. Assembly uses the following media queries:
screen and (min-width: 1200px)
screen and (min-width: 800px)
screen and (min-width: 640px)
Classes that take affect within certain media queries always end with a
-m<size> suffix, where "size" is
A double-hyphen in a class name (e.g.
border--blue) indicates that the class is a modifier class. A modifier class extends the class whose name precedes the double-hyphen (e.g.
flex-child). And modifier classes should only ever be used in combination with the class they modify: modifier classes will not work well on their own.
!important on declarations whose effect directly corresponds to a class name.
For example, in the
.bg-blue rule, the
background-color declaration is
!important. On the
.pl20 rule, the
padding-left declaration is
!important. This ensures that such classes always behave the same. Whenever you see the class
bg-blue on an element, that element should have a blue background, regardless of its context and the other rules that apply to it.
For dynamic styles, responsive classes (described above) provide some additional flexibility. But if you need even more, you should use custom CSS instead of a utility class.
is-activeapplies active states
Assembly uses the
is-active state class to designate that an element is active and style it accordingly.
is-active state on buttons and links darkens their color. And the
*-on-active state classes (e.g. only
color-red-on-active) only take effect when combined with the
Assembly turns off focus outlines when you mousedown and turns them back on, universally, when you hit Tab. This means that only the keyboard users who need them will see nice, prominent focus outlines, while mouse users won't have the design disturbed unnecessarily.