The main features:

Here's what NewFolder provides right off the bat:

  • A pseudo-flat aesthetic
  • CSS variables for changing your color scheme quickly
    • New! NewFolder now includes a dark mode thanks to:
      @media (prefers-color-scheme: dark) {}
  • Layout-agnostic. The navigation patterns mostly use Flexbox, but you can use CSS Grid for the overall page layout. God knows I do. The rest is up to you.
  • Readable typographical styles with type scaling
  • Various in-content image styles
  • Form styles (still somewhat in-progress)
  • Alert/admonition boxes for information, warnings, and success alerts
  • Navigation patterns for accordions and breadcrumbs

Things you'll need

  • Existing knowledge of CSS in general and SASS/SCSS in particular is a huge bonus.
  • A way to compile the SCSS code. The Live Sass Compiler for VS Code works fantastically on any platform.
  • A file to pull in and use all the other SCSS files.

To that last point, I like to use one big SCSS file that imports all the other SCSS files so I can choose the styles I need in a modular fashion, and have them all compiled into one single CSS file for the browser to load. Also, files with an underscore at the beginning of their name (eg. _type.scss) will not be compiled automatically by most SCSS interpreters.

That "main" file usually ends up looking like this:

/* Import styles from NewFolder */

@import "NewFolder/_reset.scss";
@import "NewFolder/_variables.scss";
@import "NewFolder/_type.scss";
@import "NewFolder/_helper-classes.scss";
@import "NewFolder/_mixins.scss";
@import "NewFolder/_content-components.scss";
@import "NewFolder/_navigation.scss";
@import "NewFolder/_forms.scss";

Read on for advice on how to use specific features.