Tachyons: Functional CSS for Humans
Tachyons is a functional CSS framework that aims to create fast-loading, highly readable, and 100% responsive interfaces with as little CSS as possible. It embraces the concept of functional CSS, which means that it provides a set of small, composable classes that can be combined to build any design directly in your markup.
Key Features of Tachyons
- Atomic Classes: Tachyons is built on the principle of atomic CSS, where each class does one thing and does it well.
- Responsiveness: The framework includes responsive classes that make it easy to design for different screen sizes.
- Performance: Tachyons is designed for performance, with a small footprint and minimal style declarations.
- Customization: It is highly customizable, allowing developers to create their own Tachyons build with just the styles they need.
Documentation and Installation
The Tachyons documentation is thorough and provides a clear guide on how to get started. You can find the documentation here.
To install Tachyons, you can either download the minified CSS file from the Tachyons GitHub repository or include it in your project via a CDN:
<link rel="stylesheet" href="https://unpkg.com/tachyons/css/tachyons.min.css">
Popular Addons and Libraries
While Tachyons itself is quite comprehensive, there are third-party addons that extend its functionality:
- Tachyons-Extra: A collection of additional classes for more complex components.
- Tachyons-Sass: A Sass port of Tachyons for those who prefer working with Sass variables and mixins.
Code Sample
Here is an example of how you might use Tachyons to create a responsive card component:
<article class="mw5 center bg-white br3 pa3 pa4-ns mv3 ba b--black-10">
<div class="tc">
<img src="avatar.jpg" class="br-100 h3 w3 dib" title="Photo of a kitty staring at you">
<h1 class="f4">Kitty Cat</h1>
<hr class="mw3 bb bw1 b--black-10">
</div>
<p class="lh-copy measure center f6 black-70">
Meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow.
</p>
</article>
Primer: The CSS Framework Behind GitHub
Primer is the CSS framework developed by GitHub for its own interface. It’s designed to be modular and scalable, with a focus on the principles and guidelines that underpin GitHub’s UI.
Key Features of Primer
- Modularity: Primer is built as a collection of packages, making it easy to include only what you need.
- Systematic Design: It follows a systematic design approach, ensuring consistency across GitHub’s UI.
- Accessibility: Primer is designed with accessibility in mind, aiming to meet WCAG 2.0 standards.
- Community: As it is used by GitHub, it has a strong community and is regularly updated.
Documentation and Installation
Primer’s documentation is comprehensive and well-organized, making it easy to find the information you need. You can access the documentation here.
To install Primer, you can use npm:
npm install --save primer
Or, include it in your project via a CDN:
<link rel="stylesheet" href="https://unpkg.com/primer/build/build.css">
Popular Addons and Libraries
Primer does not have as many third-party addons as some other frameworks, but it does offer several official packages for extended functionality:
- Primer Components: React components that implement Primer’s design system.
- Octicons: A scalable set of icons handcrafted with <3 by GitHub.
Code Sample
Here’s an example of using Primer to create a simple navigation bar:
<nav class="UnderlineNav" aria-label="Foo bar">
<div class="UnderlineNav-body">
<a href="#url" class="UnderlineNav-item selected" aria-current="page">Item 1</a>
<a href="#url" class="UnderlineNav-item">Item 2</a>
<a href="#url" class="UnderlineNav-item">Item 3</a>
</div>
</nav>
In the first half of this article, we’ve introduced Tachyons and Primer, outlined their key features, and provided documentation references, installation instructions, popular addons, and code samples. In the following section, we will delve deeper into customization options, community support, and real-world use cases to further distinguish between these two CSS frameworks.
Customization Options
Both Tachyons and Primer offer customization options, but they approach it in different ways due to their underlying philosophies.
Tachyons Customization
Tachyons encourages a functional and atomic approach to styling, which inherently allows for a high degree of customization through the combination of utility classes. However, if developers wish to customize the styles further, they can:
- Modify the source CSS files or variables before building Tachyons.
- Use tools like tachyons-custom, which provide a starting point for creating a custom version of Tachyons.
- Extend the framework by adding custom classes in a separate stylesheet.
Primer Customization
Primer is designed to be used as-is for the most part, reflecting GitHub’s design language. However, customization is possible by:
- Overriding Primer’s CSS variables in your own stylesheets.
- Using the Primer Utilities for spacing, typography, and more, to adjust the design as needed.
- Selecting specific Primer modules to include in your project, thus reducing the overall footprint.
Community Support and Ecosystem
The community and ecosystem surrounding a CSS framework can be a significant factor in its adoption and long-term viability.
Tachyons Community
Tachyons has a dedicated community of developers who appreciate its functional approach. The community contributes by:
- Sharing custom builds and configurations.
- Creating plugins and extensions that add new functionality.
- Providing support through forums and chat channels.
Primer Community
Being developed by GitHub, Primer benefits from a large community of developers who use and contribute to the framework. The community offers:
- Regular updates and improvements to the framework.
- Extensive documentation and use-case examples from GitHub itself.
- A platform for reporting issues and contributing through GitHub repositories.
Real-World Use Cases
To understand how Tachyons and Primer perform in real-world scenarios, let’s look at some use cases.
Tachyons in Action
Tachyons is well-suited for projects where speed and performance are critical. It’s ideal for:
- Prototyping designs quickly by composing utility classes.
- Creating highly responsive designs with minimal effort.
- Projects where CSS file size needs to be kept to a minimum.
Primer in Action
Primer shines in scenarios where a systematic and scalable design system is required. It’s particularly useful for:
- Large projects that need a consistent UI across many pages and components.
- Teams that require a shared design language for collaboration.
- Developers looking for a framework that adheres to accessibility standards.
Conclusion
Both Tachyons and Primer offer unique approaches to styling web applications. Tachyons, with its functional and atomic philosophy, provides a fast and highly composable framework that encourages the creation of designs directly in HTML. Primer, on the other hand, offers a more traditional but modular approach, reflecting the systematic design principles used by GitHub.
Choosing between Tachyons and Primer will depend on your project’s specific needs, your team’s workflow, and your personal preference for styling methodologies. Whether you prioritize performance and minimalism or systematic design and modularity, both frameworks have proven to be robust and reliable choices for modern web development.
Before making a decision, consider experimenting with both frameworks to get a sense of their strengths and how they fit into your development process. Ultimately, the right CSS framework is the one that aligns best with your project goals and helps you build effective, maintainable, and scalable user interfaces.