gatsby-starter-sasslan — Gatsby Starter Template

SHA-256: aaf6df0083ab2e2a14d52fec157c02753f25ec8e512091d94751ed633620ac0b

2026-10-02T11:25:59.279Z

# Gatsby Sass Starter

A minimalistic Gatsby starter template featuring SASS and CSS 7-1 architecture. The project focusses on creating websites which are not only fast, but pretty too!

## What Tech This Includes

- [Npm](https://www.npmjs.com/)
- [Gatsby](https://www.gatsbyjs.org/)
- [Sass](https://sass-lang.com)
- [React Helmet](https://github.com/nfl/react-helmet)
- [Resolve Src](https://github.com/alampros/gatsby-plugin-resolve-src)
- [Google Fonts](https://github.com/didierfranc/gatsby-plugin-google-fonts)
- [SVG Sprites](https://github.com/marcobiedermann/gatsby-plugin-svg-sprite)
- [GraphQl Playground](https://github.com/prisma-labs/graphql-playground)
- [Remark Relative Images](https://github.com/danielmahon/gatsby-remark-relative-images)
- [Transformer Remark](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-transformer-remark)
- [Transition Link](https://github.com/TylerBarnes/gatsby-plugin-transition-link)
- [Sharp](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-plugin-sharp)

## What Features this Includes

- SASS in the form of SCSS
- CSS 7-1 architecture along with easy to change variables (for colors, highlight and hover effects)
- Blog component that uses GraphQL to read and render local markdown posts with images
- GraphQL IDE for better development workflows
- Desktop-first and responsive design
- Ability to use Google fonts
- Ability to use SVG sprites
- Github pages integration with script, quick deploy script

# Getting Started

## Requirements

- [Gatsby CLI](https://www.npmjs.com/package/gatsby-cli)
- [Npm](https://www.npmjs.com/)

## Quick Start

Run the following in your favorite terminal:

```
gatsby new [directory] https://github.com/a2zarslaan/gatsby-starter-sasslan
```

## Starting from Scratch

- Set up Npm: (https://www.npmjs.com/get-npm)[https://www.npmjs.com/get-npm]
- Install the Gatsby CLI globally:

```
npm install -g gatsby-cli
```

- Inside the directory of your choice, scaffold a new Gatsby site:

```
gatsby new [directory] https://github.com/a2zarslaan/gatsby-starter-sasslan
```

For example, if I want my installation in `~/Code/new-gatsby-site`, I would navigate to `~/Code` and run:

```
gatsby new new-gatsby-site https://github.com/a2zarslaan/gatsby-starter-sasslan
```

- Navigate to your new directory and run:

```
npm run develop
```

- You should now be running your new Gatsby site locally! 🎉

- For quick deploy as a Github pages site, run:

```
npm run deploy
```

## Credits

Project structure inspired by [Colby Fayok's Gatsy Starter](https://github.com/colbyfayock/gatsby-starter-sass)

Pull requests welcome!