Just Released: Minimal Sass / HTML Template Site

#showdev #css #html #webdev

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!