Show Menu
Cheatography
  1. Home >
  2. Cheat Sheets >

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 designing.
Create fast loading, highly readable, and 100% responsive interfaces with as little css as possible.
Tachions Home Site
Tachyons CSS Cheatsheet
Protot­yping 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.
<!D­OCTYPE 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­pkg.co­m/t­achyons
/css/t­ach­yon­s.m­in.c­ss­"­>`
  <bo­dy>

``
  </b­ody>

</h­tml>

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­pkg.co­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­b.com:tachy­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-copy-ns
...
. f lh: base for (font size | line height)
. 2 3: size modifiers (2.25rem 1.5rem)
. -ns: option valid for not small screen.