Menu
Close
Sign up for updates

Stock will always be a work in progress. So if you'd like to keep up on updates and improvements, leave us an email!
Thank you, you'll hear from us soon!
Something didn't work. Can you please try again?

Stock is a utility-first CSS library made just for Webflow.

1000+ utilities raw
1/2 cup Webflow sauce
12oz Figma diced
2tsp. Tailwind, finely chopped
A pinch of F'insweet

Recent Tweets

See All
Start with Stock

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.

Why Utilities

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.

How Stock works

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.

Add Stock to your Webflow 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.

Customizing Stock

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.

Color Palette

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>

Gray
Gray 100
Gray 200
Gray 300
Gray 400
Gray 500
Gray 600
Gray 700
Gray 800
Gray 900

<d-none>Yellow<d-none>

Yellow
Yellow 100
Yellow 200
Yellow 300
Yellow 400
Yellow 500
Yellow 600
Yellow 700
Yellow 800
Yellow 900

<d-none>Red<d-none>

Red
Red 100
Red 200
Red 300
Red 400
Red 500
Red 600
Red 700
Red 800
Red 900

<d-none>Green<d-none>

Green
Green 100
Green 200
Green 300
Green 400
Green 500
Green 600
Green 700
Green 800
Green 900

<d-none>Blue<d-none>

Blue
Blue 100
Blue 200
Blue 300
Blue 400
Blue 500
Blue 600
Blue 700
Blue 800
Blue 900

<d-none>Indigo<d-none>

Indigo
Indigo 100
Indigo 200
Indigo 300
Indigo 400
Indigo 500
Indigo 600
Indigo 700
Indigo 800
Indigo 900

<d-none>Pink<d-none>

Pink
Pink 100
Pink 200
Pink 300
Pink 400
Pink 500
Pink 600
Pink 700
Pink 800
Pink 900
Color Utilities

These color utilities are available for all the colors in the palette.

Background Color

Selector/Class Name Style Properties
bg-{color}-900
Background {Color} 900
background-color: #{Hex Color};
bg-{color}-800
Background {Color} 800
background-color: #{Hex Color};
bg-{color}-700
Background {Color} 700
background-color: #{Hex Color};
bg-{color}-600
Background {Color} 600
background-color: {Hex Color};
bg-{color}-500
Background {Color} 500
background-color: #{Hex Color};
bg-{color}-400
Background {Color} 400
background-color: {Hex Color};
bg-{color}-300
Background {Color} 300
background-color: #{Hex Color};
bg-{color}-200
Background {Color} 200
background-color: #{Hex Color};
bg-{color}-100
Background {Color} 100
background-color: #{Hex Color};
bg-transparent
Background Transparent
background-color: (0,0,0,0);

Border Color

Selector/Class Name Style Properties
b-{color}-900
Border {Color} 900
border-color: #{Hex Color};
b-{color}-900
Border {Color} 900
border-color: #{Hex Color};
b-{color}-800
Border {Color} 800
border-color: #{Hex Color};
b-{color}-700
Border {Color} 700
border-color: #{Hex Color};
b-{color}-600
Border {Color} 600
border-color: #{Hex Color};
b-{color}-500
Border {Color} 500
border-color: #{Hex Color};
b-{color}-400
Border {Color} 400
border-color: #{Hex Color};
b-{color}-300
Border {Color} 300
border-color: #{Hex Color};
b-{color}-200
Border {Color} 200
border-color: #{Hex Color};
b-{color}-100
Border {Color} 100
border-color: #{Hex Color};

Text Color

Selector/Class Name Style Properties
txt-dark-900
Text Dark 900
color: rgba(0,0,0,.90);
txt-dark-800
Text Dark 800
color: rgba(0,0,0,.80);
txt-dark-700
Text Dark 700
color: rgba(0,0,0,.70);
txt-dark-600
Text Dark 600
color: rgba(0,0,0,.60);
txt-dark-500
Text Dark 500
color: rgba(0,0,0,.54);

Selector/Class Name Style Properties
txt-light-900
Text Light 900
color: rgba(255,255,255,.95);
txt-light-800
Text Light 800
color: rgba(255,255,255,.80);
txt-light-700
Text Light 700
color: rgba(255,255,255,.70);
txt-light-600
Text Light 600
color: rgba(255,255,255,.60);
txt-light-500
Text Light 500
color: rgba(255,255,255,.50);


Typography Utilities

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:

Selector/Class Recommended to Use On Desktop Mobile
heading1
H1
font-weight: 700;
font-size: 3.052rem;
line-height: 1.5;
font-weight: 700;
font-size: 1.802rem;
line-height: 1.5;
heading2
H2
font-weight: 700;
font-size: 2.441rem;
line-height: 1.5;
font-weight: 700;
font-size: 1.602rem;
line-height: 1.5;
heading3
H3
font-weight: 700;
font-size: 1.953rem;
line-height: 1.5;
font-weight: 700;
font-size: 1.424rem;
line-height: 1.5;
heading4
H4
font-weight: 700;
font-size: 1.563rem;
line-height: 1.5;
font-weight: 700;
font-size: 1.266rem;
line-height: 1.5;
heading5
H5, text-block, p
font-weight: 700;
font-size: 1.25rem;
line-height: 1.5;
font-weight: 700;
font-size: 1.125rem;
line-height: 1.5;
heading6
H6, text-block, p
font-weight: 700;
font-size: 1rem;
line-height: 1.5;
font-weight: 700;
font-size: 1rem;
line-height: 1.5;
subheading
H2, H3, H4, text-block, p
font-weight: 700;
font-size: 1rem;
line-height: 1.5;
font-weight: 700;
font-size: 1rem;
line-height: 1.5;
body1
text-block, p
font-weight: 400;
font-size: 1rem;
line-height: 1.5;
font-weight: 400;
font-size: 1rem;
line-height: 1.5;
body2
text-block, p
font-weight: 400;
font-size: 0.8rem;
line-height: 1.5;
font-weight: 400;
font-size: 0.889rem;
line-height: 1.5;
caption1
text-block, p
font-weight: 400;
font-size: 0.64rem;
line-height: 1.5;
font-weight: 400;
font-size: 0.79rem;
line-height: 1.5;

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.

Selector/Class Desktop Mobile
All H1 Headings > rte
font-weight: 700;
font-size: 38px;
line-height: 44px;
font-weight: 700;
font-size: 38px;
line-height: 44px;
All H2 Headings > rte
font-weight: 700;
font-size: 32px;
line-height: 36px;
font-weight: 700;
font-size: 32px;
line-height: 36px;
All H3 Headings > rte
font-weight: 700;
font-size: 24px;
line-height: 30px;
font-weight: 700;
font-size: 24px;
line-height: 30px;
All H4 Headings > rte
font-weight: 700;
font-size: 18px;
line-height: 24px;
font-weight: 700;
font-size: 18px;
line-height: 24px;
All H5 Headings > rte
font-weight: 700;
font-size: 14px;
line-height: 20px;
font-weight: 700;
font-size: 14px;
line-height: 20px;
All H6 Headings > rte
font-weight: 700;
font-size: 12px;
line-height: 18px;
font-weight: 700;
font-size: 12px;
line-height: 18px;
All Paragraphs > rte
font-weight: 400;
font-size: 14px;
line-height: 20px;
font-weight: 400;
font-size: 14px;
line-height: 20px;
All Block Quotes > rte
font-weight: 400;
font-size: 18px;
line-height: 22px;
font-weight: 400;
font-size: 18px;
line-height: 22px;
All Ordered Lists > rte


Text Utilities

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.

Text Size

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.

Desktop Class Mobile Class Properties
txt-size-100
txt-size-sm-100
font-size: 0.65rem;
txt-size-200
txt-size-sm-200
font-size: 0.75rem;
txt-size-300
txt-size-sm-300
font-size: 0.875rem;
txt-size-400
txt-size-sm-400
font-size: 1rem;
txt-size-500
txt-size-sm-500
font-size: 1.125rem;
txt-size-600
txt-size-sm-600
font-size: 1.25rem;
txt-size-700
txt-size-sm-700
font-size: 1.5rem;
txt-size-800
txt-size-sm-800
font-size: 1.875rem;
txt-size-900
txt-size-sm-900
font-size: 2.25rem;
txt-size-1000
txt-size-sm-1000
font-size: 3rem;
More text utilities

We've added a mixed bag of text utilities that cover position, decoration, wrapping and weight.

Desktop Class Mobile Class Properties
txt-left
txt-sm-left
text-align: left;
txt-center
txt-sm-center
text-align: center;
txt-right
txt-sm-right
text-align: right;
txt-italic
font-style: italic;
txt-normal
font-weight: 400;
txt-medium
font-weight: 500;
txt-semibold
font-weight: 600;
txt-bold
font-weight: 700;
txt-strike
text-decoration: line-through;
txt-upcase
text-transform: uppercase;
txt-nowrap
white-space: nowrap;
txt-nodecoration
text-decoration: none;
Margin

Control the space around an element using margin. Margins can be added to all or each of the four sides of any element.

Margin Scale

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.

Margin Utilities

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

Desktop Class Mobile Class Properties
m-auto
m-sm-auto
margin: auto;
m-0
m-sm-0
margin: 0px;
m-1
m-sm-1
margin: 8px;
m-2
m-sm-2
margin: 16px;
m-3
m-sm-3
margin: 24px;
m-4
m-sm-4
margin: 32px;
m-5
m-sm-5
margin: 48px;
m-6
m-sm-6
margin: 64px;
m-7
m-sm-7
margin: 80px;
m-8
m-sm-8
margin: 96px;
m-9
m-sm-9
margin: 128px;
m-10
m-sm-10
margin: 160px;

Margin Top and Bottom or on the y axis

Desktop Class Mobile Class Properties
my-auto
my-sm-auto
margin: auto 0 auto 0;
my-0
my-sm-0
margin: 0 0 0 0;
my-1
my-sm-1
margin: 8px 0 8px 0;
my-2
my-sm-2
margin: 16px 0 16px 0;
my-3
my-sm-3
margin: 24px 0 24px 0;
my-4
my-sm-4
margin: 32px 0 32px 0;
my-5
my-sm-5
margin: 40px 0 40px 0;
my-6
my-sm-6
margin: 64px 0 64px 0;
my-7
my-sm-7
margin: 80px 0 80px 0;
my-8
my-sm-8
margin: 96px 0 96px 0;
my-9
my-sm-9
margin: 128px 0 128px 0;
my-10
my-sm-10
margin: 160px 0 160px 0;

Margin Left and Right or on the x axis

Desktop Class Mobile Class Properties
mx-auto
mx-sm-auto
margin: 0 auto 0 auto;
mx-0
mx-sm-0
margin: 0 0 0 0;
mx-1
mx-sm-1
margin: 0 8px 0 8px;
mx-2
mx-sm-2
margin: 0 16px 0 16px;
mx-3
mx-sm-3
margin: 0 24px 0 24px;
mx-4
mx-sm-4
margin: 0 32px 0 32px;
mx-5
mx-sm-5
margin: 0 40px 0 40px;
mx-6
mx-sm-6
margin: 0 64px 0 64px;
mx-7
mx-sm-7
margin: 0 80px 0 80px;
mx-8
mx-sm-8
margin: 0 96px 0 96px;
mx-9
mx-sm-9
margin: 0 128px 0 128px;
mx-10
mx-sm-10
margin: 0 160px 0 160px;

Margin Top

Desktop Class Mobile Class Properties
mt-auto
mt-sm-auto
margin-top: auto;
mt-0
mt-sm-0
margin-top: 0;
mt-1
mt-sm-1
margin-top: 8px;
mt-2
mt-sm-2
margin-top: 16px;
mt-3
mt-sm-3
margin-top: 24px;
mt-4
mt-sm-4
margin-top: 32px;
mt-5
mt-sm-5
margin-top: 40px;
mt-6
mt-sm-6
margin-top: 64px;
mt-7
mt-sm-7
margin-top: 80px;
mt-8
mt-sm-8
margin-top: 96px;
mt-9
mt-sm-9
margin-top: 128px;
mt-10
mt-sm-10
margin-top: 160px;

Margin Right

Desktop Class Mobile Class Properties
mr-auto
mr-sm-auto
margin-right: auto;
mr-0
mr-sm-0
margin-right: 0;
mr-1
mr-sm-1
margin-right: 8px;
mr-2
mr-sm-2
margin-right: 16px;
mr-3
mr-sm-3
margin-right: 24px;
mr-4
mr-sm-4
margin-right: 32px;
mr-5
mr-sm-5
margin-right: 40px;
mr-6
mr-sm-6
margin-right: 64px;
mr-7
mr-sm-7
margin-right: 80px;
mr-8
mr-sm-8
margin-right: 96px;
mr-9
mr-sm-9
margin-right: 128px;
mr-10
mr-sm-10
margin-right: 160px;

Margin Bottom

Desktop Class Mobile Class Properties
mb-auto
mb-sm-auto
margin-bottom: auto;
mb-0
mb-sm-0
margin-bottom: 0;
mb-1
mb-sm-1
margin-bottom: 8px;
mb-2
mb-sm-2
margin-bottom: 16px;
mb-3
mb-sm-3
margin-bottom: 24px;
mb-4
mb-sm-4
margin-bottom: 32px;
mb-5
mb-sm-5
margin-bottom: 48px;
mb-6
mb-sm-6
margin-bottom: 64px;
mb-7
mb-sm-7
margin-bottom: 80px;
mb-8
mb-sm-8
margin-bottom: 96px;
mb-9
mb-sm-9
margin-bottom: 128px;
mb-10
mb-sm-10
margin-bottom: 160px;

Margin Left

Desktop Class Mobile Class Properties
ml-auto
ml-sm-auto
margin-left: auto;
ml-0
ml-sm-0
margin-left: 0;
ml-1
ml-sm-1
margin-left: 8px;
ml-2
ml-sm-2
margin-left: 16px;
ml-3
ml-sm-3
margin-left: 24px;
ml-4
ml-sm-4
margin-left: 32px;
ml-5
ml-sm-5
margin-left: 40px;
ml-6
ml-sm-6
margin-left: 64px;
ml-7
ml-sm-7
margin-left: 80px;
ml-8
ml-sm-8
margin-left: 96px;
ml-9
ml-sm-9
margin-left: 128px;
ml-10
ml-sm-10
margin-left: 160px;
Negative Margin Utilities

Negative Margin All

Desktop Class Mobile Class Properties
m-n1
m-sm-n1
margin: -8px;
m-n2
m-sm-n2
margin: -16px;
m-n3
m-sm-n3
margin: -24px;
m-n4
m-sm-n4
margin: -32px;
m-n5
m-sm-n5
margin: -48px;
m-n6
m-sm-n6
margin: -64px;
m-n7
m-sm-n7
margin: -80px;
m-n8
m-sm-n8
margin: -96px;
m-n9
m-sm-n9
margin: -128px;
m-n10
m-sm-n10
margin: -160px;

Negative Margin Top and Bottom or on the y axis

Desktop Class Mobile Class Properties
my-n1
my-sm-n1
margin: -8px 0 -8px 0;
my-n2
my-sm-n2
margin: -16px 0 -16px 0;
my-n3
my-sm-n3
margin: -24px 0 -24px 0;
my-n4
my-sm-n4
margin: -32px 0 -32px 0;
my-n5
my-sm-n5
margin: -40px 0 -40px 0;
my-n6
my-sm-n6
margin: -64px 0 -64px 0;
my-n7
my-sm-n7
margin: -80px 0 -80px 0;
my-n8
my-sm-n8
margin: -96px 0 -96px 0;
my-n9
my-sm-n9
margin: -128px 0 -128px 0;
my-n10
my-sm-n10
margin: -160px 0 -160px 0;

Negative Margin Left and Right or on the x axis

Desktop Class Mobile Class Properties
mx-n1
mx-sm-n1
margin: 0 -8px 0 -8px;
mx-n2
mx-sm-n2
margin: 0 -16px 0 -16px;
mx-n3
mx-sm-n3
margin: 0 -24px 0 -24px;
mx-n4
mx-sm-n4
margin: 0 -32px 0 -32px;
mx-n5
mx-sm-n5
margin: 0 -40px 0 -40px;
mx-n6
mx-sm-n6
margin: 0 -64px 0 -64px;
mx-n7
mx-sm-n7
margin: 0 -80px 0 -80px;
mx-n8
mx-sm-n8
margin: 0 -96px 0 -96px;
mx-n9
mx-sm-n9
margin: 0 -128px 0 -128px;
mx-n10
mx-sm-n10
margin: 0 -160px 0 -160px;

Negative Margin Top

Desktop Class Mobile Class Properties
mt-n1
mt-sm-n1
margin-top: -8px;
mt-n2
mt-sm-n2
margin-top: -16px;
mt-n3
mt-sm-n3
margin-top: -24px;
mt-n4
mt-sm-n4
margin-top: -32px;
mt-n5
mt-sm-n5
margin-top: -40px;
mt-n6
mt-sm-n6
margin-top: -64px;
mt-n7
mt-sm-n7
margin-top: -80px;
mt-n8
mt-sm-n8
margin-top: -96px;
mt-n9
mt-sm-n9
margin-top: -128px;
mt-n10
mt-sm-n10
margin-top: -160px;

Negative Margin Right

Desktop Class Mobile Class Properties
mr-n1
mr-sm-n1
margin-right: -8px;
mr-n2
mr-sm-n2
margin-right: -16px;
mr-n3
mr-sm-n3
margin-right: -24px;
mr-n4
mr-sm-n4
margin-right: -32px;
mr-n5
mr-sm-n5
margin-right: -40px;
mr-n6
mr-sm-n6
margin-right: -64px;
mr-n7
mr-sm-n7
margin-right: -80px;
mr-n8
mr-sm-n8
margin-right: -96px;
mr-n9
mr-sm-n9
margin-right: -128px;
mr-n10
mr-sm-n10
margin-right: -160px;

Negative Margin Bottom

Desktop Class Mobile Class Properties
mb-n1
mb-sm-n1
margin-bottom: -8px;
mb-n2
mb-sm-n2
margin-bottom: -16px;
mb-n3
mb-sm-n3
margin-bottom: -24px;
mb-n4
mb-sm-n4
margin-bottom: -32px;
mb-n5
mb-sm-n5
margin-bottom: -48px;
mb-n6
mb-sm-n6
margin-bottom: -64px;
mb-n7
mb-sm-n7
margin-bottom: -80px;
mb-n8
mb-sm-n8
margin-bottom: -96px;
mb-n9
mb-sm-n9
margin-bottom: -128px;
mb-n10
mb-sm-n10
margin-bottom: -160px;

Negative Margin Left

Desktop Class Mobile Class Properties
ml-n1
ml-sm-n1
margin-left: -8px;
ml-n2
ml-sm-n2
margin-left: -16px;
ml-n3
ml-sm-n3
margin-left: -24px;
ml-n4
ml-sm-n4
margin-left: -32px;
ml-n5
ml-sm-n5
margin-left: -40px;
ml-n6
ml-sm-n6
margin-left: -64px;
ml-n7
ml-sm-n7
margin-left: -80px;
ml-n8
ml-sm-n8
margin-left: -96px;
ml-n9
ml-sm-n9
margin-left: -128px;
ml-n10
ml-sm-n10
margin-left: -160px;
Padding

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.

Padding Scale

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.

Padding Utilities

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

Desktop Class Mobile Class Properties
p-0
p-sm-0
padding: 0px;
p-1
p-sm-1
padding: 8px;
p-2
p-sm-2
padding: 16px;
p-3
p-sm-3
padding: 24px;
p-4
p-sm-4
padding: 32px;
p-5
p-sm-5
padding: 48px;
p-6
p-sm-6
padding: 64px;
p-7
p-sm-7
padding: 80px;
p-8
p-sm-8
padding: 96px;
p-9
p-sm-9
padding: 128px;
p-10
p-sm-10
padding: 160px;

Padding Y

Desktop Class Mobile Class Properties
py-0
py-sm-0
padding: 0 0 0 0;
py-1
py-sm-1
padding: 8px 0 8px 0;
py-2
py-sm-2
padding: 16px 0 16px 0;
py-3
py-sm-3
padding: 24px 0 24px 0;
py-4
py-sm-4
padding: 32px 0 32px 0;
py-5
py-sm-5
padding: 40px 0 40px 0;
py-6
py-sm-6
padding: 64px 0 64px 0;
py-7
py-sm-7
padding: 80px 0 80px 0;
py-8
py-sm-8
padding: 96px 0 96px 0;
py-9
py-sm-9
padding: 128px 0 128px 0;
py-10
py-sm-10
padding: 160px 0 160px 0;

Padding X

Desktop Class Mobile Class Properties
px-0
px-sm-0
padding: 0 0 0 0;
px-1
px-sm-1
padding: 0 8px 0 8px;
px-2
px-sm-2
padding: 0 16px 0 16px;
px-3
px-sm-3
padding: 0 24px 0 24px;
px-4
px-sm-4
padding: 0 32px 0 32px;
px-5
px-sm-5
padding: 0 48px 0 48px;
px-6
px-sm-6
padding: 0 64px 0 64px;
px-7
px-sm-7
padding: 0 80px 0 80px;
px-8
px-sm-8
padding: 0 96px 0 96px;
px-9
px-sm-9
padding: 0 128px 0 128px;
px-10
px-sm-10
padding: 0 160px 0 160px;

Padding Top

Desktop Class Mobile Class Properties
pt-0
pt-sm-0
padding-top: 0;
pt-1
pt-sm-1
padding-top: 8px;
pt-2
pt-sm-2
padding-top: 16px;
pt-3
pt-sm-3
padding-top: 24px;
pt-4
pt-sm-4
padding-top: 32px;
pt-5
pt-sm-5
padding-top: 48px;
pt-6
pt-sm-6
padding-top: 64px;
pt-7
pt-sm-7
padding-top: 80px;
pt-8
pt-sm-8
padding-top: 96px;
pt-9
pt-sm-9
padding-top: 128px;
pt-10
pt-sm-10
padding-top: 160px;

Padding Right

Desktop Class Mobile Class Properties
pr-0
pr-sm-0
padding-right: 0;
pr-1
pr-sm-1
padding-right: 8px;
pr-2
pr-sm-2
padding-right: 16px;
pr-3
pr-sm-3
padding-right: 24px;
pr-4
pr-sm-4
padding-right: 32px;
pr-5
pr-sm-5
padding-right: 48px;
pr-6
pr-sm-6
padding-right: 64px;
pr-7
pr-sm-7
padding-right: 80px;
pr-8
pr-sm-8
padding-right: 96px;
pr-9
pr-sm-9
padding-right: 128px;
pr-10
pr-sm-10
padding-right: 160px;

Padding Bottom

Desktop Class Mobile Class Properties
pb-0
pb-sm-0
padding-bottom: 0;
pb-1
pb-sm-1
padding-bottom: 8px;
pb-2
pb-sm-2
padding-bottom: 16px;
pb-3
pb-sm-3
padding-bottom: 24px;
pb-4
pb-sm-4
padding-bottom: 32px;
pb-5
pb-sm-5
padding-bottom: 48px;
pb-6
pb-sm-6
padding-bottom: 64px;
pb-7
pb-sm-7
padding-bottom: 80px;
pb-8
pb-sm-8
padding-bottom: 96px;
pb-9
pb-sm-9
padding-bottom: 128px;
pb-10
pb-sm-10
padding-bottom: 160px;

Padding Left

Desktop Class Mobile Class Properties
pl-0
pl-sm-0
padding-left: 0;
pl-1
pl-sm-1
padding-left: 8px;
pl-2
pl-sm-2
padding-left: 16px;
pl-3
pl-sm-3
padding-left: 24px;
pl-4
pl-sm-4
padding-left: 32px;
pl-5
pl-sm-5
padding-left: 48px;
pl-6
pl-sm-6
padding-left: 64px;
pl-7
pl-sm-7
padding-left: 80px;
pl-8
pl-sm-8
padding-left: 96px;
pl-9
pl-sm-9
padding-left: 128px;
pl-10
pl-sm-10
padding-left: 160px;
Flex

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.

Flex Parent
Desktop Class Mobile Class Properties
d-flex
d-sm-flex
display: flex;
flx-col
flx-sm-col
flex-direction: column;
flx-col-rev
flx-sm-col-rev
flex-direction: column-reverse;
flx-row
flx-sm-row
flex-direction: row;
flx-row-rev
flx-sm-row-rev
flex-direction: row-reverse;
flx-astart
flx-sm-astart
align-items: flex-start;
flx-aend
flx-sm-aend
align-items: flex-end;
flx-acenter
flx-sm-acenter
align-items: flex-center;
flx-astretch
flx-sm-astretch
align-items: stretch;
flx-abase
flx-sm-abase
align-items: baseline;
flx-jstart
flx-sm-jstart
justify-content: flex-start;
flx-jend
flx-sm-jend
justify-content: flex-end;
flx-jcenter
flx-sm-jcenter
justify-content: flex-center;
flx-jspace
flx-sm-jspace
justify-content: space-between;
flx-jaround
flx-sm-jaround
justify-content: space-around;
flx-wrap
flx-sm-wrap
flex-wrap: wrap;
flx-wrap-rev
flx-sm-wrap-rev
flex-wrap: wrap-reverse;
Flex Children
Desktop Class Mobile Class Properties
flxc-grow
flxc-sm-grow
flex: 1;
flxc-shrink
flxc-sm-shrink
flex: 0 auto;
flxc-nosize
flxc-sm-nosize
flex: 0 0 auto;
flxc-start
flxc-sm-start
align-self: flex-start;
flxc-end
flxc-sm-end
align-self: flex-end;
flxc-center
flxc-sm-center
align-self: center;
flxc-stretch
flxc-sm-stretch
align-self: stretch;
flxc-base
flxc-sm-base
align-self: baseline;
flxc-auto
flxc-sm-auto
align-self: flex-end;
flxc-first
flxc-sm-first
order: -1;
flxc-last
flxc-sm-last
order: 1;
Grid
Grid Utilities
Desktop Class Tablet Class Mobile Class Properties
d-grid
d-md-grid
d-sm-grid
display: grid;
gcol-1
gcol-md-1
gcol-sm-1
grid-template-columns: 1fr;
gcol-2
gcol-md-2
gcol-sm-2
grid-template-columns: 1fr 1fr;
gcol-3
gcol-md-3
gcol-sm-3
grid-template-columns: 1fr 1fr 1fr;
gcol-4
gcol-md-4
gcol-sm-4
grid-template-columns: 1fr 1fr 1fr 1fr;
gcol-5
gcol-md-5
gcol-sm-5
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
gcol-6
gcol-md-6
gcol-sm-6
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
gap-1
gap-md-1
gap-sm-1
grid-gap: 16px;
gap-2
gap-md-2
gap-sm-2
grid-gap: 24px;
gap-3
gap-md-3
gap-sm-3
grid-gap: 32px;
gap-4
gap-md-4
gap-sm-4
grid-gap: 40px;
gap-5
gap-md-5
gap-sm-5
grid-gap: 48px;
gap-col-1
gap-col-md-1
gap-col-sm-1
grid-column-gap: 16px;
gap-col-2
gap-col-md-2
gap-col-sm-2
grid-column-gap: 24px;
gap-col-3
gap-col-md-3
gap-col-sm-3
grid-column-gap: 32px;
gap-col-4
gap-col-md-4
gap-col-sm-4
grid-column-gap: 40px;
gap-col-5
gap-row-md-5
gap-row-sm-5
grid-row-gap: 48px;
gap-row-1
gap-row-md-1
gap-row-sm-1
grid-row-gap: 16px;
gap-row-2
gap-row-md-2
gap-row-sm-2
grid-row-gap: 24px;
gap-row-3
gap-row-md-3
gap-row-sm-3
grid-row-gap: 32px;
gap-row-4
gap-row-md-4
gap-row-sm-4
grid-row-gap: 40px;
gap-row-5
gap-row-md-5
gap-row-sm-5
grid-row-gap: 48px;
Grid Alignment
Desktop Class Tablet Class Mobile Class Properties
grid-acenter
grid-md-acenter
grid-sm-acenter
align-items: center;
grid-astart
grid-md-astart
grid-sm-astart
align-items: start;
grid-aend
grid-md-aend
grid-sm-aend
align-items: end;
grid-astretch
grid-md-astretch
grid-sm-astretch
align-items: stretch;
grid-abaseline
grid-md-abaseline
grid-sm-abaseline
align-items: baseline;
grid-jstart
grid-md-jstart
grid-sm-jstart
justify-items: start;
grid-jcenter
grid-md-jcenter
grid-sm-jcenter
justify-items: center;
grid-jend
grid-md-jend
grid-sm-jend
justify-items: end;
grid-jstretch
grid-md-jstretch
grid-sm-jstretch
justify-items: stretch;
grid-jbaseline
grid-md-jbaseline
grid-sm-jbaseline
justify-items: baseline;
grid-jbaseline
grid-md-jbaseline
grid-sm-jbaseline
justify-items: baseline;
Height
Height Utilities

Screen Heights

Desktop Class Mobile Class Properties
vh-full
vh-sm-full
height: 100vh;
vh-1of2
vh-sm-1of2
height: 50vh;
vh-1of3
vh-sm-1of3
height: 33.33vh;
vh-2of3
vh-sm-2of3
height: 66.67vh;

Fixed Heights

Desktop Class Mobile Class Properties
h-4
h-sm-4
height: 4px;
h-8
h-sm-8
height: 8px;
h-12
h-sm-12
height: 12px;
h-16
h-sm-16
height: 16px;
h-24
h-sm-24
height: 24px;
h-32
h-sm-32
height: 32px;
h-40
h-sm-40
height: 40px;
h-48
h-sm-48
height: 48px;
h-64
h-sm-64
height: 64px;
h-80
h-sm-80
height: 80px;
h-96
h-sm-96
height: 96px;
h-160
h-sm-160
height: 160px;
h-200
h-sm-200
height: 200px;
h-300
h-sm-300
height: 300px;
h-350
h-sm-350
height: 350px;
h-400
h-sm-400
height: 400px;
h-450
h-sm-450
height: 450px;
h-500
h-sm-500
height: 500px;
h-600
h-sm-600
height: 600px;
Display
Display Utilities
Desktop Class Tablet Class Mobile Class XS Class Properties
d-flex
d-sm-flex
display: flexbox;
d-block
d-md-block
d-sm-block
d-xs-block
display: block;
d-inline
d-md-inline
d-sm-inline
display: inline-block;
d-none
d-md-none
d-sm-none
d-xs-none
display: none;
d-grid
d-md-grid
d-sm-grid
display: grid;
Overflow Utilities
Utility Properties
overflow-hidden
overflow: hidden;
overflow-scroll
overflow: scroll;
overflow-visible
overflow: visible;
overflow-auto
overflow: auto;
Width
Width Utilities

Fractional Width

Desktop Class Mobile Class Properties
w-full
w-sm-full
width: 100%;
w-3of4
w-sm-3of4
width: 75%;
w-2of3
w-sm-2of3
width: 66.67%;
w-1of2
w-sm-1of2
width: 50%;
w-1of3
w-sm-1of3
width: 33.3%;
w-1of4
w-sm-1of4
width: 25%;

Fixed Widths

Desktop Class Mobile Class Properties
w-auto
w-sm-auto
width: auto;
w-4
w-sm-4
width: 4px;
w-8
w-sm-8
width: 8px;
w-12
w-sm-12
width: 12px;
w-16
w-sm-16
width: 16px;
w-24
w-sm-24
width: 24px;
w-32
w-sm-32
width: 32px;
w-40
w-sm-40
width: 40px;
w-48
w-sm-48
width: 48px;
w-64
w-sm-64
width: 64px;
w-80
w-sm-80
width: 80px;
w-96
w-sm-96
width: 96px;
w-160
w-sm-160
width: 160px;
w-200
w-sm-200
width: 200px;
w-350
w-sm-350
width: 350px;
w-400
w-sm-400
width: 400px;
w-450
w-sm-450
width: 450px;
w-500
w-sm-500
width: 500px;
w-600
w-sm-600
width: 600px;
Position
Position Utilities
Desktop Class Mobile Class Properties
pos-rel
position: relative;
pos-fix
position: fixed;
pos-fix-t
position: fixed;
left: 0%;
top: 0%;
right: 0%;
bottom: auto;
pos-fix-l
position: fixed;
left: 0%;
top: 0%;
right: auto;
bottom: 0%;
pos-abs
position: absolute;
pos-sticky
pos-sm-sticky
position: sticky;
pos-static
pos-sm-static
position: static;

Absolute Positions

Utility Properties
pos-abs-tl
position: absolute;
left: 0%;
top: 0%;
right: auto;
bottom: auto;
pos-abs-tr
position: absolute;
left: auto;
top: 0%;
right: 0%;
bottom: auto;
pos-abs-bl
position: absolute;
left: 0%;
top: auto;
right: auto;
bottom: 0%;
pos-abs-br
position: absolute;
left: auto;
top: auto;
right: 0%;
bottom: 0%;
pos-abs-l
position: absolute;
left: 0%;
top: 0%;
right: auto;
bottom: 0%;
pos-abs-r
position: absolute;
left: auto;
top: 0%;
right: 0%;
bottom: 0%;
pos-abs-b
position: absolute;
left: 0%;
top: auto;
right: 0%;
bottom: 0%;
pos-abs-t
position: absolute;
left: 0%;
top: 0%;
right: 0%;
bottom: auto;
pos-abs-full
position: absolute;
left: 0%;
top: 0%;
right: auto;
bottom: auto;
Object
Object Utilities
Desktop Class Mobile Class Properties
obj-scaledown
obj-sm-scaledown
object-fit: scale-down;
obj-contain
obj-sm-contain
object-fit: contain;
obj-cover
obj-sm-cover
object-fit: cover;
obj-none
obj-sm-none
object-fit: none;
obj-fill
obj-sm-fill
object-fit: fill;

Object Fit Position

Utility Properties
obj-c
object-position: 50% 50%;
obj-tl
object-position: 0% 0%;
obj-l
object-position: 0% 50%;
obj-bl
object-position: 0% 100%;
obj-b
object-position: 50% 100%;
obj-br
object-position: 100% 100%;
obj-r
object-position: 100% 50%;
obj-tr
object-position: 100% 0%;
obj-t
object-position: 50% 0%;
Borders
Borders Scale

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.

Border Utilities

Borders All

Desktop Class Mobile Class Properties
b-0
b-sm-0
border-width: 0px;
border-style: solid;
b-1
b-sm-1
border-width: 1px;
border-style: solid;
b-2
b-sm-2
border-width: 2px;
border-style: solid;
b-4
b-sm-4
border-width: 4px;
border-style: solid;
b-8
b-sm-8
border-width: 8px;
border-style: solid;

Borders Left and Right or on the x axis

Desktop Class Mobile Class Properties
bx-0
bx-sm-0
border-width: 0 0 0 0;
border-style: solid;
bx-1
bx-sm-1
border-width: 0 1px 0 1px;
border-style: solid;
bx-2
bx-sm-2
border-width: 0 2px 0 2px;
border-style: solid;
bx-4
bx-sm-4
border-width: 0 4px 0 4px;
border-style: solid;
bx-8
bx-sm-8
border-width: 0 8px 0 8px;
border-style: solid;
by-0
by-sm-0
border-width: 0 0 0 0;
border-style: solid;
by-1
by-sm-1
border-width: 1px 0 1px 0;
border-style: solid;
by-2
by-sm-2
border-width: 2px 0 2px 0;
border-style: solid;
by-4
by-sm-4
border-width: 4px 0 4px 0;
border-style: solid;
by-8
by-sm-8
border-width: 8px 0 8px 0;
border-style: solid;

Border Top

Desktop Class Mobile Class Properties
bt-0
bt-sm-0
border-width: 0 0 0 0;
border-style: solid;
bt-1
bt-sm-1
border-width: 1px 0 0 0;
border-style: solid;
bt-2
bt-sm-2
border-width: 2px 0 0 0;
border-style: solid;
bt-4
bt-sm-4
border-width: 4px 0 0 0;
border-style: solid;
bt-8
bt-sm-8
border-width: 8px 0 0 0;
border-style: solid;

Border Right

Desktop Class Mobile Class Properties
br-0
br-sm-0
border-width: 0 0 0 0;
border-style: solid;
br-1
br-sm-1
border-width: 0 1px 0 0;
border-style: solid;
br-2
br-sm-2
border-width: 0 2px 0 0;
border-style: solid;
br-4
br-sm-4
border-width: 0 4px 0 0;
border-style: solid;
br-8
br-sm-8
border-width: 0 8px 0 0;
border-style: solid;

Border Bottom

Desktop Class Mobile Class Properties
bb-0
bb-sm-0
border-width: 0 0 0 0;
border-style: solid;
bb-1
bb-sm-1
border-width: 0 0 1px 0;
border-style: solid;
bb-2
bb-sm-2
border-width: 0 0 2px 0;
border-style: solid;
bb-4
bb-sm-4
border-width: 0 0 4px 0;
border-style: solid;
bb-8
bb-sm-8
border-width: 0 0 8px 0;
border-style: solid;

Border Left

Desktop Class Mobile Class Properties
bl-0
bl-sm-0
border-width: 0 0 0 0;
border-style: solid;
bl-1
bl-sm-1
border-width: 0 0 0 1px;
border-style: solid;
bl-2
bl-sm-2
border-width: 0 0 0 2px;
border-style: solid;
bl-4
bl-sm-4
border-width: 0 0 0 4px;
border-style: solid;
bl-8
bl-sm-8
border-width: 0 0 0 8px;
border-style: solid;
Corners
Corner Utilities
Utility Properties
rounded-full
overflow: hidden;
border-radius: 999px;
rounded-1
overflow: hidden;
border-radius: 4px;
rounded-2
overflow: hidden;
border-radius: 8px;
rounded-3
overflow: hidden;
border-radius: 16px;
rounded-4
overflow: hidden;
border-radius: 24px;