This information is right here that will help you shortly evaluate the options and syntax of the Tachyons utility-first CSS framework with these of Stylify, and provide you with an concept of the best way to migrate from Tachyons to Stylify.
Introduction
Tachyons is a framework that permits you to create quick loading, extremely readable, and 100% responsive interfaces with as little CSS as potential.
Stylify CSS is a library that makes use of native CSS-like selectors coloration:blue, width:640px, margin:0_auto together with variables, parts, customized selectors to generate optimized CSS dynamically primarily based on what you write.
Selectors and CSS Utilities
Tachyons gives plenty of versatile CSS utilities for properties like coloration, spacing, typography, visibility, and so on:
<div class="flex">
<div class="define w-25 pa3 mr2">
<code>1</code>
</div>
</div>
Stylify makes use of CSS-like utilities, that can be utilized instantly inside the class attribute. There aren’t any shortcuts by default and selectors can not include an area due to the additional optimization:
<div class=" coloration:blue font-weight:daring md:coloration:pink md&&panorama:font-size:32px minw123px:font-size:123px "></div>
When some selectors have the identical pseudo-class and even media question, you'll be able to group them like this:
<div class=" hover:{coloration:blue;text-decoration:underline} md:hover:{remodel:scale(1.1);left:4px} "></div>
International Selectors
I couldn't discover any data suggesting that Tachyons gives one thing like dynamic International Selectors.
Stylify gives customized selectors with which you'll model parts globally. These selectors may be outlined instantly inside the class attribute or within the world config or in a file the place they're used utilizing content material choices.
Instance with the category attribute:
<div class="[.button_.icon]{font-size:14px}"> <button class=" [.icon]{coloration:#fff;border-radius:12px} [&+button]{margin-left:24px} "> <i class="icon"></i> </button> <button></button> <div>
The syntax sample within the class attribute seems like this:
[css selectors]{stylify selectors cut up by ;}
The _ (underscore) is used as a substitute of house in each CSS and Stylify selectors and the & character at all times refers back to the present factor.
The identical code however within the world config would appear like this:
const compilerConfig = { customSelectors: { '.buttons-wrapper .button .icon': 'font-size:14px', '.button': ` .icon { coloration:#fff border-radius:12px } & + button { margin-left:24px } `, } }
When defining `customSelectors` within the world config on by way of content material choices, the syntax allows you to use a nesting characteristic. The & characters refers back to the higher stage like within the SCSS.
Utilization of the worldwide config:
<div class="buttons-wrapper"> <button class="button"> <i class="icon"></i> </button> <button></button> <div>
Parts
Tachyons would not have any configuration API for parts.
Nonetheless, it has a ready set of copy&paste parts on its web site you need to use in your challenge and you may configure them in configurator talked about on their web site:
<div class="ph3">
<h1 class="f6 fw6 ttu tracked">Fundamental button</h1>
<a class="f6 hyperlink dim ph3 pv2 mb2 dib white bg-black" href="#0">Button Textual content</a>
</div>
<article class="mw5 mw6-ns middle pt4">
<div class="aspect-ratio aspect-ratio--16x9 mb4">
<div class="aspect-ratio--object cowl"></div>
</div>
</article>
Stylify would not present any predefined CSS Parts by default. Nonetheless, it gives two methods to outline them and there's a set of copy&paste Headless Parts you need to use in your challenge.
Parts may be configured in a file (utilizing content material choices), the place they're used, or globally inside a config.
Instance with the configuration inside a file. The content material between stylify-components expects javascript object with out surrounding brackets:
<h1 class="title"></h1>
Instance in a world compiler config:
const compilerConfig = { parts: { title: 'coloration:blue font-weight:daring md:coloration:pink' } };
Utilization:
<h1 class="title"></h1>
When defining element, you can too use nesting syntax like in SCSS. This works in a world config and in addition within the content material choices:
const compilerConfig = { parts: { button: ` coloration:black font-weight:daring &:hover { coloration:gray } &--red { coloration:pink &:hover { coloration: darkred } } ` } };
Configuration, Customization and Variables
Tachyons may be configured instantly by modifying downloaded CSS recordsdata.
You may also use tachyons with CSS variables and outline your personal sizes, colours, and so on.
They've a video on their web site on how to take action.
In Stylify, there may be nothing like a "theme", neither prolong part in config. There are solely variables.
Variables may be outlined in two methods in Stylify. In a world config or inside a file the place they're used by way of content material choices.
Instance with world config:
const compilerConfig = { variables: { major: '#000', secondary: '#eee', titleFontSize: '24px', shadow: '0 2px 3px #000' } }
Variables will also be outlined primarily based on media question:
const compilerConfig = { variables: { darkish: { blue: 'lightblue' }, md: { fontSize: 24px }, 'minw640px': { fontSize: 32px }, '.darkish': { blue: 'lightblue' }, ':root[data-theme="dark"]': { blue: 'lightblue' } } }
Instance with content material choices:
<div class="coloration:$major"></div>
Combine Stylify into your favourite software
Stylify can be utilized in numerous instruments. Choose your favourite software and begin utilizing Stylify CSS in a minute.
Get Began
Pace up growth with ready Headless CSS Parts
Copy&Paste, unstyled parts impressed by the Materials Design V3.
