๐Ÿ˜ Learn how to use Tachyons to craft beautiful, responsive, functional and fast UI with minimal CSS!
Switch branches/tags
Nothing to show
Clone or download
Latest commit 7f0e84d Jan 30, 2018

README.md

Learn Tachyons

tachyons-intro-image

Learn how to use Tachyons to craft beautiful, 100% responsive, functional and fast User Interface/Experience (UI/UX) with minimal CSS in much less time.

Why?

The User Interface (UI) or User Experience (UX) is the part of your application that the people ("end users") see and interact with. Ensuring that the UI/UX is the best it can be, is easily the top priority for our Web/Mobile projects.

Without good great UI/UX "nothing else matters" to the person using your app.
The UI/UX is what matters, not the programming language, what type of server, which "front-end framework" or "backend infrastructure" you are using; Nobody cares about the "boring technical details", they only care about their own experience using the app/website.

image

30 Second Summary

Through experience (building many web/mobile apps large and small in teams ranging from 2 - 200 people),
we have found that:

  • Hand-writing CSS is very time-consuming and repetitive!
  • Using (most) CSS "frameworks" results in:
    • Lots of Duplication where people re-create styles over-and-over
    • "Zombie Code" unused styles that nobody will risk removing
    • Bloated apps/sites that take much longer to develop, load and maintain than they need to.
  • Functional CSS ensures:
    • UI is 100% Predictable, Consistent and free from (unwanted) "Side Effects" (where a change in one place "breaks" something else!)
    • It's immediately clear from reading one block of code what the component does and what it looks like.
    • Updates to UI are made in One Place/File. (see diagram below)
    • Time to develop your App's UI scales proportionally instead of increasing exponentially the way it does with most "traditional" CSS frameworks.
    • The moment you want anything "custom" most CSS frameworks let you down badly because you have to "override", Tachyons is made for helping you to use your imagination! The resulting UI will be much less code, load considerably faster and be far easier to maintain!

Tachyons lets you avoid the "CSS Fire":

image

Extended discussion on the pros/cons of Functional CSS & Tachyons:
https://github.com/dwyl/learn-tachyons/issues/1

What?

what-section-header

Tachyons is a CSS Design System anyone can learn/use to craft beautiful, responsive & fast UIs with minimal CSS! Tachyons has all the building blocks you (your team) need(s) to build anything you can imagine.

Tachyons embraces a different style than many popular CSS frameworks known as "Functional CSS".

What is Different?

Here's a some CSS for a bootstrap primary button:

btn

.btn-primary {
  color: #fff;
  background-color: #337ab7;
  border-color: #2e6da4;
}

.btn {
  display: inline-block;
  padding: 6px 12px;
  margin-bottom: 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.42857143; /* who needs this level of decimal precision in CSS?! */
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  -ms-touch-action: manipulation;
  touch-action: manipulation;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background-image: none;
  border: 1px solid transparent;
  border-radius: 4px;
}

Visit: http://getbootstrap.com/css/#buttons (open your "dev tools") then inspect one of the buttons and see for yourself: image

What a monolith! There are a lot of CSS attributes there;
Bootstrap is quite opinionated about how a button should look and function.

Bootstrap Custom Button (The Old Way!)

What if we wanted a button that looks a little different? We'd most likely need to add another class. e.g:

<button type="button" class="btn btn-dwyl">do what you love</button>

Which requires us to write quite a lot of custom CSS:

.btn-dwyl {
  background-color: #46B6AC;
  border-color: #46B6AC;
  padding: 10px;
  text-transform: uppercase;
  letter-spacing: 4px;
  font-weight: 300;
}

btn-dwyl

Tachyons Custom Button (New Way!)

Tachyons approaches this with single utility classes (classes that do one thing).
These single utility classes encourage a different way of building UI:
all code is in a single place the html, not the stylesheet:

<button class="bw0 br2 bg-dwyl-teal pa2 white fw1 tc ttu tracked">do what you love</button>

Each class has one responsibility:

  • bw0 - "border width 0" see:
  • br2 - "border radius 2" see:
  • bg-dwyl-teal - "background color dwyl teal" (this is an example of a custom color)
  • pa2 - "padding all 2"
  • white - "text color white"
  • fw1 - "font weight 1"
  • tc - "text align center"
  • ttu - "text transform uppercase"
  • tracked - "with letter spacing"

see: /examples/buttons.html

Note: Tachyons does not have all-the-colors, hence we had to define our own. However given that there is a clear format for defining colors we defined our own as bg-dwyl-teal:

.bg-dwyl-teal {
  background-color: #4DB6AC;
}

This is "OK" because it's still a single-purpose class that we can re-use for any elements that require the teal background.

What is "Functional" CSS?

fcss

You may be thinking:

  • How exactly does this make my CSS better?
  • Why use this approach when CSS has been written like the bootstrap example for years?
  • Isn't this just like using inline styles? (considered by many to be bad practice in CSS)
  • Won't I end up repeating myself in the HTML?

Let's have a look at some of the core features and ideas of Functional CSS and see if we can answer some of those questions.

Functional CSS is:

Functional ๐Ÿ˜‡

Small, clear, easy to read classes that are easy to apply and do one thing.
Having small classes means it's easy to make a set of consistent spacing and type rules - you end up forcing a beautiful type scale & rhythm on your design.

"Good design (my preferred school of good design, at least) is mathsy, rational and pure โ€”and CSS is designโ€” so it follows that there are a bunch of lessons we can bring back from FP land into design." - Jon Gold Front-End Wizard @ AirBnB

Composable ๐ŸŽผ ๐ŸŽถ ๐ŸŽน

In Functional Programming you combine (or compose) a bunch of tiny functions together to do bigger things (like lots of notes to make music!). You end up reusing a lot of your code which is great for performance and consistency! Just like the button example:

<button class="pa2 br2 bg-green tc tracked"> <!--VS--> <button class="btn btn-dwyl">

We'll end up reusing โ™ป๏ธ nearly all of those classes, whereas the button classes will only be used for buttons.

Be green! Recycle your classes!

recycle-your-classes

"Doing one thing extremely well promotes reusability and reduces repetition." - Adam Morse

Immutable ๐Ÿ’Ž ๐Ÿ’Ž ๐Ÿ’Ž

In Functional languages declaring a property means it will never get overwritten, something known as Immutability - i.e it can't ever be changed (or mutated). A huge benefit you gain from immutability is that code is easier to reason about (you don't have to go on a hunt to find where something might have been changed).

CSS on the other hand is inherently mutable (it's the "C" in CSS - the Cascade)! But because fcss (functional CSS) classes are single responsibility, they aren't at risk of overriding each other. This almost eliminates the problems of the cascade (changing a property somewhere won't break your code elsewhere).

Another extremely useful property you gain from immutability is something called Referential Transparency. In other words: A thing does exactly what it says on the tin!

We know with a fair amount of confidence what our button will look like just from reading the classes:

<button class="pa2 br2 bg-green tc tracked">

but with .btn & .btn-dwyl classes, for all we know our button could look like:

questionable

Yikes! ๐Ÿ˜ฎ

And what if we wanted to change it? Do we change our "monolithic" button classes and pray ๐Ÿ™ that they don't break other buttons elsewhere? ๐Ÿ’ฅ On a BIG project?!

lol

Be realistic, we're likely to add more and more classes to avoid this from happening. This gets more and more wasteful over time, adding bloat to our CSS files:

In [the monolith] model, you will never stop writing css. Refactoring css is hard and time consuming. Deleting unused css is hard and time consuming. And more often than not - itโ€™s not work people are excited to do. So what happens? People keep writing more and more css - Adam Morse.

Why Tachyons?

What else does Tachyons specifically give us?

Easy to Understand and Use

A great thing about tachyons is how quickly and easily you can get up and running. The classes are easy to understand (once you get used to them), If you know CSS, you know tachyons!

If you find the names too terse you can use the verbose version.

Mobile First Responsive Design

By far one of the most useful features is that almost all classes have "responsive suffix" versions:

for example the "padding all 4" class pa4 also has 3 other versions:

.pa4-ns { ... }
.pa4-m { ... }
.pa4-l { ... }

ns, m, and l are short for "not small", "medium" and "large".

Tachyons gives you incredible flexibility to change your design at different screen sizes. And by default the "non suffixed"class is the mobile class! This encourages you to design for mobile first and expand outwards. All of this without writing a line of css! Tachyons has the referential transparency of inline styles coupled with the power of media queries!

Accessibility

Tachyons cares about accessibility! Not only does the documentation actively encourage accessibility by providing things like accessible colour combinations, but whenever a release includes functionality that can cause some accessibility issues, it comes with a โš ๏ธ warning to ensure everyone is aware of the appropriate usage. โค๏ธ

โš ๏ธ For quite some time people have been requesting an additional step in the type scale for 12px / .75rem. While 12px isn't readable for body copy it does have it's place in limited usage so I've added it to core. โš ๏ธ

A Natural Workflow

Using Tachyon's styles in this way also seems to encourage a more natural workflow when building UIs.

Styles are localized at the HTML template level, rather than being controlled by central CSS files. This fits my workflow because I usually work through a website's design one page at time... - Jason Li

Jason Li illustrates this perfectly:

tachyonsexplanationbefore tachyonsexplanationnow

Works well with component based UIs

Using a templating engine or framework (such as Rails, React, Elm, Angular) means you can reduce the repetition of classes in your html by reusing them as components.

Great Performance that Scales

As your project grows larger, your stylesheet doesn't (or only grows very minimally). This has benefits for the user as there's less CSS to download and the browser has to register less styles overall (it can cache the result of already computed styles).

"Inline styles are 1 to 1 for the browser. i.e an inline style can only style one element at a time. While a class has a 1 to many relationship. This has non-trivial deltas in rendering speed and can greatly reduce jank in a complicated ui." - Adam Morse

How?

Try Before You Commit (3 Easy Steps)

Getting started with Tachyons is as easy as 1, 2, 3! We've created some examples for you to play around with before you decide to use it on your own projects.

1. Clone this Repository

git clone https://github.com/dwyl/learn-tachyons.git && cd learn-tachyons

2. Open one of the Example .html files in your web browser

button example

See: /examples

3. Edit Some Code!

In your Text Editor / IDE of choice, edit one of the classes:

button example red

Optional: Install "Live Server" for "Live Reloading"

If you prefer not to have to manually refresh the page each time, simply run the following command:

npm install && npm start

This will download the dependency on live-server which will auto-open your default browser:

button example blue

e.g: http://localhost:8000/examples/buttons.html

In your Own Project

You can get up and running by just adding a link tag in your html

<link rel="stylesheet" href="https://unpkg.com/tachyons@4.8.1/css/tachyons.min.css">

Or grab the latest version

<link rel="stylesheet" href="https://unpkg.com/tachyons/css/tachyons.min.css">

If you want to customize the styles you can clone the tachyons repo locally and install the dependencies

$ git clone https://github.com/tachyons-css/tachyons.git
$ cd tachyons
$ npm install

Make the changes that you'd like to the css files and then run

$ npm run build

This will output both an unminified and minified css file to the /css directory

Check out this video for a guide to setting up.

Learning the ropes

The Tachyons documentation is fantastic as reference material, incredibly well thought out, readable and easy to search once you know what you want to do.

But if you just want to play around with tachyons and get a feel for the thinking behind it, you'll find some well-used options below to get you started.

Once you start to get an understanding for how tachyons works, we've found the table of styles to be a very useful reference point.

Responsive modifiers

Tachyons includes modifiers which can be added onto the end of any class and will set up your media queries as shown above.

ns covers everything above mobile size, m covers roughly tablets, and l covers roughly desktop sizes.

Typography

The first place to start when designing is to set a type scale so that you can guarantee a harmonious progression of font sizes (from 'body copy' to 'headlines') across your application or site - tachyons has this built in!

Tachyons also includes .sans-serif and .serif which each have a set of appropriate font family fallbacks.

Font size

Aside from standard f1 - f6 sizes (f7 was introduced in tachyons 4.7.0, but is not recommended for extensive use), f-headline and f-subheadline can also be used for larger text requirements (usually for print).

Line Height

An agreeable line height promotes readability and tachyons offers 3 options titled according to their most usual uses:

  • lh-copy with a line height of 1.5
  • lh-title with a line height of 1.25
  • lh-solid fixes line height to 1

Font weight and style

Aside from normal andb for bold, fw1 (corresponding to font-weight: 100;) through to fw9 (corresponding to font-weight: 900;) are available.

i can also be used for an italics font style.

Text alignment

tl aligns text left, tc centers it and tr aligns it to the right.

Layout

Tachyons bases all of its spacing on a specific ratio that provides a much more effortless consistency in spacing across devices, giving you a much higher propensity for things to line up or to at least look harmonious.

Padding and Margins

Padding and margins both follow the same convention to create their 3 letter classnames (e.g. pa4 or mb2):

  • First character: p or m: each classname starts with one of these to denote 'padding' or 'margin'
  • Second character: a (all - adds padding or margin to top, bottom, left and right), h (horizontal - adds padding or margin to left and right), v (vertical - adds padding or margin to top and bottom), t (top - adds padding or margin only to the top), r (right), b (bottom), l (left)
  • Third character: a number from 0 to 7

Floating

Float left (fl), float right (fr) and float none (fn) are available and sets elements to block-level elements.

Because floats are removed from the flow of the page, remember that to force an element to contain its floated children (i.e. the elements inside it), you'll need to apply a clearfix - in tachyons you give the parent element the class cf.

Display

A simple set of classes that follow a similar naming convention to what should now be very familiar to you, e.g. dib for {display : inline-block} or dn for {display: none}.

There are also a set of display classes for table and table related display properties, which you can find in detail in the documentation with great examples.

Widths

Widths are denoted by the w class, followed by one of 3 types of modifiers:

  • Numbers scale which follows tachyons' powers of two scale mentioned above
    • Starting at w1 (1rem) to w5(16rem)
    • e.g. w1 sets the width of the element to the first step in the width scale (1rem) whereas w4 sets the width to the fourth step (8rem)
  • Percentage literals
    • Starting at w-10 for 10% and going up in 10s (e.g. w-20, w-30, etc) until w-100
  • Percentages (not supported in Opera mini or IE8 as these are calculations)
    • w-third, w-two-thirds and w-auto

Max widths are denoted by mw and support the numbers scale above (e.g. mw-1 to mw-10) as well as mw-100 (100%) or mw-none.

Heights

Heights are denoted by the h class, followed by one of 3 types of modifiers:

  • Numbers scale which follows tachyons' powers of two scale mentioned above
    • Starting at h1 (1rem) to h5(16rem)
    • e.g. h1 sets the height of the element to the first step in the ย height scale (1rem) whereas h4 sets the height to the fourth step (8rem)
  • Percentage literals
    • Starting at h-25 for 25% and going up in 25s (e.g. h-50, etc) until h-100
  • Values
    • auto and inherit

Position

Elements are naturally statically positioned, but tachyons also support .absolute for absolute positioning and .relative for relative positioning.

For positioning of the elements, tachyons provides classes for 2rem, 1rem, 0, -1rem and -2rem, using the following format plus the number (which can all be used with the media breakpoint modifiers at the end):

  • top- e.g. top-0 (for {top: 0}) or top-2
  • right- e.g. right--1 (for {right: -1}, note the additional dash here) or right-1
  • bottom- e.g. bottom--2
  • left- e.g. left-1

Theming

Tachyons comes with a number of pre-defined colours which you can use by themselves to denote font colour or preface with bg- to give an element a background colour (e.g. bg-red).

Hovers

There are quite a few hover states available, the basic being:

  • dim fades elements or text to 50% opacity on hover
  • glow brightens elements or text to 100% opacity on hover
  • underline-hover underlines elements or text on hover
  • grow makes elements scale by 5% of its size on hover

If you're looking for a specific effect, please read the code at the bottom of the docs as there are more!

Background size

Background size allows an image to either:

  • fill its containing element (possibly showing only part of the image if it is bigger than the containing element) using cover
  • be displayed in its entirety (possibly leaving a portion of the containing element blank if this is wider or taller than the image) using contain

Borders

Borders follow the same familiar pattern: ba for all 4 borders of the element, bt for the top border, br for the right border and so on.

The interesting part is that tachyons offers:

  • Border radius:
    • from br0 (no radius) to br5 (1rem)
    • br-pill to obtain a pill-shaped element
    • br-100 for the 100% border radius to obtain a circular element
  • Border widths: from bw1 (the thinnest) to bw5 (the thickest)
  • Border styles (which can be combined with all other border properties):
    • b--dashed
    • b--dotted

Opacity

Opacity mostly follows a linear pattern o- with a number decrementing in multiples of 10: o-90 (90% opacity), o-80 (80% opacity) and so on.

In addition, tachyons offers: o-05, o-025 and o-0.

Resources

Articles

Questions and Discussions

Future of Tachyons

Watch Adam Morse (creator of Tachyons) describe the Future of Tachyons:

future-of-tachyons
https://youtu.be/XX47atVcVZE?t=1h1m11s