A truly versatile CSS toolkit.
Made with ❤️ for HTML & CSS programmers who love lightweight, clean, reusable and scalable code. Blyth will allow you to organise properties every site has like fonts, colours, spacing, sizing and basically, anything you want.
- 1
- 2
- 3
<div class="[ card ] [ color-red ]">
<h2>Your heading here</h2>
</div>
.card {
background: var(--color-red);
}
Create a CSS design system.
Blyth can help you generate design tokens to keep propertes such as spacing, typography and colour consistent & reusable. They’re also available as both CSS variables and HTML classes. Wicked.
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
const tailwindCSSVariables = require('@bly-th/tailwind-css-variables');
const tailwindCustomUtilities = require('@bly-th/tailwind-custom-utilities');
module.exports = {
content: ["./src/**/*.njk"],
corePlugins: {
preflight: false,
},
experimental: {
optimizeUniversalDefaults: true
},
theme: {
colors: {
light: '#ffffff',
'dark-background': '#000',
dark: '#1F2021',
'dark-elevated': '#22262B',
green: '#61C453',
amber: '#F4BD4E',
red: '#ED695F',
},
fontFamily: {
heading: ["Work Sans", "sans-serif"],
base: ["Fira Code", "monospace"],
},
fontSize: {
/* @link https://utopia.fyi/type/calculator?c=320,16,1.2,1140,20,1.333,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */
200: 'clamp(0.69rem, calc(0.69rem + 0.02vw), 0.70rem)',
300: 'clamp(0.83rem, calc(0.79rem + 0.20vw), 0.94rem)',
400: 'clamp(1.00rem, calc(0.90rem + 0.49vw), 1.25rem)',
500: 'clamp(1.20rem, calc(1.02rem + 0.91vw), 1.67rem)',
600: 'clamp(1.44rem, calc(1.14rem + 1.52vw), 2.22rem)',
700: 'clamp(1.73rem, calc(1.25rem + 2.40vw), 2.96rem)',
800: 'clamp(2.07rem, calc(1.34rem + 3.65vw), 3.95rem)',
900: 'clamp(2.49rem, calc(1.41rem + 5.41vw), 5.26rem)',
},
screens: {
'sm': '640px',
'md': '768px',
'lg': '1024px',
'xl': '1280px',
'2xl': '1536px'
},
spacing: {
/* @link https://utopia.fyi/space/calculator?c=320,21,1.2,1140,24,1.25,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */
200: 'clamp(0.31rem, calc(0.14rem + 0.85vw), 0.75rem)',
300: 'clamp(0.69rem, calc(0.52rem + 0.85vw), 1.13rem)',
400: 'clamp(1.00rem, calc(0.80rem + 0.98vw), 1.50rem)',
500: 'clamp(1.31rem, calc(0.95rem + 1.83vw), 2.25rem)',
600: 'clamp(2.00rem, calc(1.61rem + 1.95vw), 3.00rem)',
700: 'clamp(2.63rem, calc(1.89rem + 3.66vw), 4.50rem)',
800: 'clamp(3.94rem, calc(3.13rem + 4.02vw), 6.00rem)',
900: 'clamp(5.25rem, calc(3.79rem + 7.32vw), 9.00rem)'
}
},
plugins: [
// Generates custom property values from tailwind config
tailwindCSSVariables({
colors: 'color',
spacing: 'size',
fontSize: 'text',
fontFamily: 'font',
fontWeight: 'font',
lineHeight: 'leading',
}),
tailwindCustomUtilities({
spacing: {
name: 'flow-space',
property: '--flow-space',
},
})
]
};
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
- 101
- 102
- 103
- 104
- 105
- 106
- 107
- 108
- 109
- 110
- 111
- 112
- 113
- 114
- 115
- 116
- 117
- 118
- 119
- 120
- 121
- 122
- 123
- 124
- 125
- 126
- 127
- 128
- 129
- 130
- 131
- 132
- 133
- 134
- 135
- 136
- 137
- 138
- 139
- 140
- 141
:root {
--color-light: #ffffff;
--color-dark-background: #000;
--color-dark: #1F2021;
--color-dark-elevated: #22262B;
--color-green: #61C453;
--color-amber: #F4BD4E;
--color-red: #ED695F;
--size-200: clamp(0.31rem, calc(0.14rem + 0.85vw), 0.75rem);
--size-300: clamp(0.69rem, calc(0.52rem + 0.85vw), 1.13rem);
--size-400: clamp(1.00rem, calc(0.80rem + 0.98vw), 1.50rem);
--size-500: clamp(1.31rem, calc(0.95rem + 1.83vw), 2.25rem);
--size-600: clamp(2.00rem, calc(1.61rem + 1.95vw), 3.00rem);
--size-700: clamp(2.63rem, calc(1.89rem + 3.66vw), 4.50rem);
--size-800: clamp(3.94rem, calc(3.13rem + 4.02vw), 6.00rem);
--size-900: clamp(5.25rem, calc(3.79rem + 7.32vw), 9.00rem);
--text-200: clamp(0.69rem, calc(0.69rem + 0.02vw), 0.70rem);
--text-300: clamp(0.83rem, calc(0.79rem + 0.20vw), 0.94rem);
--text-400: clamp(1.00rem, calc(0.90rem + 0.49vw), 1.25rem);
--text-500: clamp(1.20rem, calc(1.02rem + 0.91vw), 1.67rem);
--text-600: clamp(1.44rem, calc(1.14rem + 1.52vw), 2.22rem);
--text-700: clamp(1.73rem, calc(1.25rem + 2.40vw), 2.96rem);
--text-800: clamp(2.07rem, calc(1.34rem + 3.65vw), 3.95rem);
--text-900: clamp(2.49rem, calc(1.41rem + 5.41vw), 5.26rem);
--font-heading: Work Sans,sans-serif;
--font-base: Fira Code,monospace;
--font-thin: 100;
--font-extralight: 200;
--font-light: 300;
--font-normal: 400;
--font-medium: 500;
--font-semibold: 600;
--font-bold: 700;
--font-extrabold: 800;
--font-black: 900;
--leading-3: .75rem;
--leading-4: 1rem;
--leading-5: 1.25rem;
--leading-6: 1.5rem;
--leading-7: 1.75rem;
--leading-8: 2rem;
--leading-9: 2.25rem;
--leading-10: 2.5rem;
--leading-none: 1;
--leading-tight: 1.25;
--leading-snug: 1.375;
--leading-normal: 1.5;
--leading-relaxed: 1.625;
--leading-loose: 2
}
.static {
position: static
}
.grid {
display: grid
}
.hidden {
display: none
}
.max-w-prose {
max-width: 65ch
}
.grow {
flex-grow: 1
}
.bg-amber {
--tw-bg-opacity: 1;
background-color: rgb(244 189 78 / var(--tw-bg-opacity))
}
.bg-dark-background {
--tw-bg-opacity: 1;
background-color: rgb(0 0 0 / var(--tw-bg-opacity))
}
.bg-dark-elevated {
--tw-bg-opacity: 1;
background-color: rgb(34 38 43 / var(--tw-bg-opacity))
}
.bg-green {
--tw-bg-opacity: 1;
background-color: rgb(97 196 83 / var(--tw-bg-opacity))
}
.bg-red {
--tw-bg-opacity: 1;
background-color: rgb(237 105 95 / var(--tw-bg-opacity))
}
.p-400 {
padding: clamp(1.00rem, calc(0.80rem + 0.98vw), 1.50rem)
}
.pb-700 {
padding-bottom: clamp(2.63rem, calc(1.89rem + 3.66vw), 4.50rem)
}
.pb-900 {
padding-bottom: clamp(5.25rem, calc(3.79rem + 7.32vw), 9.00rem)
}
.pt-700 {
padding-top: clamp(2.63rem, calc(1.89rem + 3.66vw), 4.50rem)
}
.pt-900 {
padding-top: clamp(5.25rem, calc(3.79rem + 7.32vw), 9.00rem)
}
.text-center {
text-align: center
}
.font-base {
font-family: Fira Code, monospace
}
.text-200 {
font-size: clamp(0.69rem, calc(0.69rem + 0.02vw), 0.70rem)
}
.text-300 {
font-size: clamp(0.83rem, calc(0.79rem + 0.20vw), 0.94rem)
}
.text-400 {
font-size: clamp(1.00rem, calc(0.90rem + 0.49vw), 1.25rem)
}
@media (min-width: 1024px) {
.lg\:grid-cols-3 {
grid-template-columns: repeat(3, minmax(0, 1fr))
}
}
Scaffold out CSS utilities.
How often do you find yourself using the same code across projects? CSS resets, wrappers and small accessbility helpers like visually hidden? Blyth can generate these for your project with just one command.
blyth utility add reset
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
/* Box sizing rules */
*,
*::before,
*::after {
box-sizing: border-box;
}
/* Remove default padding */
ul[class],
ol[class] {
padding: 0;
}
/* Remove default margin */
body,
h1,
h2,
h3,
h4,
p,
ul[class],
ol[class],
figure,
blockquote,
dl,
dd {
margin: 0;
}
/* Set core body defaults */
body {
min-height: 100vh;
scroll-behavior: smooth;
text-rendering: optimizeSpeed;
line-height: 1.5;
}
/* Remove list styles on ul, ol elements with a class attribute */
ul[class],
ol[class] {
list-style: none;
}
/* A elements that don't have a class get default styles */
a:not([class]) {
text-decoration-skip-ink: auto;
}
/* Make images easier to work with */
img {
max-width: 100%;
display: block;
}
/* Natural flow and rhythm in articles by default */
article > * + * {
margin-top: 1em;
}
/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
font: inherit;
}
/* Blur images when they have no alt attribute */
img:not([alt]) {
filter: blur(10px);
}
/* Remove all animations and transitions for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
* {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
It’s platform agnostic, too.
Blyth is just a toolkit. It takes a bunch of config, and outputs CSS files to use in any type of project, be it a static site, React build or Next JS application. You just need to set the project config in your package.json file. This means the CSS you write across all your projects can be consistent, and versatile. Tis’ beautiful.
{
"blyth": {
"tokensOutputPath": "src/_includes/css/global/tokens.css",
"utilityOutputPath": "src/_includes/css/utility",
"compositionOutputPath": "src/_includes/css/composition"
},
}