HTML / Sass Jumpstart

HTML / Sass Jumpstart is a minimal Sass and HTML boilerplate that gives you a pre-configured Dart Sass build pipeline with autoprefixing, stylelint, prettier, and hot-reload via Browsersync.

What is HTML / Sass Jumpstart?

HTML / Sass Jumpstart is a GitHub repository template for building static HTML sites with a Sass preprocessing workflow. It takes SCSS source files and plain HTML as input, and outputs a minified, autoprefixed CSS file ready for production. The template runs on Node.js and npm, and is created by front-end developer 5t3ph. The project includes a minimal theme and starter components, with documentation available both on GitHub Pages and in the included index.html file.

Key Features

• Dart Sass powered — Uses Dart Sass (the modern implementation) to compile SCSS to CSS, with no Ruby dependencies.
• Autoprefix on build — Production build automatically adds vendor prefixes to CSS, so you don't have to write them manually.
• Hot-reload development server — The npm start script serves the site at localhost:1337 and uses Browsersync to reload the browser whenever files change.
• Stylelint and Prettier included — Linting extends stylelint-config-standard and prettier-stylelint, with scripts npm run lint and npm run lint:fix to catch and fix style errors.
• Production build script — npm run build generates minified, autoprefixed CSS that also works as a Netlify publish command.
• Customizable theme — The Sass theme can be modified directly, or you can place variable overrides at the top of the main style.scss file before the theme import.
• Minimal theme and components — Ships with a small set of starter styles and structural components, plus an index.html that serves as a component preview and usage guide.

Who is it for?

• Front-end developers who want a lightweight, code-first alternative to heavier frameworks and need a working Sass build configuration out of the box.
• Prototypers and designers who want hot-reloading feedback while iterating on responsive HTML and SCSS layouts.
• Developers deploying static sites who need a minimal, reproducible build process that integrates cleanly with services like Netlify.

Use Cases

• Portfolio sites: Create a small static portfolio and use the included theme as a base, then override Sass variables to match your own brand.
• Marketing landing pages: Build a simple landing page with the starter components and use the production build to ship minified CSS.
• Component documentation: Use the included index.html as a style guide to document buttons, headings, and other UI pieces during development.

How Does It Work?

The template is initialized via the GitHub "Use this template" button, which copies the repository into your own GitHub account. After copying, you can optionally run a find/replace for tdbc to change the class prefix, customize the theme Sass variables, and then use npm start to begin developing with hot reload. When ready, run npm run build to generate the final CSS, and npm run serve to preview the built files locally.

FAQ

Is HTML / Sass Jumpstart free?

Yes, it is a public GitHub repository template, so you can copy and use it for personal or commercial projects at no cost.

Does the build process include autoprefixing?

Yes, the npm run build script runs Autoprefixer as part of the build, so your final CSS includes vendor prefixes for older browsers without any extra configuration.

What code quality tools are included?

Stylelint is configured with stylelint-config-standard and prettier-stylelint, which means you get both style linting and Prettier formatting rules. Use npm run lint to check for issues and npm run lint:fix to auto-fix them.

Can I deploy this template to Netlify?

Yes. Set npm run build as the Netlify publish command, and Netlify will generate the production CSS automatically. You can also use npm run serve to preview the latest build locally before pushing.

How do I change the class prefix?

The template uses the tdbc prefix on many classes. To change it, run a find/replace across the project for tdbc (for example, replace with your own initials), and update the stylelint settings if you need to enforce a different pattern.