Shaun's site boilerplate

Uses modern CSS like variables, grid, clamp. If you want to support IE11, old Edge or any browsers versions over 2 years old (older IOS etc) you'll have to put in fallbacks for them. Also uses vanilla js. If we think we need more UI components built we can just add them.

We also have a nice, minimal column and grid system. You can build a lot of layouts with flexbox and grid. Yes you might need to add new grids or custom layouts depending on design, but it doesn't take long anymore with modern CSS.

Where possible we try to eliminate the need for media queries. We do this using the newer clamp() and min() properties.

Just to note, this is NOT a full framework like Bootstrap. You still have to add your own CSS to properly build out a site, but this is a very good minimal base to drop in as a start to any project.

Headings

Headings use CSS clamp property. This uses no media queries. You will no doubt need to change these values to suit the design, but you can find tools to do it for you like Utopia. This tool lets you choose the heading sizes at desktop and mobile widths, then will create the scaling for you, and even a full heading scale based on your choice.

Display 1

Display 2

Display 3

Display 4

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Responsive font sizes

We also use a similar scaling for font utility classes if need, or you can refence the variable directly in you component CSS.

The default type scale in this boilerplate goes from 375px width (smallest size) to 1140px (largest size). Sizes in between those widths will fluidly scale font size.

This scaling system is entirely dependant on the designs though, so would change with each project. This is just an example.

Text fluid 10 (50px → 90px)

Text fluid 9 (45px → 80px)

Text fluid 8 (40px → 70px)

Text fluid 7 (35px → 60px)

Text fluid 6 (30px → 45px)

Text fluid 5 (28px → 38px)

Text fluid 4 (25px → 32px)

Text fluid 3 (23px → 28px)

Text fluid 2 (20px → 25px)

Text fluid 1 (18px → 22px)

Text fluid 0 (16px → 20px)

Colours

Example shades, to be replaced with proper brand colours in design.

.bg-white

.bg-grey-0

.bg-grey-1

.bg-grey-2

.bg-grey-3

.bg-grey-4

.bg-grey-5

.bg-grey-6

.bg-grey-7

.bg-grey-8

.bg-grey-9

.bg-black

.bg-accent

.bg-accent-2

.bg-accent-3

Page copy .flow

For content where you need vertical rhythm and spacing between items (like long copy areas or article posts) we use the class .flow on the parent element.

By default the margins between elements use the CSS min property. You can change the scale of spacing using the .flow-spacing utility classes.

View classes

Fixed spacing

.flow-spacing-00
.flow-spacing-0
.flow-spacing-1
.flow-spacing-2
.flow-spacing-3
.flow-spacing-4

Fluid spacing (will get smaller down to mobile)

.flow-spacing-fluid
.flow-spacing-fluid-xs
.flow-spacing-fluid-sm
.flow-spacing-fluid-md
.flow-spacing-fluid-lg
.flow-spacing-fluid-xl

Font size classes

Flexible font sizing classes if needed. Although we want to try keeping this stuff styled inside blocks to keep styling portable without need to utility spam. But these are available for any quick 'cobble together' bits of UI.

Fluid sizes use The Utopia Type generator.

View classes

Default (static sizes)

.text-11
.text-12
.text-13
.text-14
.text-15
.text-16
.text-17
.text-18
.text-19
.text-20
.text-21
.text-22
.text-23
.text-24
.text-25

Fluid sizes (scale themselves with screen width)

.text-fluid-0
.text-fluid-1
.text-fluid-2
.text-fluid-3
.text-fluid-4
.text-fluid-5
.text-fluid-6
.text-fluid-7
.text-fluid-8
.text-fluid-9
.text-fluid-10

Blockquote

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi praesentium veritatis consequatur ducimus debitis neque molestias excepturi vel quae impedit magni, eligendi dolores reiciendis? Ullam quis animi libero rerum facilis! Animi, suscipit beatae. Officia, aut expedita.

Person Name - Company

Copy bullets

For general bullet lists in article/bodycopy areas
Lorem ipsum dolor sit, amet consectetur adipisicing elit
Lorem ipsum dolor sit, amet consectetur adipisicing elit
Lorem ipsum dolor sit, amet consectetur adipisicing elit

Paragraph colums (using CSS cols) .paragraph-columns

If you want paragraphs in two columns (desktop only), you can use this class for native CSS col layout. This is not the flexbox solution, it's a more basic layout, not recommended for proper structure stuff.

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi praesentium veritatis consequatur ducimus debitis neque molestias excepturi vel quae impedit magni, eligendi dolores reiciendis? Ullam quis animi libero rerum facilis! Animi, suscipit beatae. Officia, aut expedita. Quaerat at nulla expedita illo recusandae saepe, aliquam alias rerum laboriosam distinctio aspernatur ipsam ratione possimus earum magnam amet ullam in ducimus accusantium esse. Voluptatum pariatur commodi vero ex, numquam eaque excepturi ad laborum, placeat voluptate, earum harum! Veritatis quis minus maxime repudiandae nostrum, fugit et necessitatibus.

Buttons

Examples of some standard button types. Uses custom props for lots of flexibility. All can be changed in _button.scss in utilities folder.

Padding/margin classes

We are using a universal spacing system for padding, margins, and the flow classes (found in _vars.scss).

There are general padding/margin classes (weighted 1-8). For example .px-1. These are just arbitrary increments to represent a higher padding amount.

There are also fluid classes like .px-fluid. This class will shrink down the padding/margin proportionally for smaller screens.

.py-fluid (padding will scale down when on mobile)

.py-fluid-sm

.py-fluid-md

.py-fluid-lg

.py-fluid-xl

.py-fluid-xxl

All padding classes

General classes (fixed padding sizes)

.p-[1-9]
.pt-[1 - 9]
.pb-[1 - 9]
.pl-[1 - 9]
.pr-[1 - 9]
.px-[1 - 9]
.py-[1 - 9]

Fluid classes (scales down proportionally)

.p-[fluid, fluid-sm, fluid-md, fluid-lg, fluid-xl ]
.pt-[fluid, fluid-sm, fluid-md, fluid-lg, fluid-xl, fluid-xxl ]
.pb-[fluid, fluid-sm, fluid-md, fluid-lg, fluid-xl, fluid-xxl ]
.pl-[fluid, fluid-sm, fluid-md, fluid-lg, fluid-x ]
.pr-[fluid, fluid-sm, fluid-md, fluid-lg, fluid-xl ]
.px-[fluid, fluid-sm, fluid-md, fluid-lg, fluid-xl ]
.py-[fluid, fluid-sm, fluid-md, fluid-lg, fluid-xl, fluid-xxl ]

Helper classes

.p-0
.pt-0
.pb-0
.pl-0
.pr-0
.px-0
.py-0

All margin classes

General classes (fixed margin sizes)

.m-[1 - 9]
.mt-[1 - 9]
.mb-[1 - 9]
.ml-[1 - 9]
.mr-[1 - 9]
.mx-[1 - 9]
.my-[1 - 9]

Fluid classes (scales down proportionally)

.m-[fluid, fluid-sm, fluid-md, fluid-lg, fluid-xl ]
.mt-[fluid, fluid-sm, fluid-md, fluid-lg, fluid-xl, fluid-xxl ]
.mb-[fluid, fluid-sm, fluid-md, fluid-lg, fluid-xl, fluid-xxl ]
.ml-[fluid, fluid-sm, fluid-md, fluid-lg, fluid-xl ]
.mr-[fluid, fluid-sm, fluid-md, fluid-lg, fluid-xl ]
.mx-[fluid, fluid-sm, fluid-md, fluid-lg, fluid-xl ]
.my-[fluid, fluid-sm, fluid-md, fluid-lg, fluid-xl, fluid-xxl ]

Helper classes

.m-0
.mt-0
.mb-0
.ml-0
.mr-0
.m-auto
.ml-auto
.mr-auto
.mt-auto
.mb-auto
.mx-auto
.my-auto

Columns .columns. Will scale with any amount of children and will change to single columns below 768px. Children will NOT wrap.

Media queries for column classes.

Mobile (xs) up to 767px
Small tablet (sm) min 768px
Large tablet (md) min 900px
Desktop (lg) min 1025px
Large desktop (xl) min 1400px

By default the columns will all be equal width at 768px and above and mobile will stack. So you don't need to explicitly state all the col classes if you're just looking for a stacked layout on mobile and 2-3 cols on small tablet and above, as it will do this by default.

If you want to state explicitly the col amounts you want at certain sizes then that's when you can state 'col-sm-3, col-md-3' etc to do this. Just note that if you choose to use column classes you'll have to then check all the other sizes and ensure layout is ok.

We also have spacing classes to change the gap between columns. Note that these classes all use fluid scaling by default so will get smaller down to mobile.

Column 1

By default these columns all keep their widths down to tablet (768px), then mobile gets stacked single columns. Column gaps use fluid scaling so no need to tweak for mobile.

Column 2

This system was built to make it easy for devs to add classes and move on. They don't have to worry about mobile. If we want mobile to be in specific columns then you can use .grid for that.

Columns flipped .columns [data-variant="flipped"]

Flipped version, a commonly used UI pattern for signposts. Will only be flipped at 768px and above

Column 1

By default these columns all keep their widths down to tablet, then mobile gets stacked single columns. Although this is less flexible than Bootstrap (with Bootstrap you are able able to tell it exact columns to use at different widths), that's sort of the point.

Column 2

This system was built to make it easy for devs to add classes and move on. They don't have to worry about mobile as it will always stack. If it's decided people want a fleshed out grid system with finer control of columns at all sizes, then we can add it.

Columns flipped mobile .columns [data-variant="flipped-mobile"]

Flipped version which is mobile only. Often on desktop you might have an image in the right column, but on mobile you still want the image to show first. This attribute will do that. Scale down to mobile to see.

Column 1

Column 2

Columns. Extra large spacing variant .columns .spacing-xl

Title

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nisi repellendus architecto sint, dicta molestiae minus necessitatibus blanditiis mollitia iure, modi reiciendis aspernatur accusantium officiis, maiores quaerat delectus quibusdam. Eligendi, dignissimos!

Title

Columns. Flush(with no spaces between) .columns .flush

Minimal column system

The whole point of getting away from Bootstrap is for a much slimmer build size. Having said that here's a minimal column framework. Column classes of 2,3,4,5,6,7,8,9,10,11 are available. They all break down to single column at mobile size.

These columns won't always break down exactly to the percentages given, as we are letting the browser figure it out, so sometimes a column will be a little bigger or smaller than the intended width. They will be close though.

If you want columns that wrap to multiple lines you should be using the grid system instead

.col-lg-8

This column will be at 66.66% width at desktop(1025px) and above

.col-lg-4

This column will be at 33.333% width at desktop(1025px) and above

.col-sm-4 .col-lg-6

This box will stack on mobile, be a third width on a small tablet(768px), then switch to half width on desktop(1025px)

.col-sm-4 .col-lg-3

This box will stack on mobile and be a third width on a small tablet(768px), then a quarter width on desktop.

.col-sm-4 .col-lg-3

This box will stack on mobile and be a third width on a small tablet(768px), then a quarter width on desktop.

.col-xs-4 .col-sm-4 .col-lg-2

Third width on mobile and small tablet, then 2 col width on desktop.

.col-xs-4 .col-sm-4 .col-lg-5

Third width on mobile and small tablet, then 5 col width on desktop.

.col-xs-4 .col-sm-4 .col-lg-5

Third width on mobile and small tablet, then 5 col width on desktop.

.col-md-4 .justify-content-between on parent

.col-md-6 .justify-content-between on parent

.col-sm-10 with .justify-content-center class on parent

Rows .rows

For when you want rows of full width panels stacked above each other (although you could use .flow class on parent to get the same effect)

Title

All column classes

Mobile (xs) up to 767px
Small tablet (sm) min 768px
Large tablet (md) min 900px
Desktop (lg) min 1025px
Large desktop (xl) min 1400px

Generic Classes (applied to parent).

.columns
.rows
.columns (default spacing)
.columns.flush
.columns.spacing-x-0
.columns.spacing-xs
.columns.spacing-sm
.columns.spacing-md
.columns.spacing-lg
.columns.spacing-xl
.columns.spacing-x-sm
.columns.spacing-x-md
.columns.spacing-x-lg
.columns.spacing-x-xl
.columns.spacing-y-0
.columns.spacing-y-xs
.columns.spacing-y-sm
.columns.spacing-y-md
.columns.spacing-y-lg
.columns.spacing-y-xl
.columns[data-variant="flipped"] (flips columns on desktop)
.columns[data-variant="flipped-mobile"] (flips columns on mobile)

Mobile classes

.col-xs-4
.col-xs-6

Small tablet classes

.col-sm-2
.col-sm-3
.col-sm-4
.col-sm-5
.col-sm-6
.col-sm-7
.col-sm-8
.col-sm-9
.col-sm-10
.col-sm-11

Large Tablet classes

.col-md-2
.col-md-3
.col-md-4
.col-md-5
.col-md-6
.col-md-7
.col-md-8
.col-md-9
.col-md-10
.col-md-11

Desktop classes

.col-lg-2
.col-lg-3
.col-lg-4
.col-lg-5
.col-lg-6
.col-lg-7
.col-lg-8
.col-lg-9
.col-lg-10
.col-lg-11

Large Desktop classes

.col-xl-2
.col-xl-3
.col-xl-4
.col-xl-5
.col-xl-6
.col-xl-7
.col-xl-8
.col-xl-9
.col-xl-10
.col-xl-11

Auto grid .grid. For columns spanning multiple lines that will lay themselves out

By default the grid will use 3/4 cols (depending on the width of the container it's in). Columns have a minimum width value, when they get smaller they will break down to less columns. This is designed so you don't have to worry about any column class stuff at certain widths. It'll just do it's own thing. If you want more control, you can use specific classes shown on panels further down the page.

You can change the minimum width of the grid columns using a custom prop on the grid e.g. style="--min:18rem". By default they are 23rem (368px).

We also have spacing classes to change the gap between columns. Note that these classes all use fluid scaling by default so will get smaller down to mobile.

Title

Auto grid. .grid .spacing-xl .spacing-y-lg

Wider spacing between items, but an optional class added to make row gaps smaller. Just another example of utilities that can be used on the grid system.

Title

Auto grid. Flush .grid .flush

With no gaps between cells

Explicit Grid. This uses .cols-md-3 .cols-lg-4 to set exact column amounts.

Using the explicit column classes will stop the columns from using auto layout, so if you state an exact number of columns they will stay there. Here I've stated column numbers for large tablet and desktop. I've omitted the small tablet class (sm) so it will auto-layout cols at that width until it hits 900px (large tablet width).

Title

Explicit grid .cols-lg-3 .cols-xs-2

If you want to have three columns on desktop and two columns on mobile you can add the above classes. Notice no tablet class here, so when the screen goes under 1025px it will switch to auto-layout, then when it goes to 768px it will apply mobile columns.

Title

All grid classes

Mobile (xs) up to 767px
Small tablet (sm) min 768px
Large tablet (md) min 900px
Desktop (lg) min 1025px
Large desktop (xl) min 1400px

Generic Classes

.grid (default auto grid that will reflow columns based on width, mobile is single col)
.auto-fill (stops columns stretching to fit container)
.spacing-xs
.spacing-sm
.spacing-md
.spacing-lg
.spacing-xl
.spacing-x-0
.spacing-x-xs
.spacing-x-sm
.spacing-x-md
.spacing-x-lg
.spacing-x-xl
.spacing-y-0
.spacing-y-xs
.spacing-y-sm
.spacing-y-md
.spacing-y-lg
.spacing-y-xl

Mobile classes

.cols-xs-2
.cols-xs-3

Small tablet classes

.cols-sm-2
.cols-sm-3
.cols-sm-4

Large tablet classes

.cols-md-2
.cols-md-3
.cols-md-4

Desktop classes

.cols-lg-2
.cols-lg-3
.cols-lg-4

Large desktop classes

.cols-xl-2
.cols-xl-3
.cols-xl-4

Form inputs

Standard form. The inputs are 100% width of the parent by default, but can be changed using --input-width custom prop placed on the form-group parent.

Text box

Helper text if needed

Text box with error

Helper text if needed

Select

Text area

Radio

Radio button

Checkbox button

Do something

Two column form (with option of two column spanning inputs)

The below form uses a two column approach (desktop only), but also allows you to decide to span a certain form group across two columns

Text box

Helper text if needed

Text box with error

Helper text if needed

Text area

Dark/light mode

There is a dark/light mode available. It only does some very basic examples of how the theming would work. You'd have to build on it. If you want to see it you need to enable themes from the main.scss file and turn on commented out js in pagescripts.js. You should then see this panel adapt when toggling the button.

Heading

Paragraph copy with hyperlink

Heading

Paragraph copy with hyperlink

Heading

Paragraph copy

Heading

Paragraph copy

Navigation mega menu

On mobile these become slide over menus

Navigation is always tricky as it can be so different from site to site. This is a good base to use if wanted, as you'll have the JS to do the toggle stuff.

Tabs, using vanilla JS and fully accessible

Tab example
Tab 2
Tab3

Tab 1 example. These are simple and accessible tabs. Can be styled pretty easily. These tabs do not do any responsive stuff on mobile by default, and lay out just like desktop. So you'll need to tweak depending on your use case.

Tab 2 example with lots of content. These are simple and accessible tabs. Can be styled pretty easily. These tabs do not do any responsive stuff on mobile by default, and lay out just like desktop. So you'll need to tweak depending on your use case.

Tab 3 example. These are simple and accessible tabs. Can be styled pretty easily. These tabs do not do any responsive stuff on mobile by default, and lay out just like desktop. So you'll need to tweak depending on your use case.

Youtube embed player

If you want to use a YouTube video embed this uses a bit of code to load the video on click. We use an image as a placeholder, which falls back to YouTube thumbnail

Be aware that sometimes YouTube doesn't allow the embed due to copyrighted music etc.

Poster image

YouTube thumbnail fallback

Swiper js

If we want to use a proper slider/carousel then we use swiper. It has lots of options you can use. It is 100kb though, so I'd try to avoid it. It's often a client request for a 'carousel' hero, but if that's the only thing they want we should tell them they are loading 100kb of js for something people don't always even interact with.

Disclosure toggle boxes

Native HTML <Details> element

Pure HTML

Easy and no js

Show more toggle boxes

Small toggle preview
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dolorum vel rerum sit esse aperiam eligendi ea molestias quos nobis temporibus cupiditate, iusto, quis repellendus fuga! Dolore voluptatibus doloribus adipisci est? Laborum repellendus harum voluptatibus placeat, eius amet illo vero assumenda ad rerum illum aut. Aspernatur quisquam corrupti perferendis rerum, placeat molestiae porro nihil vero? Aut sed at quasi porro officiis. Maiores, repudiandae iusto quo at placeat quia obcaecati blanditiis sunt porro.

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dolorum vel rerum sit esse aperiam eligendi ea molestias quos nobis temporibus cupiditate, iusto, quis repellendus fuga! Dolore voluptatibus doloribus adipisci est? Laborum repellendus harum voluptatibus placeat, eius amet illo vero assumenda ad rerum illum aut. Aspernatur quisquam corrupti perferendis rerum, placeat molestiae porro nihil vero? Aut sed at quasi porro officiis. Maiores, repudiandae iusto quo at placeat quia obcaecati blanditiis sunt porro.

Large toggle preview
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dolorum vel rerum sit esse aperiam eligendi ea molestias quos nobis temporibus cupiditate, iusto, quis repellendus fuga! Dolore voluptatibus doloribus adipisci est? Laborum repellendus harum voluptatibus placeat, eius amet illo vero assumenda ad rerum illum aut. Aspernatur quisquam corrupti perferendis rerum, placeat molestiae porro nihil vero? Aut sed at quasi porro officiis. Maiores, repudiandae iusto quo at placeat quia obcaecati blanditiis sunt porro.

Scroll snap

Native slider

Scroll item

Shadows

Some quick utility classes for the usual shadow type stuff. Can all be changed in _shadow.scss file. They are all using variables. They also use multiple layered drop shadows for a more natural look to them.

If these don't quite match what you want to achieve I'd suggest a generator like this one. It uses lots of layered shadows to create a really nice shadow.

This uses .shadow utility class

This uses .shadow .shadow-md utility classes

This uses .shadow .shadow-lg utility classes

This uses .shadow .shadow-xl utility classes

Radius

radius-[1 - 5 + radius-full]

Aspect ratio

A newer CSS property so you can define size ratios for boxes without padding hacks. This acts as a minimum height, so content will naturally size itself when it goes beyond the original ratio size

If you are embedding an iframe for a Youtube video, you can use the 16x9 ratio and the CSS will make it responsive.

Square ratio. This card uses .aspect-ratio-1x1 utility classes

4:3 ratio (good for photos). This card uses .aspect-ratio-4x3 utility classes

16:9 ratio (good for Youtube embeds). This card uses .aspect-ratio-16x9 utility classes

Full bleed utility

If your content is within a container (with it's width limited to that container). Ocassionally you might want it to break out of those constraints. The .full-bleed class does this.

If you inspect the section below you'll see it's within a container, but it's still full screen width, even thought it's still in the same parent container. It just means in fixed width parent areas (blog posts etc) you can still put full width areas in there without needing to take the panel out of the parent.

Remember to use overflow-x-clip class on the parent element so there's no horizontal scroll.

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Molestiae autem tempora ex mollitia dolore unde illo voluptatem provident possimus quidem. Aspernatur exercitationem, nesciunt natus consequatur dolore mollitia repellendus laborum ex. Nihil alias sequi harum eveniet repellendus possimus ullam soluta autem beatae ducimus facere facilis aliquid distinctio ad vel ipsa quae id et, porro quos, perspiciatis ex veniam accusantium? Nemo, libero? Officia delectus, quasi inventore non illum commodi modi laudantium eligendi dolorum eos tempore? Repudiandae laudantium, minus possimus dolorem cum sed cumque labore animi nam, velit impedit dolorum quia iste mollitia! Molestiae, nemo.

Stack

This leverages CSS grid (using class of '.stack on parent'). It will then stack the childen in the same container over the top of each other (similar to absolute positioning). Useful for hero layouts and anything where things are placed on top of each other, but still need to be on content flow.

This example uses stack, aspect ratio and flexbox utilities. We then use the object-fit utility on the image so it scales nicely.

Big hero heading

Full utility list

Does not include margin/padding/columns/grid classes. These are pure utility to build little layouts without needing to create a new sass file.

Also note there aren't media queries for any of these, so you can't do something like .text-md-left.text-lg-center. This isn't a fully fleshed utility class framework. These are just classes to put on things if needed for simple layouts. If you need to change positioning at certain screen sizes then you should just write that CSS in the component itself.

View classes

Text

.text-left
.text-center
.text-right
.text-light
.text-normal
.text-medium
.text-semibold
.text-bold
.text-uppercase
.text-lowercase

.text-fluid-0
.text-fluid-1
.text-fluid-2
.text-fluid-3
.text-fluid-4
.text-fluid-5
.text-fluid-6
.text-fluid-7
.text-fluid-8
.text-fluid-9
.text-fluid-10

.text-11
.text-12
.text-13
.text-14
.text-15
.text-16
.text-17
.text-18
.text-19
.text-20
.text-21
.text-22
.text-23
.text-24
.text-25

.line-height-0
.line-height-1
.line-height-2
.line-height-3
.line-height-4
.line-height-5
.line-height-6
.line-height-7

.pointer-events-none
.text-wrap-pretty
.text-wrap-balance

Flex utilities

.d-flex
.d-inline-flex
.flex-none
.flex-column
.flex-wrap
.flex-grow-0
.flex-grow-1
.flex-grow-2
.flex-shrink-0
.flex-shrink-1
.flex-shrink-2

.justify-content-center
.justify-content-start
.justify-content-end
.justify-content-between
.align-items-center
.align-items-start
.align-items-end

.gap-1
.gap-2
.gap-3
.gap-4
.gap-5
.gap-6
.gap-7
.gap-8
.gap-9
.gap-10

.gap-fluid-1
.gap-fluid-2
.gap-fluid-3
.gap-fluid-4
.gap-fluid-5

Other utilites

.p-relative
.p-absolute

.overflow-hidden
.overflow-x-hidden
.overflow-clip
.overflow-x-clip

.aspect-ratio-1x1
.aspect-ratio-4x3
.aspect-ratio-16x9

.full-bleed
.stack
.cover-link

.radius
.radius-2
.radius-3
.radius-4
.radius-5
.radius-full

.w-25
.w-50
.w-75
.w-100
.h-25
.h-50
.h-75
.h-100

.object-fit
.object-fit-contain

Card layout demo

It's pretty quick to create a card layout using some utility classes. Although we don't want 100s of these classes. The idea is to be minimal. However I've included a block of common things often needed to build certain layouts.

Card with image. This card uses .bg-white .flex .flex-column .px-fluid-sm py-fluid-sm and .object-fit utility classes

Card with 1:1 aspect ratio on figure tag, contained image (.object-fit.contain) and a.cover-link on the anchor (sometimes it's easier to have a link outside the content so you don't have to fight the CSS link styling on all the content)

Card with radius and cover link .radius-5 .overflow-hidden and a.cover-link on the anchor (sometimes it's easier to have a link outside the content so you don't have to fight the CSS link styling on all the content)

Resources

A handy list of things I often use when doing a project

IcoMoon. Used to create SVG sprites for icons.
Gradient generator. To build out your required gradents.
Another CSS gradient generator. This one goes through the natural colour spectrum to create the gradient. So it may not be quite what you want, but it's richer anyway.
Mesh gradient generator. A common design trend is using multiple 'blob' shaped gradients to create a big mesh.
Shadow Generator. To create nice box shadow.
Fluid typescale generator. Quick way to create responsive heading sizes that use the clamp property.
Icon SVG. A good, but limited icon library I use often. Also see Feather Icons for some nice UI icons.
Hero icons. Another icon site to grab SVGs.
SVG background image encoder. When you want to use an inline SVG as a background image. You can just paste the SVG code here and it'll convert it to an encoded version you can paste in to the CSS.
SVG OMG. Use this if you have an SVG file with lots of code. This will attempt to clean up the code.
SVG gradient map filter. Sometimes a design might use a colour filter on its images and it's not practical to custom edit them all in photoshop. You can turn an image into duotone with this tool.