Sassy Starter

Sassy Starter is a front-end boilerplate and build toolkit for Sass (SCSS) projects that structures stylesheets according to SMACSS and Atomic Design principles.

What is Sassy Starter?

Sassy Starter is an HTML/SCSS starter kit created by Mina Markham (@MinaMarkham) that combines Scalable and Modular Architecture for CSS (SMACSS) with Atomic Design naming conventions. It takes source files from a src/ folder — including index.html, scss/, js/, and images — and compiles them into a cleaned and minified dist/ folder via Gulp. The toolkit runs on Node.js with LibSass and Gulp, and its default task starts a local server with BrowserSync for live reloading. The project's styles are split into groups: Base, Layout, Atoms, Molecules, Organisms, States, Themes, Utilities, and Overrides.

Key Features

• SMACSS and Atomic Design structure — The src/scss/ folder organizes partials into base, layout, atoms, molecules, organisms, states, themes, utilities, and overrides, each with an _index.scss manifest.
• Gulp build system — Includes Gulp task names such as styles, watch, imagemin, sass-lint, sassdoc, deploy, and themes, with default, build, and audit grouped tasks.
• BrowserSync live reloading — The default Gulp task opens http://localhost:3000, syncs scrolls and clicks across devices on the same network, and reloads when source files change.
• Image minification — Runs gulp-imagemin with imagemin-pngquant to compress images in the src/img/ folder during the build.
• CSS preprocessing tooling — Uses gulp-sass (LibSass), gulp-autoprefixer for vendor prefixes, gulp-sourcemaps, and gulp-minify-css to output minified stylesheets.
• Sass linting and documentation — Includes .sass-lint.yml based on the default sass-lint config and uses sassdoc to generate documentation from SCSS comments.
• Included libraries — Ships with Normalize.css, CSS Pesticide for debugging, jQuery via CDN with a local fallback, Modernizr for feature detection, and Apache Server Configs (.htaccess) for performance and security.
• Theme support — Add a theme.scss in src/scss/themes/, override the default $theme variable, and run gulp themes to build themed variants.

Who is it for?

• Front-end developers — Use it as a starting point for static HTML/SCSS sites who want a pre-configured Gulp pipeline for compilation, minification, and live reload.
• Web designers — Use the organized SCSS partials and utility mixins to write maintainable, modular styles for prototypes or production.
• Teams working on SMACSS or Atomic Design systems — Adopt the folder structure to enforce consistent component-based CSS architecture across a project.

What can you do with Sassy Starter?

• Build a static marketing site — Drop HTML into src/index.html, write SCSS partials in the provided folders, and have the gulp default task compile and serve it at localhost:3000.
• Deploy to GitHub Pages — Run the deploy Gulp task (using gulp-gh-pages) to publish the compiled dist/ files to a GitHub Pages branch.
• Generate theme variants — Create multiple theme files in src/scss/themes/ (a rebeccapurple.scss example is included) and build them with gulp themes.
• Audit your stylesheets — Use the audit task to run sass-lint on SCSS files and produce a stats report on the build output.

How does Sassy Starter work?

After installing Node and Gulp globally, clone the repository, run npm install, then run gulp. The default task cleans dist/, starts BrowserSync, and watches src/ for changes; running gulp build produces optimized files without the server. Never edit the dist/ folder directly, as it is deleted frequently during builds.

FAQ

Is Sassy Starter free?

Sassy Starter is an open-source project hosted on GitHub. The README says "Do what you'd like with it" and lists a Patreon button for the author, but no license file is shown in the content.

What are the requirements for Sassy Starter?

You need Node.js and npm, a global installation of Gulp (npm install gulp -g), and LibSass (bundled via gulp-sass). The README also suggests using sudo npm install if a regular install fails.

How do I add a new theme?

Create a separate theme.scss file in src/scss/themes/, override the default $theme variable, and run the gulp themes task. The included example is rebeccapurple.scss.

What libraries are included?

The starter includes Normalize.css, CSS Pesticide, jQuery (loaded from CDN with a local fallback), Modernizr, and Apache Server Configs. These are referenced in src/scss/libs/ and the HTML template.