Stock is a utility-first CSS library made just for Webflow.
1/2 cup Webflow sauce
12oz Figma diced
2tsp. Tailwind, finely chopped
A pinch of F'insweet
Recent Tweets
You probably know just how great it feels to work in Webflow—the ability to create complex custom designed websites and web applications without writing code—truly magical stuff.
But, and there’s always a but, if you’ve spent any time building for the web outside of Webflow you’ll also know how that feels—a world full of awesome frameworks, libraries and toolkits designed and supported by an open-source community to help build better and more maintainable digital products.Â
That’s where we feel the “blank canvas” of Webflow seems to fall short. Without any guardrails, the blank canvas can quickly become more of a burden than a blessing.
Libraries like Bootstrap were the OG’s of a systematic approach to building for the web. Now, the new kid on the block, TailwindCSS, is changing the way we write CSS, with a utility-first approach.Â
It’s this utility-first approach that we desperately missed when working inside Webflow and, through that lens, the blank canvas of Webflow feels like falling through a time warp back to a more primitive time. Inspired by TailwindCSS, our goal was to bring a utility-first approach to Webflow with a refreshingly simple, maintainable, and predictable way to build within Webflow.Â
Like the foundations of making a great stew, braise or ramen, it starts with excellent ingredients, the most important of which is Stock.
So, why would we use CSS Utilities in the first place?Â
The short answer: because naming is hard, and even harder when you don’t have the time to do it. Like during the process of building a website.Â
What ends up happening are CSS class names like <utility>section-hero-main<utility>, <utility>section-hero-main2<utility> or <utility>section-main-hero<utility>. They all do almost the same thing but not quite. Multiply that a few dozen times and you end up creating a mess of CSS classes that you’re too afraid to touch for fear of breaking something on a page you don’t know about.
If this sounds familiar, you’ll especially appreciate using utilities.Â
Once you get the hang of it, you can build an entire website by writing just a handful of custom classes that’s easy to maintain, not just by yourself but anyone who’s familiar with the framework. Like your teammates who can jump in and know exactly what to do.
Stock is responsive, mostly
Stock supports two breakpoints: desktop (the default size) and mobile landscape (that uses -sm- notation). We’ve found that after two years of using it daily, coverage of these two breakpoints is enough to support 95% of all use cases we’ve encountered. Since Stock is so easy to customize we figure that if you really needed support for tablet or mobile portrait breakpoints, you can easily add those yourself.
Stock is a set of global single property utilities you can daisy chain together to return your desired effect. When implemented it looks like this:
<utility>d-flex<utility> <utility>flx-col<utility> <utility>flx-acenter<utility> <utility>flx-jstart<utility> <utility>my-5<utility> <utility>my-sm-3<utility>
It’s more easily explained with an example.Â
Let’s say you have a list of elements, where each element has the class name <utility>user-item<utility>. The first item in the list needs to have a margin above it while the others don’t.Â
Using a Stock utility for the margin-top CSS property, you could simply add a bit of margin to the top of the first item in the list like this <utility>user-item<utility> <utility>mt-1<utility>. And, if you need that margin to disappear on a mobile breakpoint, Stock offers a set of utilities for mobile breakpoints too, in this case we want to remove the margin-top by using the <utility>mt-sm-0<utility> and viola, no margin on mobile.
But wait, what does the 1 in the <utility>mt-1<utility> mean? It’s based on the spacing scale we use with Stock, but more about that later.
It’s readable, easy to use, and doesn’t add any CSS that might break the layout elsewhere in your website. The best part is that the margin utility, like all other utilities, are Global classes, which means they’re available across your project where an element requires more top margin.
Stock comes with responsive utilities for the most frequently used CSS layout properties such as margin, padding, width, height, flexbox and grid, to name a few categories. It leaves space for your own custom classes for components like buttons, and nav bars and other component-based elements you might dream up for your own project.
Adding Stock to new or existing projects is super easy. Start by cloning this project here https://webflow.com/website/stock-utilities-cloneable. That’s it, easy peasy.
The utility clonable project contains a single page with all the utilities neatly organized inside a single parent div. This makes it really easy to try out even if you have a free Webflow account that only gives you two pages to start with. Either clone the project and get started right away or copy and paste all or parts of Stock into an existing project.
Since the naming convention we use is pretty specific, it’s unlikely that you’ll run into any conflicts, if you do though, you’ll want to make sure you clean out the duplicates before you get started.
We built Stock with customization in mind. The main areas of customization that impact custom designs most significantly are color and typography.
Once you're comfortable using utilities you'll want to customize color and typography to make it work for you.
Customizing Color
The most common places where colour is added in HTML elements are to backgrounds, borders and text.
Stock provides a base colour system that is applied to those elements. Stock colour uses a scale from 100 to 900, where 100 is the lightest in the scale and 900 the darkest.
Background and border color
Stock comes with it's own theme that you are more than welcome to use, and just as welcome to customize. We’ve picked a simple set of colors that consist of grey, yellow, red, green, blue, indigo and pink. These colors are applied to backgrounds and borders.
Here’s an example of color pink used as a background color utility <utility>bg-pink-400<utility> and; this is blue as a border color <utility>b-blue-300<utility>.
To customize color to your needs you simply have to change the hex values for each of the colors we have in our theme. If you'd like to introduce other colors like megenta, use the same naming convention like <utility>bg-magenta-400<utility> and that's it.
Text color
For text color we use a different approach. Text color is based on a decreasing amount of alpha so it can work well on most light or dark colored backgrounds. The utility <utility>txt-dark-900<utility> is text with the color black and an alpha of 90% and <utility>txt-light-900<utility> Â is text with the color white and an alpha of 90%. The text color scale goes between 500 and 900 so the text color remains within the range of accessibility compliance.
If you prefer to use colored text we recommend using the same approach using alpha transparency to increase or decrease the contrast of your text. There are some exceptions where this doesn't work all that well, I'm looking at you Yellow, use your judgement in these circumstances and pick the color that works.
Customizing Typography
Stock uses a harmonic scale for its font sizes, major third for desktop and, a less dramatic, major second for mobile. These scales are generated by a handy tool called type-scale.com, check it out. It also uses a unitless line-height that works for most typefaces, but you will definitely want to customize these to fit your own.
Stock provides a set of convenient typography utility classes for all headings, body text and captions. The styles for these utilities include font size, font weight, letter spacing and line height, but can also include color and font family (especially if you are using more than one typeface).
To get start with customizing typography, start by importing any custom fonts into Webflow. Next, you’ll assign your custom fonts to all the heading, body and caption classes. If you only have one custom font, it’s much easier to simply update the <utility>Body (All Pages)<utility> tag with the new font.
You could  stop right there and you’d be ready to design with a type system locked. However, if you have an established type scale that is different from the one we use, you’ll have to update all the sizes and even add any new title, heading, subheading or body sizes as you need. It’s worth the effort up front to save you hours later..
We highly encourage customizing the typography utilities. It has the biggest impact on your custom designs with minimal effort. It also gets you working with Stock really quickly.
The Stock color palette is made to be customized to suit your needs. But, if you want to use it as is you're more than welcome of course, you can always come back and change or add to it later.
<d-none>Gray<d-none>
‍
<d-none>Yellow<d-none>
‍
<d-none>Red<d-none>
‍
<d-none>Green<d-none>
‍
<d-none>Blue<d-none>
‍
<d-none>Indigo<d-none>
‍
<d-none>Pink<d-none>
These color utilities are available for all the colors in the palette.
Background Color
‍
Border Color
‍
Text Color
‍
‍
Stock uses a harmonic scale for its font sizes, major third for desktop and, a less dramatic, major second for mobile. It also uses a unitless line-height that works for most typefaces, but you will definitely want to customize these to fit your own. You can update these with your own sizes or find a scale that you prefer. You can take a look at type-scale.com to create yours.
‍
Typography System
Each heading, body or caption class in the system is responsive to the two breakpoints Stock supports - desktop and mobile landscape. While these classes can be applied to any heading, paragraph or text-block, our recommended usage is listed below:
‍
Rich Text Elements
Stock also applies the same typographic system inside of rich text elements. These HTML element overrides are only applied to a rich text element with the class <utility>rte<utility> applied to it. This is done to style dynamic text when the rich text element is used in the Webflow CMS.
‍
The text utilities in are a little different from the typography utilities. Text utilities are meant to be used specifically on the <txt-bold>text block Webflow element<txt-bold> where you need to apply text styles to meet your design.
Think of using text utilities to style text in cards, list items and side bars vs headings and body text which should use HTML tags like H1, H2 and p to describe the hierarchy of content and offer better accessibility to your website viewers.
Now of course there are no rules here, only conventions, but you'll save yourself, your team and most importantly your site visitors a lot of frustration if you pick a convention and stick with it.
Stock offers a scale of text sizes for you convenience, you you think you need to add a few go ahead and create scale values of 1000, 1100, 1200 and so on.
We've added a mixed bag of text utilities that cover position, decoration, wrapping and weight.
Control the space around an element using margin. Margins can be added to all or each of the four sides of any element.
Stock uses a base 8 system for the margin scale.
The scale goes 0, 8, 16, 24, 32, 48, 64, 80, 96, 128, 160.
The scale isn't linear nor does it adhere to any particular mathematical equation. Instead it's a scale we've used hundreds of times that seems to support the work we do.
You'll notice that between 0 and 32 it increases by 8px, then between 32px and 96px it increases by 16px and finally between 96px and 160px it increases by 32px.
You'll find yourself reaching for these margin utilities very often. Margin adds spacing outside of the bounding box of elements. The elements size is preserved and it pushes other elements away from itself.
‍
Margin All
‍
Margin Top and Bottom or on the y axis
‍
Margin Left and Right or on the x axis
‍
Margin Top
‍
Margin Right
‍
Margin Bottom
‍
Margin Left
Negative Margin All
‍
Negative Margin Top and Bottom or on the y axis
‍
Negative Margin Left and Right or on the x axis
‍
Negative Margin Top
‍
Negative Margin Right
‍
Negative Margin Bottom
‍
Negative Margin Left
Control the space between an element and it's bounding box with padding. Padding can be added to all or each of the four sides of any element.
‍
Stock uses a base 8 system for the margin scale.
The scale goes 0, 8, 16, 24, 32, 48, 64, 80, 96, 128, 160.
The scale isn't linear nor does it adhere to any particular mathematical equation. Instead it's a scale we've used hundreds of times that seems to support the work we do.
You'll notice that between 0 and 32 it increases by 8px, then between 32px and 96px it increases by 16px and finally between 96px and 160px it increases by 32px.
You'll find yourself reaching for these padding utilities when designing things like cards, buttons and other "containers" that need to add some spacing to all the elements inside it.. Padding adds spacing inside the bounding box of elements. If it needs to the elements size will increase to accommodate for the padding set.
‍
Padding All
‍
Padding Y
‍
Padding X
‍
Padding Top
‍
Padding Right
‍
Padding Bottom
‍
Padding Left
Flex utilities are one of the handiest utilities in the Stock library. Stock supports utility classes on both the flex parent and the flex child.
You'll find them most useful when laying out interface elements like cards and list items, or better still, cards on desktop that switch to list items on mobile. Stock really shines when you wont have to create custom class names for multiple types of cards.
Fractional Width
‍
Fixed Widths
The scale goes 0, 1, 2, 4, 8. The scale could grow even bigger but we figure these would be the most commonly used sizes for borders.
We currently only have utilities for solid border styles.
Borders All
‍
Borders Left and Right or on the x axis
‍
Border Top
‍
Border Right
‍
Border Bottom
‍