Inserts

Inserts are easy to use snippets that you can use to speed up your project flow.

By hitting forward slash (/), typing an Insert name and then hitting Enter, you can insert anything from an entire Hero Section pattern to a complex collection of CSS properties and values.

Inserts also work with Javascript, to get the basics in place before you tweak them to your project.

Accelerate development with structured code snippets.

Quickly insert HTML structures

Add CSS properties and values instantly

Drop in JavaScript patterns with minimal effort

Maintain consistency across your projects

-c variants

-c (Classes/Content): These are "ready-to-wear" components. You use these when you want to move fast, utilizing BEM (Block Element Modifier) naming (like hero__title) to handle styling immediately.

Base Version: These are the "bare bones" structures. You’d use these when you want total control over the markup or when you’re planning to apply a completely different CSS architecture from scratch.

It’s a great way to "framework" your build—grabbing the styled versions for standard sections and the base versions for custom layouts.

Inserts List

HTML Inserts

/header-nav-c

/header-nav

/nav-c

/hero-c

/hero

/section-c

/card-c

/footer-c

CSS Inserts

/bg-image

/test

/flex-c

/flex-c-center

/flex-r

/grid-2

/grid-3

/container

/card

/btn

JS Inserts

/button-test

/click-class

/dom-ready

/add-class

/remove-class

/scroll-to

Custom Inserts

These are on the FEWD Studio roadmap. Using custom inserts, you will be able to create and save your own patterns for use later on in your project. And

Export and Import function would also be included, so you can take your collection into your future work.