Functional css for humans

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/[email protected]/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...

Sponsors

Development of Tachyons is supported by

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 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:

    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?

    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.

    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

    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?

    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

    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?

    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:

    1. 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.
    2. 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).
    3. 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.
    4. 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?

    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

    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

    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

    Update seanoshea.me to https

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

    🏛 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

    ⚠️ 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 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

    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 :

    Screen Shot 2022-10-03 at 11 11 56 PM

    dev tools return a 404 as shown.

    opened by anvarjamalsaifi 1
Releases(4.9.1)
  • 4.9.1(Jan 1, 2018)

  • v4.9.0(Oct 26, 2017)

  • 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)

    giphy

    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:

    1. What is the absolute fastest you can get an interface to render
    2. 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.

    giphy-75

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

    giphy-74

    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

    screen shot 2016-09-17 at 4 08 14 pm

    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
    screen shot 2016-09-15 at 4 20 28 pm
    After
    screen shot 2016-09-15 at 4 22 43 pm

    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 screen shot 2016-09-07 at 4 56 15 pm

    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
    screen shot 2016-09-01 at 5 39 03 pm
    16px grid
    screen shot 2016-09-01 at 5 45 05 pm

    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.

    screen shot 2016-09-01 at 7 10 51 pm

    Bug Fixes

    Animation fix

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

    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

    giphy-43

    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)

    giphy-24

    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)
Reseter.css - A Futuristic CSS Reset / CSS Normalizer

Reseter.css A CSS Reset/Normalizer Reseter.css is an awesome CSS reset for a website. It is a great tool for any web designer. Reseter.css resets all

Krish Dev DB 1.1k Jan 2, 2023
Spectre.css - A Lightweight, Responsive and Modern CSS Framework

Spectre.css Spectre.css is a lightweight, responsive and modern CSS framework. Lightweight (~10KB gzipped) starting point for your projects Flexbox-ba

Yan Zhu 11.1k Jan 8, 2023
Framework-agnostic CSS-in-JS with support for server-side rendering, browser prefixing, and minimum CSS generation

Aphrodite Framework-agnostic CSS-in-JS with support for server-side rendering, browser prefixing, and minimum CSS generation. Support for colocating y

Khan Academy 5.3k Jan 1, 2023
CSS Boilerplate / Starter Kit: Collection of best-practice CSS selectors

Natural Selection Natural Selection is a CSS framework without any styling at all. It is just a collection of selectors that can be used to define glo

FrontAid CMS 104 Dec 8, 2022
Source code for Chrome/Edge/Firefox/Opera extension Magic CSS (Live editor for CSS, Less & Sass)

Live editor for CSS, Less & Sass (Magic CSS) Extension Live editor for CSS, Less & Sass (Magic CSS) for Google Chrome, Microsoft Edge, Mozilla Firefox

null 210 Dec 13, 2022
Easily create css variables without the need for a css file!

Tailwind CSS Variables This plugin allows you to configure CSS variables in the tailwind.config.js Similar to the tailwindcss configurations you are u

Mert Aşan 111 Dec 22, 2022
Cooltipz.css - A highly customisable, minimal, pure CSS tooltip library

Cooltipz.css - Cool tooltips Cool customisable tooltips made from pure CSS Lightweight • Accessible • Customisable • Simple Cooltipz.css is a pure CSS

Jack Domleo 110 Dec 24, 2022
micro-library for CSS Flexbox and CSS Grid

SpeedGrid micro-library for CSS Flexbox and CSS Grid Overview SpeedGrid dynamically generates inline CSS by specifying the class name. Easy maintenanc

Toshihide Miyake 7 Mar 26, 2022
Data-tip.css - Wow, such tooltip, with pure css!

Notice: hint.css has been much better since I complained about it months ago, so try out its new features instead of this one! data-tip.css Wow, such

EGOIST 117 May 26, 2021
Tiny CSS framework with almost no classes and some pure CSS effects

no.css INTERACTIVE DEMO I am tired of adding classes to style my HTML. I just want to include a .css file and I expect it to style the HTML for me. no

null 96 Dec 10, 2022
The most popular HTML, CSS, and JavaScript framework for developing responsive, mobile first projects on the web.

Bootstrap Sleek, intuitive, and powerful front-end framework for faster and easier web development. Explore Bootstrap docs » Report bug · Request feat

Bootstrap 161k Jan 1, 2023
Modern CSS framework based on Flexbox

Bulma Bulma is a modern CSS framework based on Flexbox. Quick install Bulma is constantly in development! Try it out now: NPM npm install bulma or Yar

Jeremy Thomas 46.6k Dec 31, 2022
A utility-first CSS framework for rapid UI development.

A utility-first CSS framework for rapidly building custom user interfaces. Documentation For full documentation, visit tailwindcss.com. Community For

Tailwind Labs 63.5k Dec 30, 2022
Materialize, a CSS Framework based on Material Design

MaterializeCSS Materialize, a CSS Framework based on material design. -- Browse the docs -- Table of Contents Quickstart Documentation Supported Brows

Alvin Wang 38.8k Jan 2, 2023
Material Design Components in HTML/CSS/JS

Material Design Lite An implementation of Material Design components in vanilla CSS, JS, and HTML. Material Design Lite (MDL) lets you add a Material

Google 32.1k Jan 4, 2023
A set of small, responsive CSS modules that you can use in every web project.

Pure A set of small, responsive CSS modules that you can use in every web project. http://purecss.io/ This project is looking for maintainers to suppo

Pure CSS 22.7k Jan 3, 2023
The CSS design system that powers GitHub

Primer CSS The CSS implementation of GitHub's Primer Design System Migrating ?? If you currently use the primer or primer--prefixed npm packages, plea

Primer 11.6k Jan 3, 2023
A minimalist CSS framework.

A minimalist CSS framework. Why it's awesome Milligram provides a minimal setup of styles for a fast and clean starting point. Just it! Only 2kb gzipp

Milligram 9.9k Jan 4, 2023
Lightweight CSS framework

Material Design CSS Framework MUI is a lightweight CSS framework that follows Google's Material Design guidelines. Use From the CDN: <link href="//cdn

null 4.5k Jan 1, 2023