What is Skeleton?
Skeleton is a lightweight CSS framework that aims to provide a basic structure for web development without the overhead of larger frameworks. It’s designed to be a starting point rather than a UI kit, offering styles for standard HTML elements and a responsive grid.
Features of Skeleton
- Responsive Grid: Skeleton includes a simple grid system that adapts to the screen size of mobile phones, tablets, and desktops.
- Base Styles: Provides foundational styles for standard HTML elements like typography, buttons, forms, and lists.
- Lightweight: The entire framework is around 400 lines of code, which makes it extremely fast to load and easy to customize.
Documentation and Installation
The documentation for Skeleton is straightforward and easy to follow. To get started with Skeleton, you can download the CSS file directly from the Skeleton website and include it in your HTML file.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css">
Popular Third-Party Add-ons or Libraries
While Skeleton itself is quite bare-bones, the community has developed various add-ons to extend its capabilities. However, due to its minimalistic nature, the ecosystem is not as extensive as that of larger frameworks.
What is Tachyons?
Tachyons is another CSS framework that focuses on functional, atomic CSS. It provides a set of small, single-purpose classes that can be combined to create a variety of designs without writing custom CSS.
Features of Tachyons
- Atomic Classes: Tachyons is built around the idea of using small, reusable classes that do one thing well.
- Responsiveness: It includes responsive modifiers that make it easy to adjust styles based on the device’s screen size.
- Performance: Tachyons is designed to be as performant as possible, with a small file size and classes that can be reused throughout a project.
Documentation and Installation
Tachyons has comprehensive documentation that covers all the classes and how to use them effectively. To install Tachyons, you can either download the CSS file from the Tachyons GitHub repository or link to it directly in your HTML.
<link rel="stylesheet" href="https://unpkg.com/tachyons/css/tachyons.min.css">
Popular Third-Party Add-ons or Libraries
Tachyons doesn’t have a wide range of third-party add-ons, but its modular nature means that it can be easily integrated with other tools and frameworks. One popular approach is to use it in combination with component libraries like React or Vue.js for a functional, scalable architecture.
Code Samples: Skeleton
Let’s look at some basic examples of how to use Skeleton in your projects. Here we’ll create a simple responsive layout with a navigation bar, a main content section, and a footer.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Skeleton Example</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css">
</head>
<body>
<div class="container">
<header class="row">
<div class="twelve columns">
<h1>My Website</h1>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</div>
</header>
<div class="row">
<div class="eight columns">
<h2>Main Content</h2>
<p>This is the main content area.</p>
</div>
<div class="four columns">
<h2>Sidebar</h2>
<p>This is the sidebar content.</p>
</div>
</div>
<footer class="row">
<div class="twelve columns">
<p>Footer Content</p>
</div>
</footer>
</div>
</body>
</html>
In this code sample, we use Skeleton’s grid system to create a layout with a header, main content area, sidebar, and footer. The container class provides a centered wrapper for the content, and the row and columns classes define the grid layout.
Code Samples: Tachyons
Now we’ll examine how to achieve a similar layout using Tachyons. Tachyons’ atomic classes give you fine-grained control over each element’s styling, allowing for a highly customizable design with minimal CSS.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tachyons Example</title>
<link rel="stylesheet" href="https://unpkg.com/tachyons/css/tachyons.min.css">
</head>
<body class="sans-serif">
<header class="bg-black-90 fixed w-100 ph3 pv3 pv4-ns ph4-m ph5-l">
<nav class="f6 fw6 ttu tracked">
<a class="link dim white dib mr3" href="#" title="Home">Home</a>
<a class="link dim white dib mr3" href="#" title="About">About</a>
<a class="link dim white dib" href="#" title="Contact">Contact</a>
</nav>
</header>
<section class="pa3 pa5-ns">
<article class="hide-child relative ba b--black-20 mw5 center">
<img src="http://placekitten.com/g/600/300" class="db" alt="Photo of a kitten looking menacing.">
<div class="pa2 bt b--black-20">
<a class="f6 db link dark-blue hover-blue" href="#" title="Title">Title</a>
<p class="f6 gray mv1">Subtitle</p>
<a class="link tc ph3 pv1 db bg-animate bg-dark-blue hover-bg-blue white f6 br1" href="#" title="Call to Action">Call to Action</a>
</div>
</article>
</section>
<footer class="pv4 ph3 ph5-m ph6-l mid-gray">
<small class="f6 db tc">© 2023 <b class="ttu">My Website Inc</b>., All Rights Reserved</small>
<div class="tc mt3">
<a href="/language/" title="Language" class="f6 dib ph2 link mid-gray dim">Language</a>
<a href="/terms/" title="Terms" class="f6 dib ph2 link mid-gray dim">Terms of Use</a>
<a href="/privacy/" title="Privacy" class="f6 dib ph2 link mid-gray dim">Privacy</a>
</div>
</footer>
</body>
</html>
In this Tachyons example, we create a fixed navigation bar using background color, padding, and typography classes. The section element showcases a card component with an image, title, subtitle, and call-to-action button, demonstrating Tachyons’ utility classes for border, padding, typography, and state-based styles like hover effects. The footer includes legal information and links styled with typography and spacing classes.
Customization and Flexibility
One of the main differences between Skeleton and Tachyons lies in their approach to customization. Skeleton provides a basic structure that you can build upon, which means you’ll likely write additional CSS to achieve the exact design you want. Tachyons, on the other hand, encourages you to use its existing classes in various combinations to style your elements, minimizing the need for custom CSS.
Customizing Skeleton
With Skeleton, customization typically involves adding your own styles on top of the framework’s base CSS. Because Skeleton is so minimal, it doesn’t impose many design decisions, making it easy to override styles without worrying about specificity issues.
Customizing Tachyons
Tachyons takes a different approach. Instead of writing new CSS rules, you combine existing atomic classes to achieve the desired effect. If you need to introduce new styles, Tachyons recommends following its atomic design principles and creating additional utility classes that can be reused throughout your project.
Pros and Cons
Skeleton Pros:
- Extremely lightweight and simple to learn.
- Offers a clean slate for designers who want to create their own unique designs.
- Responsive grid system is easy to understand and use.
Skeleton Cons:
- Limited to basic styles and components, requiring additional CSS for more complex designs.
- Smaller community and fewer resources compared to larger frameworks.
Tachyons Pros:
- Highly modular and reusable classes promote a DRY (Don’t Repeat Yourself) approach to styling.
- Encourages a utility-first mindset, which can lead to faster development times for experienced users.
- Responsive modifiers and state-based classes provide powerful tools for building responsive, interactive UIs.
Tachyons Cons:
- The utility-first approach can lead to verbose HTML with many class names, which some developers may find cluttered or difficult to read.
- There is a learning curve to effectively using the wide array of utility classes available.
Conclusion
Skeleton and Tachyons are both excellent choices for developers who prefer a lightweight, minimalist CSS framework. Skeleton is ideal for those who want a bare-bones starting point and are comfortable writing additional CSS, while Tachyons caters to developers who embrace a utility-first approach and want to minimize custom CSS. Your choice between the two will depend on your project requirements, design philosophy, and personal preference for writing and maintaining CSS.
Both frameworks are well-documented and actively maintained, and they can be easily integrated into your development workflow. Whether you choose Skeleton for its simplicity and clean slate or Tachyons for its composability and performance, you’ll benefit from a streamlined development process that allows you to focus on creating beautiful, responsive designs.