• Stars
    star
    3,338
  • Rank 13,416 (Top 0.3 %)
  • Language SCSS
  • License
    MIT License
  • Created over 9 years ago
  • Updated 4 months ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

A boilerplate for Sass projects using the 7-1 architecture pattern from Sass Guidelines.

Sass Boilerplate

This is a sample project using the 7-1 architecture pattern and sticking to Sass Guidelines writing conventions.

Each folder of this project has its own README.md file to explain the purpose and add extra information. Be sure to browse the repository to see how it works.

Using the indented syntax

Sass conversion

This boilerplate does not provide a .sass version as it would be painful to maintain both versions without an appropriate build process. However, it is very easy to convert this boilerplate to Sass indented syntax.

Clone it, head into the project and then run:

sass-convert -F scss -T sass -i -R ./  && find . -iname β€œ*.scss” -exec bash -c 'mv "$0" β€œ${0%\.scss}.sass"' {} \;

Use with Sass

When using sass - in order to build that boilerplate, one needs to:

  • install sass if not yet installed:
npm install -g sass
  • run build command from command line:
sass stylesheets/main.scss dist/main.css

More Repositories

1

a11y-dialog

A very lightweight and flexible accessible modal dialog script.
TypeScript
2,395
star
2

SJSJ

Simplified JavaScript Jargon
HTML
2,272
star
3

sass-guidelines

Guidelines for writing sane, maintainable and scalable Sass.
HTML
908
star
4

awesome-sass

A curated list of awesome Sass.
751
star
5

selectors-explained

A CSS selector to plain English translator.
JavaScript
211
star
6

react-a11y-dialog

An accessible React component for a11y-dialog
TypeScript
173
star
7

SassyJSON

[UNMAINTAINED] A Sass API for JSON.
SCSS
169
star
8

jekyll-boilerplate

A cleaned up version of the initial Jekyll setup for quick use.
HTML
144
star
9

CRUD.js

A CRUD JavaScript class.
JavaScript
140
star
10

sass-compatibility

Sass compatibility issues between different engines.
SCSS
129
star
11

site

Sources for kittygiraudel.com
Liquid
103
star
12

Countdown.js

[UNMAINTAINED] A little JavaScript cutstomizable countdown
JavaScript
103
star
13

focusable-selectors

A micro-lib exporting an array of CSS selectors for focusable HTML elements.
JavaScript
74
star
14

SassyCast

[UNMAINTAINED] Type conversion functions for Sass.
SCSS
72
star
15

SassySort

[UNMAINTAINED] Several ways to sort values in Sass using popular sorting algorithms.
SCSS
61
star
16

ImagePreloader

A lightweight JavaScript implementation of an image preloader relying on Promises.
JavaScript
61
star
17

SassyStrings

[UNMAINTAINED] A collection of Sass functions to manipulate strings.
SCSS
59
star
18

react-menu-button

A React component wrapper around inclusive-menu-button.
JavaScript
50
star
19

ama

Ask me anything!
43
star
20

SassyTester

[UNMAINTAINED] A minimalistic function tester in Sass.
SCSS
42
star
21

dotfiles

My configuration files
Shell
40
star
22

react-a11y-disclosure

A small React hook to build accessible disclosure widgets.
JavaScript
35
star
23

react-a11y-footnotes

A reusable React implementation of accessible footnotes.
JavaScript
35
star
24

jekyll-styleguide

This project is an experiment about how we can create a living styleguide in Jekyll.
HTML
32
star
25

eleventy-plugin-footnotes

An 11ty plugin to render accessible footnotes with Liquid
JavaScript
32
star
26

github-release-search

Tiny CLI to search for terms in GitHub releases
JavaScript
28
star
27

SassyMatrix

[UNMAINTAINED] All you ever wanted to deal with matrices in Sass.
SCSS
28
star
28

node-legofy

Node.js version of Legofy.
JavaScript
25
star
29

SassyGradients

[UNMAINTAINED] Sass helpers to manipulate gradients.
SCSS
24
star
30

inline-styler

A teeny tiny JavaScript library to easily manipulate the style attribute of an element.
JavaScript
22
star
31

SassyBitwise

[UNMAINTAINED] Bitwise operators in Sass.
SCSS
18
star
32

dhand

A React hook to guess the dominant hand of the user.
JavaScript
18
star
33

scrabble-helper

A CLI helper for Scrabble.
JavaScript
15
star
34

sass-semver

[UNMAINTAINED] A Sass implementation of node-semver.
SCSS
13
star
35

SassyIteratorsGenerators

[UNMAINTAINED] Iterators and generators implementation in Sass.
SCSS
13
star
36

map-dater

An interactive command line utility to estimate the age of an undated world map.
JavaScript
13
star
37

SassyLogger

[UNMAINTAINED] A logger for Sass.
SCSS
13
star
38

circularray

A fast circular array implementation in JavaScript
JavaScript
13
star
39

hangman.js

Redux powered hangman game.
JavaScript
11
star
40

advent-of-code

TypeScript
6
star
41

sanity-micro-client

JavaScript
6
star
42

dependency-checker

A simple CLI script to check dependencies from a package.json
JavaScript
6
star
43

css3-pratique

CSS 3, Pratique du Design Web
4
star
44

sudoku-solver

JavaScript
4
star
45

PHP-hangman-game

[UNMAINTAINED] A little OOPHP hangman game.
PHP
3
star
46

cypress-5570

JavaScript
2
star
47

teachable-backup

Node.js script to download all content from a Teachable school
JavaScript
1
star