Functional css for humans

Last update: Jan 4, 2023

Overview

TACHYONS

Functional CSS for humans.

Quickly build and design new UI without writing CSS.

Principles

Everything should be 100% responsive
Everything should be readable on any device
Everything should be as fast as possible
Designing in the browser should be easy
It should be easy to change any interface or part of an interface without breaking any existing interfaces
Doing one thing extremely well promotes reusability and reduces repetition
Documentation helps promote reusability and shared knowledge
CSS shouldn't impede accessibility or the default functionality of HTML
You should send the smallest possible amount of code to the user

Features

Mobile-first CSS architecture
490 accessible color combinations
8px baseline grid
Multiple debugging utilities to reduce layout struggles
Single-purpose class structure
Optimized for maximum gzip compression
Lightweight (~14kB)
Usable across projects
Growing open source component library
Works well with plain HTML, React, Ember, Angular, Rails and more
Infinitely nestable responsive grid system
Built with PostCSS

Getting Started

Docs can be found at http://tachyons.io/docs The modules are generally pretty small and thus quick and easy to read.

Use the CDN

The quickest and easiest way to start using Tachyons is to include a reference to the minified file in the head of your HTML file.

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

Local Setup

Clone the repo from Github and install dependencies through npm.

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

Dev

If you want to just use everything in tachyons/src as a jumping off point and edit all the code yourself, you can compile all of your wonderful changes by running:

npm start

This will output both minified and unminified versions of the CSS to the CSS directory and watch the src directory for changes. It's aliased to the command:

npm run build:watch

If you'd like to just build the CSS once without watching the src directory, run:

npm run build

If you want to check that a class hasn't been redefined or 'mutated,' there is a linter to check that all of the classes have only been defined once. This can be useful if you are using another library or have written some of your own CSS and want to make sure there are no naming collisions. To do this run the command:

npm run mutations

Docs

The tachyons docs located at http://tachyons.io are all open source and located at https://github.com/tachyons-css/tachyons-css.github.io

You can clone the docs and use them as a template for documenting your own design system / patterns / components. While not everything is automated, the component library generation makes it extremely easy to generate and organize the documentation for components as demonstrated at http://tachyons.io/components

Community Resources

DWYL Learn Tachyons: Learn how to use Tachyons to craft beautiful, responsive, functional and fast UI with minimal CSS
Tachyons TLDR: Quick lookup for Tachyons classes, scales and color palette
Tachyons Pro: Fun quiz for memorizing class names

Contributing

Please read our code of conduct for contributors.

Tachyons in Production

A longer list of sites that use tachyons in production can be found in sites.md We love letting the community see what people are building. Please add your link to sites.md in a PR or by opening an issue if you're willing to share to your site or project.

Featured Sites

And of course...

http://tachyons.io

Help

If you have a question or need help feel free to open an issue here or jump into the Tachyons slack channel.

Comments

How is tachyons different from inline styles?
How is having class="mw-50" different from style="max-width: 50%"? Same goes for the majority of classes I looked through in the css file. I cannot think of a difference other than a cosmetic one. I would argue that the latter is easier to read and remember, and just as easy to type with the right text editor plugins.

You have precisely the same disadvantages:

You tightly couple your document structure and your style guide and therefore make it much more difficult to maintain. (Imagine doing a complete redesign of a website built with tachyons, or a css-zen-garden where the template was built with tachyons)

You lose the flexibility to change the properties of multiple related elements at the same time:

You clutter up your DOM with styling directives
opened by MaybiusStrip 45
Add Recommendations on Class/Declaration Order to Docs. (was: "Best Practice for Order of Class Names")

Can we establish and document a recommendation/~~best practice~~ around how order classes? Do I put box first (display, padding, margin) or type, or skin, etc.? What about when writing for media queries and states? I know there are some best practices out there with regards to declaration order within components but those are around CSS methodologies that functional CSS is moving away from so maybe we need an fCSS approach to align the order of our multiple classes?

opened by timpish 24
Question: why the double-dashes?

Why are double-dashes in br--top, b--black, absolute--fill etc.?

I copied the syntax in my library: https://github.com/fab1an/react-native-tachyons, but I'm not sure if I'd not rather lose the double-dashes.

Was there a reason for this naming?

opened by fab1an 14
Added `flex` module to the stack, to enable Flex Box Layout implementations.
Regarding #70

Added df modifier to the Display module, to set display: flex; on elements, upgrading them to be flex containers. Also, updated docs file for this module with this new addition.

Created src/_flex.css source stylesheet module, enlisting several properties and modifiers to compose simple (and complex) flex box layouts.

Created docs file for this new Flex module, enlisting thorough examples of several implementations and use cases.

Things to consider:

Naming Conventions. From the module's name to the chosen modifiers, flex properties are many and not all of them are necessary related to each other, so it could get a little tricky.

Granularity. Whether we really want to incorporate all of these flex box rules, or just a subset, so as to achieve simple layouts.
opened by elussich 14
Class names ideas

Yo community! The README.md here States the following:

A Note on Class Names

As tachyons started out as an experiment in css performance - many of the names were programmatically generated using vim macros based on the content of the properties and values they represent. As I have begun to work on tachyons more and use it in the wild, I've begun to codify common classes to things that my brain naturally leans towards remembering. I like unix a lot and subscribe to naming conventions like cp over copy for common classes that I use frequently. That being said I think the naming in Tachyons needs work and I am open to hearing peoples feedback on things they like and also the things they don't like. Once Tachyons is a little more finished I will be generating different 'flavors' of the framework that use different naming patterns. One version being a more verbose class naming system that seems to be aligned with what many people prefer.

So, I would like to spark a conversation here on what could be some future class naming conventions.

opened by notenociz 12
How to use css if installed with npm?
I'm really inexperienced with loading css via npm, just need a little bit of example documentation on how I might do that? You say in your docs that it's an option to use npm to install tachyons modules, but there's no mention of how to actually then use it.

Can I simply:

main.js

require('tachyons-widths');

Do I need some special config with webpack? css-loader?

Thanks for any help, just need pushed in the right direction. Library looks interesting!
opened by nackjicholson 10
Update to normalize 7

Many of the changes introduced by Normalize 6 were disruptive. The project maintainer now believes that to have been a mistake. Normalize 7 has reverted those changes. (There's a long issue thread about the reasons here: https://github.com/necolas/normalize.css/issues/664)

This commit shows what changed in Normalize 7: https://github.com/necolas/normalize.css/commit/b4a8fdaf8321093b1e3cad612fb76cf2b7d3275d

Can we update to Normalize 7?

opened by feross 9
What is the best way to package a common set of classes together?
Hello,

I've been using tachyons on my current project and found it really helpful in prototyping and editing an existing UI. One thing I did not manage to grasp yet is the best maintainable way to share a common set of classes accross elements.

Let's say, all the buttons in my app are .link.white.dib.ba.br2.ph3.pv2.ttu.tracked.underline-hover. How should I handle the possible variations (like size changing for CTA, colors for various actions) while still being able to easily change, say, the border-radius of all buttons at once?

The various solutions I tried so far all have drawbacks and I cannot settle on one. Here is what I tried so far:

Copy-pasting the class list on each element. This works, but is cumbersome. I cannot quickly prototype by changing the style of all buttons at once (which defeats one of the main advantages of the lib), as I'll have to edit them all one by one. I also take the risk of forgetting one somewhere.

Using a templating language in my HTML to include a partial that contains the whole HTML element with the correct classes already applied. Something like =partial('button'). This adds a new layer of complexity (especially if I want to add other classes to that element).

Adding a new .button class with old-school CSS definitions. I then lose the whole scaling system as I'm back writing width and font-size in px or rem again.

Adding a new .button class just like above, but using SCSS and @extend .link to inherit from the .link class. This is the approach I like the best so far, but I've run into specificity issues induced by the order in which CSS classes are written preventing me from overwriting properties with new Tachyons CSS classes added on the element.

How do you do on your own projects?
opened by pixelastic 9
A bug, or just me?

I followed the useful video guide, Tachyons - Setting up a new project, and I've hit a problem.

When I run npm start it fails at:

npm run build:watch

Further down it tells me:

Error: ENOENT: no such file or directory, stat 'C:\***\tachyons\run' at Error (native)

I've the latest (stable) versions of node and npm installed. Is this a genuine bug or have I missed something embarrassingly obvious?

opened by robjwood 9
Consider incorporating more variables with fallback values
Creating an issue to track our discussion in Slack. I will continue to update this issue as more ideas arise.

Pros

We can release new type scale addons that are a collection of variables

Adds more configurability without writing new CSS

Fallbacks keep things clean var(--some-var, 4rem);

Cons

Complexity

More difficult for beginners

Opinionated is sometimes good, configuration can snowball out of control easily

Other frameworks have had issues maintaining variables

Related Reading

http://jxnblk.com/writing/posts/rethinking-variables-in-css/

question v4
opened by johno 9
Hover classes for border color
I think it would be a great addition if Tachyons had the class:

.hover-b--{color}

Is there a reason for not including this?

My use case is to make a button to change its border color on hover.
v5 v5-addon
opened by klzns 8
Update seanoshea.me to https

Updating seanoshea.me from http to https after a redesign. Even though the HTML doesn't include tachyons classes directly, it relies on tachyons in sass placeholder selector format, which then @extend semantic class names using gulp-sass-extend-shorthand. See the main.scss file in the project repo.

opened by sposhe 0
🏛 adds row-gap and column-gap to gap.css
Changes

adds row-gap and column-gap to gap.css

Motivation

Having row and column gap classes are very useful for flexbox layouts. Currently there is support for changing row and column gap together but not separately which felt like an oversight. 🙂
opened by jzwood 0
⚠️ Reverts the v/h to y/x spacing change
Change

reverts the v/h to y/x spacing notation change (back to ph2 or mv3 for example).

Motivation

how v4 handles spacing works well

the x and y are confusing

e.g. px3 doesn't have anything to do with pixels which, even for the initiated, is confusing
opened by jzwood 0
🐞 fixes a few places where -ns hadn't been replaced by -s
fixes inline docs with -ns or -n instead of -s

fixes some small styles that were incorrectly suffixed with -ns

removes * from .cf { *zoom: 1; }

* was a typo in original blog about the clearfix hack
opened by jzwood 0
images don't load in components demo

hi guys, i was having a look at the components and noticed that images are missing from the demo at least on these pages below. can someone confirm?

https://tachyons.io/components/marketing/iphone-app/index.html https://tachyons.io/components/layout/flag-object-collapse/index.html https://tachyons.io/components/layout/four-column-collapse-two/index.html https://tachyons.io/components/layout/flag-object/index.html https://tachyons.io/components/layout/flag-object-top/index.html https://tachyons.io/components/layout/flag-object-bottom/index.html

screenshot :

dev tools return a 404 as shown.

opened by anvarjamalsaifi 1

Releases(4.9.1)

4.9.1(Jan 1, 2018)

https://github.com/tachyons-css/tachyons/pull/479 https://github.com/tachyons-css/tachyons/pull/475
Source code(tar.gz)
Source code(zip)
v4.9.0(Oct 26, 2017)

The flexbox module now has support for flex-grow and flex-shrink.
Source code(tar.gz)
Source code(zip)
4.8.1(Aug 15, 2017)

Hard to have a release without also making a mistake I guess. Removes duplicate declarations for wrap-reverse. It shouldn't have any effects on rendering as it's duplicated css. None the less, fixed.
Source code(tar.gz)
Source code(zip)
4.8.0(Aug 12, 2017)
4.8.0

The beginning

The first public commit to what would become Tachyons was on August 23rd, 2013. I had been experimenting with a few different patterns for rapidly building responsive sites while designing in the browser. Some things worked. Some things didn't. At the time I had been starting to study various aspects of css performance. Mainly download time and rendering time. One of the tools I stumbled across was css lint. Running my code through the cli tool - the first error I remember seeing was that I had more than 10 float declarations. I wondered if this number was arbitrary or if it was directly tied to code quality. I started to experiment with testing various patterns and architectures with https://www.chromium.org/developers/telemetry/run_locally. At the time I wrote most of my css with content-semantic class names. I liked big monolithic classes and writing selectors that traversed the DOM. So I was a bit dismayed that this linting tool was telling me my code was wrong and the performance testing I was doing reflected the same message: I had too many floats and it was slowing down rendering time on some screens.

As I was pondering my existence and everything I knew about css - I started reading Nicole Sullivans work because she was one of the people behind css lint. Her writing was a revelation. And there was so much of it. I believe (although I can't find it at the moment) I also found a code example where she had a padding and margin scale, with pvs, pvm, pvl class names (for those of you who remember tachyons v1-3). This pattern was against everything I knew, but at the same time - it made sense. A few days later I found SUITcss by Nicholas Gallagher. The eureka moment was looking at how he handled grids. He had classes that would set the width of a column only at a certain breakpoint. A lightbulb went off. I wanted that pattern for almost everything. Spacing, font-sizes, display, borders, text alignment, etc. So I started to build out a set of things I thought I might need.

It was a great exercise for me because it made me think even more about how values relate to each other, and which scales would compose well and which ones wouldn't. There was a lot of experimentation. I built a lot of pages, components, and sites. I kept learning what I liked what I didn't. Which class names I could never remember for some reason, and which ones people I collaborated with were able to grok easily.

In the beginning tachyons was an experiment to answer two questions:

What is the absolute fastest you can get an interface to render

Could I stop repeating myself and writing the same css over and over again for every single project. If I had a solid design system and could easily target any breakpoint, could I build lots of different looking websites with a wide variety of aesthetics, without changing any css. Could you make a system reusable from project to project, only needing to potentially customize colors and font-families, and if that?

At first, almost everyone I showed it to hated it. @jxnblk and I were talking a lot about design systems at the time and how to help design teams iterate more quickly in the browser - and how to make it easier to write code. He was experimenting with various patterns that turned into basscss.com over at Kickstarter. I spent time doing small workshops and sessions with various designers around San Francisco as well as at Salesforce. I spent a lot of time just observing how different people designed in the browser. What they could do quickly, what they spent a lot of time on unnecessarily. It was around this time I became more interested in how patterns in Tachyons could increase developer velocity. What adjustments could I make to tachyons and its ecosystem that would allow it to be usable by more people? It started to become more than css, it also started to become a base for me to experiment with design systems, composition, designing with modular scales, grid systems, timeless patterns in typography, and automated documentation. I never expected people to use it, but I did want to do the work out in the open.

A lot has changed in the last four years. Atomic css, functional css, oocss, are all a bit less taboo. While not everyone uses these patterns, there are a number of teams who have found success using them. None the less it's still always a surprise and a delight when someone says they use tachyons and don't loath everything about the experience.

A lot of people have helped get Tachyons to where it is. The pull requests that don't get merged, are still great contributions to the project that I learn from. Thanks to all of you who have supported me financially, emotionally, and technically over the last four years. While open source can sometimes be a drag, it can also be filled with lots of inspirational people and moments. I'm grateful for all of them.

Now onto the less boring stuff.

Since we're turning 4, I figured the version number would be better as 4.8.0 then 4.7.4 - it includes a few new treats and a couple of bug fixes.

Changes

Added an option for text-align: justify

Added open to set margin-right|left to auto (useful for flex box)

Fixed bug with shadow hover when used in conjunction with children that have a border-radius

Fixes typo in skins-pseudo

Changes debug-grid image to gif (reduces file size)

Moves list of sites built with tachyons to sites.md

Adds no wrap and wrap-reverse to flex box module

Hopefully no new bugs were added.

☉

@mrmrs
Source code(tar.gz)
Source code(zip)
v4.7.3(May 19, 2017)

We introduced some breaking changes via normalize when upgrading to version 6.0.0. As the community has since cut a new release, 7.0.0, to "revert" the changes, we will do the same.

Apologies to any inconvenience this may've cause anyone. Happy 💻 ing.
Source code(tar.gz)
Source code(zip)
v4.7.2(May 10, 2017)

For some reason looks in mirror the css wasn't properly compiled before releasing. 4.7.2 should fix normalize and flex updates not being included.
Source code(tar.gz)
Source code(zip)
4.7.0(Apr 3, 2017)
I'm very sad about the creator of the 808 passing away so to distract myself from epic sadness I am releasing some new Tachyons features.

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. Also added some classes for reversing column, row, and wrap in flexbox.

A big note of thanks and <3 to @dwyl for supporting Tachyons development.

Add 7th step to type scale .f7 { font-size: .75rem }

More flex: row, column, and wrap reverse have been added

Add responsive classes for centering with margin auto .center

Add classes for inheriting color values in skins, pseudo skins, and border modules

Fix bug in media query declarations in outline module

Update to normalize 6.0.0 (removes font-family declaration on form elements like buttons)

Fix dead link in readme

Happy developing!
Source code(tar.gz)
Source code(zip)
4.6.1(Dec 14, 2016)

I knew when I wrote that 4.6.0 might be the last release of 2016 that it was the best way to guarantee my code had a bug that I would have to fix before 2017 hit.

Deepest apologies for the bug!

In the skins-pseudo partial the new hover classes for black and white opacity levels were declaring color when they should have been declaring background color. This is now fixed. Thanks to @amytych for catching this. Also fixed a minor typo where helvetica was declared before helvetica neue in the sans-serif stack which is inconsistent with the helvetica class. Guessing no one noticed that one though. It's fixed now, thanks to @lachlanjc for noticing.

Source code(tar.gz)
Source code(zip)
4.6.0(Dec 13, 2016)

Hey everyone! This is likely the last release of 2016 for Tachyons (but you never know.) While 2016 has largely been horrible, watching the Tachyons community grow and getting to work with @johnotander a bunch has been a blast. My favorite part about open source will always be the people. Appreciate everyones feedback over the last year as people tried tachyons out. All of the below additions are a result of conversations I've had with people in the community. So... here are the changes for 4.6.0.

Rotations

There is a new rotations module that allows you to rotate objects in 45 degree increments.

Negative margins

There is a new module for negative-margins. It uses the same scale as the spacing module.

Nested

I've added a module that should make it easier to style nested content. It likely won't cover everything you need but will hopefully provide a pattern that is easy to extend.

Glow

There is a new class in the hovers module to set an element to opacity: 1 on hover. Combined with the opacity module, you can have elements set to your specified opacity and then animate them to full opacity. Basically the opposite of the dim class.

Aspect ratios

Aspect ratios have been moved out of src/_utilities.css to src/_aspect-ratios They've also been extended so you can set aspect ratios at each breakpoints.

Bug fixes

The shadow-hover class should now be fixed crosses fingers - thanks to @lowmess for helping with the fix. There was a typo in one of border-radius classes for the medium media query. This has been fixed.

Update Normalize.css

Update normalize to 5.0.

Hope everyone has a wonderful holiday. Looking forward to what 2017 will bring.
Source code(tar.gz)
Source code(zip)
v.4.5.0(Sep 17, 2016)
v4.5.0

A small but powerful update.

Tl;dr

More widths

Background animation class

Added debug classes for white and black

Widths

Due to popular demand added a few more width classes.

Classes for 30, 70, and 90% have all been added. Also added a w-two-thirds class which will take up 2/3 of the width it's parent.

Documentation has been added to the homepage

Background animation

You can now combine bg- and hover-bg-* classes withbg-animation if you want to animate background colors on hover & focus. Demos coming soon.

More debugging

.debug-white and .debug-black will now add outlines of white and black to all child elements.
Source code(tar.gz)
Source code(zip)
4.4.1(Sep 15, 2016)
Well 4.4.0 had a small bug in it so that got quickly patched and we are now ready to drop 4.4.1.

tl;dr

Tweaked some colors & added some colors

Added a width class for calc(100%/3) called w-third

Added two base min-height classes for 100% and 100vh

Added new module for setting background-position

Made the shadow-hover animation more performant. 60fps ftw.

Added button reset in form module

Better focus styles on links

Hover utilities all cover focus now as well

Colors

Before

After

Let’s paint some bikesheds! After some tweaks to color values and adding a couple colors we’ve expanded the amount of available color combinations that meet accessibility standards for contrast ratio. We now have reds and greens that you can use white or black text on (amongst others)

The breakdown:

14 More AA Large combos

26 More AA combos

26 More AAA combos

Widths & Heights

Added a width utility for setting elements to a third of it’s parent element.

Added min-height classes set to 100% and 100vh. They can be found in the heights module

Background-position

New module! We now have some background-position utilities for setting images to be aligned to the top, right, left, or bottom of the image (while centered on the opposite axis). Check out the source code in src/_background-position.css

A11y

Some of the hover classes didn’t also have focus attached. That is now fixed. In addition, we have added some outlines on links when they are focused along with a button reset class for form elements. All of these should aid in making a better experience when using the keyboard for navigation. Shout out to @jasonli for helping with that.

60fps
After reading an excellent blog post about how to make your box-shadow animations more performant, I had to refactor the shadow-hover class a bit. It should now be a bit smoother and run at 60fps.
The Future

We’re working on (a bunch of things) but a huge priority is building a custom generator for everyone to use. It will allow you to set your own colors, type scale, media queries, and more to generate your own version of tachyons. It seems that changing the values of tachyons is proving to be a painpoint and we definitely don’t want it to be. Hopefully we’ll have something soon!

Cheers.

The Tachyons Team
Source code(tar.gz)
Source code(zip)
4.3.0(Sep 7, 2016)
4.3.0

New features

Aspect ratios

Added a bunch of aspect ratios for fluid embeds. You can now choose between

1:1 Square

6:4

4:6

8:5

5:8

4:3

3:4

16:9

9:16

7:5

5:7

Allows you to make things like this where you don't know each image is the same size but you know the desired aspect ratio: http://tachyons.io/components/collections/movies/index.html

border-colors.css has more comments!

Added some more comments to the border-colors file. Makes it more consistent with the rest of the docs.

Athelas is so gorgeous

Athelas is pretty great and it's a system font on mac so I added it to the available font-family classes. I've recently been redesigning http://mrmrs.io/writing with it. I definitely stole the idea from @Jxnblk

Bugs

Ugh bugs. I thought I fixed something. It doesn't seem I did. NOW we should have some smooth animations with the grow class. Fingers crossed.
Source code(tar.gz)
Source code(zip)
4.2.1(Sep 5, 2016)

This patch fixes a small bug in class naming and also adds comments to the css partials in the src/ directory.

After making another pass through the source code I was horrified to find how many glaring inconsistencies there were in the code comments for each module. Especially regarding naming systems. It never ceases to amaze me how bad past me is at writing code.

In an effort to not have poorly documented code I woke up this morning, made some coffee, and tried to make the comments more clear and more consistent. They aren't perfect yet. But they are less glaringly awful. I hope.

Bug fix

There were two different classes called striped--moon-gray which is very silly because they were set to different values. So that has been fixed. No more duplicative classes and the class striped--light-gray has been added in as originally intended.

4.3 news

Next up I'll be adding some more table striping utilities along with some additional aspect ratios used for fluid embeds.

Cheers.
Source code(tar.gz)
Source code(zip)
v4.2.0(Sep 1, 2016)

Without a doubt this is my favorite release ever. We fixed a couple of bugs and also added some new goodness.

Additions

#####_debug-grid.css Added some classes to help enable lining things up. If you place the .grid-debug class on an element you'll get an 8px grid on the background with a slightly transparent blue line. To get a 16px grid use the class .grid-debug-16

8px grid

16px grid

vh units

Added some classes for setting the height of the element based off of the screen height as opposed to the height of the parent. You can now use vh-100, vh-75, vh-50, or vh-25 to set the height of an element to 100, 75, 50, or 25% of the screen height. Shout out to @yoshuawuyts for the recommendation.

outlines

You can now place a 1px outline on an element with the class="outline" it will be set to the currentColor of the element.

line-height

Made some slight tweaks to line-height values. lh-copy is now set to 1.5 and lh-title is set to 1.25. This will hopefully help people worried about baseline grids a little bit.

pill shaped links / buttons

Added a class called br-pill that makes things look like pills with a border-radius of 9999px. Shout out to @matthewmueller for getting this in.

Bug Fixes

Animation fix

The .glow class was not animating properly. This has been fixed.

Filename consistency

Renamed _debug_children.css to _debug-children.css to follow the naming pattern of the other partials

Until next time

I think that is about it. Thanks to everyone who has given feedback and helped out with docs fixes. It's all really helpful.
Source code(tar.gz)
Source code(zip)
4.1.3(Aug 31, 2016)
4.1.3

They're back

We accidentally were not including the images partial or the z-index partial in the main build. The 4.1.3 fixes this 100% completely embarrassing mistake by including them back in.

If you use the CDN link you can find the new version at

https://npmcdn.com/[email protected]/css/tachyons.min.css
Source code(tar.gz)
Source code(zip)
v4.1.1(Aug 24, 2016)
Originally tachyons was a monolithic repo. Eventually along the way I started splitting things up onto NPM as when I went to work at other places sometimes I would only need a handful of modules and if a clients build system allowed for it I could just grab them quickly from npm and add them to the outputted css. I was separately maintaining publishing the mono repo and the modules though.

When @johnotander and I started working on v4 one of the things we talked about was having a single source of truth and making it easier to keep everything in sync. So we would install through npm and then copy files over to source. This then caused a new problem, each module needed to be fully encapsulated - so when we would copy them from node_modules to src - we left in a lot of duplicated variables and custom media props. As Tachyons is all about immutability - this seems not the best :)

In practice this caused us to have a bug where the custom media props in our npm modules were being overridden somewhere and this was largely invisible to everyone.

So in the interest of simplicity, we've removed all the tachyons modules as dependencies and have removed the function of copying over the modules from the node_modules directory. Instead we'll just maintain this as an encapsulated project. I think it's more simple this way and I don't think the added complexity was worth keeping the npm copy function around for this version of the project.

TL;DR THE BIG CHANGES

We've removed all the duplicate variable and custom-media-prop declarations.

We removed tachyons modules as dev dependencies

Note: Nothing has changed in the outputted css besides some comments. As no new features were added, this is really just a patch to fix a bug.

Source code(tar.gz)
Source code(zip)
v4.1.0(Aug 19, 2016)
4.1.0

Since we launched v4 we've had a number of small bug fixes and a few slight additions to some modules. Largely things are still the same but there are a couple of new things to play with.

Changes

The flex box module now supports display: inline-flex and flex-direction: row

Hovers now includes a shadow on hover

Hover module now duplicates all hover styles for focus as well #a11y

There was a file in src called _gradients.css that should not have been there so it was deleted. It wasn't compiled into the css so you shouldn't notice any changes.

License has changed to ISC

Removed duplicate flexbox dependency declaration in package.json

Updated comments in flex box module because apparently I forgot to add notes on the media query extensions

More to come soon. We've started working on v5 which won't be too much of a big change. The breaking part is that we are changing media queries. Right now -ns covers both the -m and -l range. -m is a scoped media query that cuts off when large kicks in. We're going to change it so that there aren't any max-widths in the media queries at all and everything will be completely min-width based. It's the difference between:

v4

@custom-media --breakpoint-not-small screen and (min-width: 30em); @custom-media --breakpoint-medium screen and (min-width: 30em) and (max-width: 60em); @custom-media --breakpoint-large screen and (min-width: 60em);

v5

@custom-media --breakpoint-medium screen and (min-width: 30em); @custom-media --breakpoint-large screen and (min-width: 60em);

We're also going to remove the copy from npm to src functionality in the mono repo. We'll still keep all the modules on npm individually, but we'll just manage this as it's own package. After some user testing / observation / feedback / and dogfooding - we're going to try and make this even more stripped back in simple in regards to the infrastructure. v5 won't likely include any fancy new features. Just some refined goodness as we continue to learn. We'll keep you updated.

Cheers,

@mrmrs & @johnotander
Source code(tar.gz)
Source code(zip)
v4.0.1(Jul 5, 2016)
After a lot of fun chats and hard work with @johnotander - we're excited to pull tachyons out of beta and officially release v4.

A few notable changes:

Reintroduces colors

Flexbox support

More typographic utilities

Some changes to class names

Source code(tar.gz)
Source code(zip)