loading...
Cover image for Just Released: Minimal Sass / HTML Template Site

Just Released: Minimal Sass / HTML Template Site

5t3ph profile image Stephanie Eckles ใƒป2 min read

Over the weekend, I boosted my existing html-sass-jumpstart repo to a more easily customizable and useful minimal Sass and HTML template repo.

Head on over to the docs or get a brief intro below.

Who is this for?

Anyone who wants to get a site up and going to host basic content and doesn't need features of a full static site generator - just good ole HTML and CSS!

Also great for:

  • practicing improving your use of Sass
  • ditching the bulk of heavier frameworks that you're only using a subset of
  • creating Github/Bitbucket pages for small projects
  • quickly launching a basic site on Netlify or similar hosting

Features

  • node-sass powered, includes stylelint and prettier, and autoprefix and minifying upon build. Develop script includes hot-reload via browsersync.
  • Final base styles 2kb minified and gzipped
  • Uses BEM class naming format, but reasonable element styles are also included.
  • Essential layout utilities mix grid and flexbox to "pick the right tool for the right job"
  • Foundational theme system with colors, typography, and utility styles that include easy overrides to prevent bulking final build
  • Two essential components: buttons and cards

Check out the docs or go ahead and use the template

Origins/Philosophy

My day job is leading the development of a large enterprise design system. But on a personal note, I often need something to just get a project started, and typically I don't need React or an SSG.

This is a slim themeable Sass framework with just the features I often find myself needing for a basic content site.

I'm a fan of BEM, but for this type of project, there are some instances where element styling is appropriate. So reasonable defaults for expected content are included.

Additionally, I love utility class availability but it can easily add bulk, so overrides are available via Sass maps to trim out the values you don't need to reduce generated classes for things like colors and sizing utilities.

In terms of layout, a lot of frameworks go all-in on either flexbox or grid - but there's a time for both! So this package doesn't include a 12-col grid layout, but it does provide light layout utilities for simple modifications to solve general use cases like auto-sized responsive columns, simply placing a few elements in a row, and capping width with consideration to line-length.

I hope this can be useful to you, and I look forward to feedback!

โœจComments, issues, and pull requests welcome!

Posted on Feb 6 by:

5t3ph profile

Stephanie Eckles

@5t3ph

Girl Geek, Web Dev (frontend/JS/React) building a design system, teaching a code video series, authoring ModernCSS.dev, egghead instructor, mom to 2 girls

Discussion

markdown guide
 

Hello Stephanie,
Appreciate your effort. It is also good for who want to make documentation of some product.
Best Regards

 
 

Stephanie, loving it and cloning it ๐ŸŽ‰

(I wish I had this template two days ago when I was "attending" a hackathon) ๐Ÿ˜…

 

Hooray!! File an issue if you find something (I have a teensy fix coming later today related to card link focus styles)