minamarkham / Sassy Starter
Licence: mit
๐ Sassy starter - HTML / SCSS (SMACSS)
Stars: โญ 740
Projects that are alternatives of or similar to Sassy Starter
Bootstrap 4 Sass Gulp 4 Boilerplate
A Bootstrap 4.5.2 boilerplate with font-awesome, sass, gulp 4 tasks
Stars: โญ 103 (-86.08%)
Mutual labels: gulp, boilerplate, scss, sass
Pug Sass Boilerplate Starter Kit
A Front-end template for building web apps or sites using Pug(Jade) and Sass
Stars: โญ 92 (-87.57%)
Mutual labels: gulp, boilerplate, sass
Fastshell
Fiercely quick front-end boilerplate and workflows, HTML5, Gulp, Sass
Stars: โญ 563 (-23.92%)
Mutual labels: gulp, boilerplate, sass
Baseguide
Lightweight and robust CSS framework for prototyping and production code.
Stars: โญ 127 (-82.84%)
Mutual labels: gulp, scss, sass
Gulp Boilerplate
A boilerplate for building web projects with Gulp.js.
Stars: โญ 840 (+13.51%)
Mutual labels: gulp, boilerplate, sass
Generator Dhboilerplate
Boilerplate made by David Hellmann
Stars: โญ 54 (-92.7%)
Mutual labels: gulp, boilerplate, scss
Frontie Webpack
Front-end Boilerplate | Gulp 4 + Webpack 4 + Babel + ITCSS Architecture + BEM Methodology + Twig.js
Stars: โญ 102 (-86.22%)
Mutual labels: gulp, boilerplate, sass
Light Blue Dashboard
๐ฅ Free and open-source admin dashboard template built with Bootstrap
Stars: โญ 110 (-85.14%)
Mutual labels: boilerplate, scss, sass
Glup
Some of the gulp tutorial -ใgulp็ฌ่ฎฐใ
Stars: โญ 136 (-81.62%)
Mutual labels: gulp, scss, sass
Bootstrap 4 Boilerplate
Bootstrap 4.3.1 boilerplate with Browsersync, Sass and Gulp.js
Stars: โญ 155 (-79.05%)
Mutual labels: gulp, boilerplate, sass
Compile Hero
๐ฐVisual Studio Code Extension For Compiling Language
Stars: โญ 169 (-77.16%)
Mutual labels: gulp, scss, sass
Gulp Frontnote
ในใฟใคใซใฌใคใใธใงใใฌใผใฟใผFrontNoteใฎGulpใใฉใฐใคใณ
Stars: โญ 7 (-99.05%)
Mutual labels: gulp, scss, sass
Skeleton Sass
Skeleton Sass is a highly modular version of Skeleton CSS
Stars: โญ 151 (-79.59%)
Mutual labels: boilerplate, scss, sass
Long Haul
A minimal, type-focused Jekyll theme.
Stars: โญ 524 (-29.19%)
Mutual labels: gulp, scss, sass
Fast
Develop, build, deploy, redeploy, and teardown frontend projects fast.
Stars: โญ 126 (-82.97%)
Mutual labels: boilerplate, scss, sass
Gulp Scss Starter
Frontend development with pleasure. SCSS version
Stars: โญ 339 (-54.19%)
Mutual labels: gulp, scss, sass
Sing App
๐ฅFree and open-source admin dashboard template built with Bootstrap 4.5 ๐ฅ
Stars: โญ 1,187 (+60.41%)
Mutual labels: boilerplate, scss, sass
Gulp Starter Kit
A simple Gulp 4 Starter Kit for modern web development.
Stars: โญ 134 (-81.89%)
Mutual labels: gulp, scss, sass
Gulp Pug Starter
Frontend development with pleasure. Pug + SCSS version
Stars: โญ 228 (-69.19%)
Mutual labels: gulp, scss, sass
Sassy Starter
A starter toolkit based on Scalable and Modular Architecture for CSS (SMACSS) and Atomic Design for Sass (SCSS) projects. Do what you'd like with it :)
Styles are broken down into the following groups: Base, Layout, Atoms, Molecules, Organisms, States, Themes, Utilities and Overrides
Getting Started
- If needed, install
node
andnpm
(Node Package Manager).
- If needed, install
gulp
withnpm install gulp -g
. - Clone this repo with
git clone https://github.com/minamarkham/sassy-starter
or download the zip. - In terminal,
cd
to the folder containing your project. Alternatively, you can typecd
and drag the location of the folder into your terminal and hit enter (on Macs). - In terminal, type
npm install
. If (and only if)npm install
isn't working, trysudo npm install
. This should install all dependencies. - In terminal, enter
gulp
. - Your browser should open at
http://localhost:3000
. You can access this same page on any device on the same wifi network and they'll see whats on your screen. It'll even sync scrolls and clicks! - Edit your code inside of the
src
folder. - Your complied and minified css, html, and javascript files will be created and updated in
dist/
. Never edit files within thedist/
folder, as it gets deleted frequently. - Keep
gulp
running while you're making changes. When you want to stop the gulp task, hitctrl + C
.
For theming: add separate file (theme.scss) insrc/scss/themes/
, override the default $theme
variable, and run gulp themes
.
Requirements
- Node/NPM
- LibSass
- Gulp
Features
- Live reloading with BrowserSync
- Image Minification
- Github Pages deployment
- Sass linting (based on default config)
- Autoprefixer configuration
- SMACSS and Atomic Design-based folder structure
-
px
toem
,px
torem
and other useful functions. - Mixins for inlining media queries.
- Useful CSS helper classes.
- Default print styles, performance optimized.
- "Delete-key friendly." Easy to strip out parts you don't need.
- Includes:
-
Normalize.css
for CSS normalizations and common bug fixes -
CSS Pesticide
for easy CSS debugging -
jQuery
via CDN, with a local fallback -
Modernizr
, via CDN, for feature detection -
Apache Server Configs
that, among other, improve the web site's performance and security
-
Dependencies
"browser-sync": "^2.0.0-rc4",
"colors": "^1.1.2",
"del": "^2.0.2",
"gulp-autoprefixer": "^2.1.0",
"gulp-concat": "^2.4.3",
"gulp-gh-pages": "^0.4.0",
"gulp-imagemin": "^2.1.0",
"gulp-jshint": "^1.9.0",
"gulp-minify-css": "^0.3.12",
"gulp-minify-html": "^0.1.8",
"gulp-notify": "^2.2.0",
"gulp-plumber": "^0.6.6",
"gulp-rename": "^1.2.0",
"gulp-sass": "^1.3.2",
"gulp-sass-lint": "1.0.1",
"gulp-size": "^1.2.0",
"gulp-sourcemaps": "^1.5.2",
"gulp-uglify": "^1.0.2",
"imagemin-pngquant": "^4.0.0",
"sassdoc": "^2.1.15",
"vinyl-paths": "^2.0.0"
Tasks
- clean:dist
- styles
- browser-sync
- deploy
- js-app
- js-libs
- sass-lint
- minify-html
- watch
- imagemin
- stats
- sassdoc
- themes
- default
- clean:dist
- browser-sync
- js-app
- js-libs
- imgmin
- minify-html
- styles
- watch
- build
- clean:dist
- js-app
- js-libs
- imgmin
- minify-html
- styles
- copy
- audit
- sass-lint
- stats
Directory structure
โโโ .gitignore
โโโ .htaccess
โโโ .sass-lint.yml
โโโ .travis.yml
โโโ src
โ โโโ browserconfig.xml
โ โโโ crossdomain.xml
โ โโโ humans.txt
โ โโโ icons
โ โ โโโ apple-touch-icon-114x114-precomposed.png
โ โ โโโ apple-touch-icon-57x57-precomposed.png
โ โ โโโ apple-touch-icon-72x72-precomposed.png
โ โ โโโ apple-touch-icon-precomposed.png
โ โ โโโ apple-touch-icon.png
โ โ โโโ favicon.ico
โ โ โโโ favicon.png
โ โโโ img
โ โโโ index.html
โ โโโ js
โ โโโ robots.txt
โ โโโ scss
โ โโโ atoms
โ โ โโโ _index.scss
โ โโโ base
โ โ โโโ _base.scss
โ โ โโโ _index.scss
โ โโโ layout
โ โ โโโ _index.scss
โ โโโ libs
โ โ โโโ _index.scss
โ โ โโโ _normalize.scss
โ โ โโโ _pesticide.scss
โ โโโ molecules
โ โ โโโ _index.scss
โ โโโ organisms
โ โ โโโ _index.scss
โ โโโ overrides
โ โ โโโ _index.scss
โ โโโ states
โ โ โโโ _index.scss
โ โ โโโ _print.scss
โ โโโ themes
โ โ โโโ rebeccapurple.scss
โ โโโ utilities
โ โ โโโ _colors.scss
โ โ โโโ _config.scss
โ โ โโโ _fonts.scss
โ โ โโโ _functions.scss
โ โ โโโ _index.scss
โ โ โโโ _mixins.scss
โ โ โโโ _typography.scss
โ โโโ styles.scss
โ โโโ _shame.scss
โโโ gulpfile.js
โโโ package.json
Bugs & Support
Developed by @MinaMarkham. Please list all bugs and feature requests in the Github issue tracker.
Thanks & Resources
This toolkit is based on the work of the following fine people & projects.
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].