DEV Community

Cover image for Build Tools and Extensions I Use In Front-End Projects
Stephanie Eckles
Stephanie Eckles

Posted on

Build Tools and Extensions I Use In Front-End Projects

Build Setup

TL;DR - I use Eleventy and Sass CLI, and have created a few other build helpers.

I have fallen in love with the static site generator Eleventy - so much so, that I even own the domain 11ty.Rocks.

Eleventy is a key part of my setup now for every project. The great thing about it is that you can mold it to what works for you, including adding onto its build process.

For an 11ty overview, check out my post about 11ty features.

I typically start a new project from my 11ty Sass Skeleton Starter which includes build processing steps using the Sass CLI.

Another step of my build process related to CSS is using postcss to process my styles with autoprefixer and cssnano. You'll see that in the postbuild step of the skeleton starter.

Interested in using Sass via CLI build commands, but not using 11ty? Here's my gist on a setup which includes Sass processing and Browsersync without a static site generator or task runner.

I've also created a package to help me with developing accessible color palettes called a11y-color-tokens which I use for more complex projects.

Check out ๐Ÿ”— my full list of front-end resources I've created for developers

VSCode Extensions

My top extensions that I appreciate no matter what language I'm writing (which for me currently means CSS, HTML, JS, C#) include:

Do you do code streaming or recordings? You may be interested in how I setup VSCode for streaming and recording

Discussion (1)

Collapse
aladin002dz profile image
Mahfoudh Arous

I may add to this list:

and for JavaScript:

  • Bracket Pair Colorizer 2.
  • ESLint.