Tachyons was built for designing.
Create fast loading, highly readable, and 100% responsive interfaces with as little css as possible.
Modules can be altered, extended, or changed to meet your design needs. You shouldn't need to write css everytime you want to build a new ui component. By learning the composable building blocks in tachyons, you can quickly start to build out interfaces while writing little to no css.
Getting Started
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="stylesheet" href="https://npmcdn.com/tachyons@4.0.0-beta.12/css/tachyons.min.css">or install via npm
npm install --save-dev tachyons@4.0.0-beta.12or grab all the source files and build+develop locally
git clone git@github.com:tachyons-css/tachyons.git
cd tachyons
npm install && npm build
Principles
Responsive
Everything should be 100% responsive. Your website should work regardless of a users device or screensize. Don't break the functionality of HTML with CSS.
Readable
No matter the lighting, or the device, font-sizes should be large enough and contrast should be high enough.
Performant
Code isn't for making a developers life easier. It's for improving the lives of our users. If it's not doing that, why write it. A developer's time is not precious. A user's time is. Code should be optimized for performance.
Modular
Modules > Monoliths Tachyons isn't a monolithic framework. It's a collection of self contained modules that can be mixed and matched or used independently. Use what you want, leave what you don't.
Reusable
Doing one thing well, promotes reusability and reduces redundancy in a codebase.
Easy
Designing in the browser should be easy. If a computer can do it, you shouldn't have to.
Features
Runs on Postcss
A flexible plugin framework for post-processing css. View on Github
Mobile-first architecture
Base classes are mobile by default. Can be overridden by namespaced classes targeting larger breakpoints.
Layout debugging
Small css modules for debugging stacking and layout issues. Can easily be turned on or off during development.
Composable classes
Construct anything from complex layouts to responsive components with a series of single purpose classes.
Cohesive design system
Scale based on the powers of two. Starting at .25
Responsive Grid
Infinitely nestable. Fully fluid. Extremely light-weight.
Customize, or extend
Tachyons is meant to be edited and customized to meet the needs of your product. It's just css. It isn't precious. Don't be afraid to change: class names, media queries, breakpoints, or values.
Testimonials
After I embraced the “lots of little classes” way of styling, my anger at CSS almost completely went away and I was much more easily able to style and modify a design... you really have to try it.
It turns out composing utilities together like that is a really nice way to style things. Adam Morse has taken this to its logical conclusion with Tachyons...
It seems silly at first to write code that looks like inline HTML styling but Tachyons works. Instead of wasting time hunting down and dealing with CSS overrides, I now spend time iterating on the design... which is what we're supposed to be doing in the first place :)
I’ve found extremely low-level “frameworks” like BassCSS and Tachyons useful recently. They let you do the whole “just add and remove classes to create elements” thing but also don’t lock you into the constraints and issues of higher level frameworks like Bootstrap.
CSS frameworks shouldn't be one-size-fits-all. Tachyons nails it with its modular approach, eliminating bloat from day one.
Tachyons nails everything you need from a CSS framework. Development goes faster, designs are more consistent, and best of all it’s a ton of fun to play with.
I never understood how people did font ratios and table layouts nicely with CSS until @mrmrs showed me the light.
Tachyons enabled the aboutLife team to more easily reason about, debug, and change visual styles all while thinking _less_ about CSS. We’re able to achieve our desired designs more quickly than ever before.
NPM
The main tachyons repo is just a group of of encapsulated css modules available on npm and github. You can grab the entire toolkit, or just a few selected modules. Mix and match them to suit your project's specific needs. Since tachyons modules are very focused on doing one thing well, most of them are extremely small (well under a kilobyte) so you can start using some or all of them without adding bloat to your css.
npm install --save-dev tachyons-module-name