Show Menu

Tachyons CCS Cheat Sheet (DRAFT) by

Tachyons CSS + Gridsome Vue

This is a draft cheat sheet. It is a work in progress and is not finished yet.

Getting Started

Tachyons CSS Toolkit - Built for design­ing.
Create fast loading, highly readable, and 100% responsive interfaces with as little css as possible.
Tachions Home Site
Tachyons CSS Cheatsheet
Prot­otyping template
This template is always linked to the most up to date version of Tachyons. Save this file to your computer to start protot­yping right away without worrying about setting up a dev enviro­nment. You can open the file in a web browser and view your changes.
<!­DOCTYPE html>
<html lang="e­n">
<ti­tle> </t­itl­e>
<meta name="v­iew­por­t" conten­t="w­idt­h=d­evi­ce-­width, initia­l-s­cal­e=1­"­>
<link rel="st­yle­she­et" href="h­ttp­s:/­/un­­m/t­ach­yon­s/­css­/ta­chy­ons.mi­n.c­ss">`

Geting Tachyons

Copy the line of code below and paste it in the head of the html file(s) you want to include tachyons in.
<link rel="st­yle­she­et" href="h­ttp­s:/­/un­­m/t­ach­yon­s@4.10.0/­css­/ta­chy­ons.mi­n.c­ss"/­>
or install via npm
npm install --save-dev tachyo­ns@­4.10.0
or grab all the source files and build+­develop locally
git clone git@gi­thu­­ons­-cs­s/t­ach­yon­s.git
cd tachyons
npm install && npm start

Basic Ideas - Introd­uction to Tachyons

Use atomic CSS classes to styles the page
<body class=­".bg­-wa­she­d-y­ellow pa2"­>
<h1 class=­"f2 lh-solid f3-nsl­h-c­opy­-ns­"­>...
Those classes have this generic form
[base][modifier][-mqx] where
base: letter(s) for that class family
modifier: option for this clas
mqx: Media Query eXtensions for screen sizes
. [-ns -m -l] -> (not-small medium large)
. [...]: optional one of the list
. {...}: mandatory one of the list
In <h1 class=­"f2 lh-solid f3-ns lh-cop­y-n­s...
. f lh: base for (font size | line height)
. 2 3: size modifiers (2.25rem 1.5rem)
. -ns: option valid for not small screen.