Responsive

Tachyons css is responsive from the ground up. The majority of classes include responsive variants that target different breakpoints. It's important to note that since all classes are functional, responsive variants have different names using media query naming conventions.

<div class="pa3 bg-black white">
  <span class="dn-m dn-l">Small</span>
  <span class="dn db-m dn-l">Medium</span>
  <span class="dn db-l">Large</span>
</div>

Naming convention

Let's consider the class .db which declares display: block;:

db: The base class which targets all viewports
db-s: Targets small, medium and large viewports
db-m: Targets all medium and large viewports
db-l: Targets only large viewports

As you can see, -s, -m and -l are appended to the class in order to target specific viewport sizes.

Mobile-first architecture

Tachyons strictly adheres to a mobile-first architecture for a few reasons. The primary reason is mobile performance. Typically, smaller viewports are associated with mobile devices that are underpowered in comparison to tablet and desktop devices. Using mobile-first media queries ensures that mobile devices have to parse as little css as possible.

If you take a look at the following Tachyons source css we can see this concept in action:

/* Parsed by all devices */
.dn { display: none; }

/* Parsed by small, medium and large devices */
@media (--breakpoint-small) {
  .dn-s { display: none; }
}

/* Parsed by medium and large devices */
@media (--breakpoint-medium) {
  .dn-m { display: none; }
}

/* Parsed only by large devices */
@media (--breakpoint-large) {
  .dn-l { display: none; }
}

As you can see, mobile devices get to skip parsing 66% percent of the above css. This is a substantial performance improvement.

Another benefit from mobile-first architecture is things become more intuitive. It's also a lot more fun to design in the browser by composing classes to target breakpoints rather than repeatedly switching back to the css and writing new rules and media queries.

Visibility matrix

Classes	Extra Small Devices	Small Devices	Medium Devices	Large Devices
`.dn`	Hidden	Hidden	Hidden	Hidden
`.dn-s`	Visible	Hidden	Hidden	Hidden
`.dn-m`	Visible	Visible	Hidden	Hidden
`.dn-l`	Visible	Visible	Visible	Hidden
`.dn .db-l`	Hidden	Hidden	Hidden	Visible
`.dn .db-m`	Hidden	Hidden	Visible	Visible
`.dn .db-m .dn-l`	Hidden	Hidden	Visible	Hidden

Customizing variables

Tachyons uses custom media variables to specify breakpoints. This allows you to update the variable in one place and update the breakpoints for all modules

Name	Default	Class Modifier	Declaration
`breakpoint-small`	`min-width: 30em`	`-s`	`@custom-media --breakpoint-medium screen and (min-width: 30em);`
`breakpoint-medium`	`min-width: 48em`	`-m`	`@custom-media --breakpoint-medium screen and (min-width: 48em);`
`breakpoint-large`	`min-width: 60em`	`-l`	`@custom-media --breakpoint-large screen and (min-width: 60em);`

Reference

http://mrmrs.github.io/writing/2014/08/18/mobile-first-css/

3.4 KiB Raw Permalink Blame History