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. 1
  2. 2
  3. 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. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
  10. 10
  11. 11
  12. 12
  13. 13
  14. 14
  15. 15
  16. 16
  17. 17
  18. 18
  19. 19
  20. 20
  21. 21
  22. 22
  23. 23
  24. 24
  25. 25
  26. 26
  27. 27
  28. 28
  29. 29
  30. 30
  31. 31
  32. 32
  33. 33
  34. 34
  35. 35
  36. 36
  37. 37
  38. 38
  39. 39
  40. 40
  41. 41
  42. 42
  43. 43
  44. 44
  45. 45
  46. 46
  47. 47
  48. 48
  49. 49
  50. 50
  51. 51
  52. 52
  53. 53
  54. 54
  55. 55
  56. 56
  57. 57
  58. 58
  59. 59
  60. 60
  61. 61
  62. 62
  63. 63
  64. 64
  65. 65
  66. 66
  67. 67
  68. 68
  69. 69
  70. 70
  71. 71
  72. 72
  73. 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',
      },
    })
  ]
};

Output

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
  10. 10
  11. 11
  12. 12
  13. 13
  14. 14
  15. 15
  16. 16
  17. 17
  18. 18
  19. 19
  20. 20
  21. 21
  22. 22
  23. 23
  24. 24
  25. 25
  26. 26
  27. 27
  28. 28
  29. 29
  30. 30
  31. 31
  32. 32
  33. 33
  34. 34
  35. 35
  36. 36
  37. 37
  38. 38
  39. 39
  40. 40
  41. 41
  42. 42
  43. 43
  44. 44
  45. 45
  46. 46
  47. 47
  48. 48
  49. 49
  50. 50
  51. 51
  52. 52
  53. 53
  54. 54
  55. 55
  56. 56
  57. 57
  58. 58
  59. 59
  60. 60
  61. 61
  62. 62
  63. 63
  64. 64
  65. 65
  66. 66
  67. 67
  68. 68
  69. 69
  70. 70
  71. 71
  72. 72
  73. 73
  74. 74
  75. 75
  76. 76
  77. 77
  78. 78
  79. 79
  80. 80
  81. 81
  82. 82
  83. 83
  84. 84
  85. 85
  86. 86
  87. 87
  88. 88
  89. 89
  90. 90
  91. 91
  92. 92
  93. 93
  94. 94
  95. 95
  96. 96
  97. 97
  98. 98
  99. 99
  100. 100
  101. 101
  102. 102
  103. 103
  104. 104
  105. 105
  106. 106
  107. 107
  108. 108
  109. 109
  110. 110
  111. 111
  112. 112
  113. 113
  114. 114
  115. 115
  116. 116
  117. 117
  118. 118
  119. 119
  120. 120
  121. 121
  122. 122
  123. 123
  124. 124
  125. 125
  126. 126
  127. 127
  128. 128
  129. 129
  130. 130
  131. 131
  132. 132
  133. 133
  134. 134
  135. 135
  136. 136
  137. 137
  138. 138
  139. 139
  140. 140
  141. 141
  142. 142
  143. 143
  144. 144
  145. 145
  146. 146
: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)
}

.py-900 {
  padding-top: clamp(5.25rem, calc(3.79rem + 7.32vw), 9.00rem);
  padding-bottom: clamp(5.25rem, calc(3.79rem + 7.32vw), 9.00rem)
}

.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

Output

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
  10. 10
  11. 11
  12. 12
  13. 13
  14. 14
  15. 15
  16. 16
  17. 17
  18. 18
  19. 19
  20. 20
  21. 21
  22. 22
  23. 23
  24. 24
  25. 25
  26. 26
  27. 27
  28. 28
  29. 29
  30. 30
  31. 31
  32. 32
  33. 33
  34. 34
  35. 35
  36. 36
  37. 37
  38. 38
  39. 39
  40. 40
  41. 41
  42. 42
  43. 43
  44. 44
  45. 45
  46. 46
  47. 47
  48. 48
  49. 49
  50. 50
  51. 51
  52. 52
  53. 53
  54. 54
  55. 55
  56. 56
  57. 57
  58. 58
  59. 59
  60. 60
  61. 61
  62. 62
  63. 63
  64. 64
  65. 65
  66. 66
  67. 67
  68. 68
  69. 69
  70. 70
  71. 71
  72. 72
  73. 73
  74. 74
  75. 75
  76. 76
  77. 77
  78. 78
  79. 79
  80. 80
  81. 81
  82. 82
  83. 83
  84. 84
  85. 85
  86. 86
  87. 87
/* 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;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
  font: inherit;
}

/* Fix wrapping on titles and paragraphs */
p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

/* 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"
  },
}