{"id":13571082,"url":"https://github.com/minamarkham/sassy-starter","last_synced_at":"2025-04-04T17:08:59.955Z","repository":{"id":17062929,"uuid":"19827639","full_name":"minamarkham/sassy-starter","owner":"minamarkham","description":":tada: Sassy starter - HTML / SCSS (SMACSS)","archived":false,"fork":false,"pushed_at":"2019-01-09T08:56:50.000Z","size":792,"stargazers_count":760,"open_issues_count":4,"forks_count":123,"subscribers_count":69,"default_branch":"master","last_synced_at":"2025-03-28T16:09:25.657Z","etag":null,"topics":["boilerplate","gulp","sass","sass-lint","scss","smacss"],"latest_commit_sha":null,"homepage":"http://minamarkham.github.io/sassy-starter/","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/minamarkham.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2014-05-15T16:54:27.000Z","updated_at":"2025-03-02T18:50:28.000Z","dependencies_parsed_at":"2022-09-24T12:51:00.322Z","dependency_job_id":null,"html_url":"https://github.com/minamarkham/sassy-starter","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/minamarkham%2Fsassy-starter","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/minamarkham%2Fsassy-starter/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/minamarkham%2Fsassy-starter/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/minamarkham%2Fsassy-starter/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/minamarkham","download_url":"https://codeload.github.com/minamarkham/sassy-starter/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247217183,"owners_count":20903009,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["boilerplate","gulp","sass","sass-lint","scss","smacss"],"created_at":"2024-08-01T14:00:58.243Z","updated_at":"2025-04-04T17:08:59.938Z","avatar_url":"https://github.com/minamarkham.png","language":"CSS","funding_links":["https://www.patreon.com/minamarkham"],"categories":["Uncategorized","CSS"],"sub_categories":["Uncategorized"],"readme":"\u003ca href=\"https://www.patreon.com/minamarkham\"\u003e\u003cimg src=\"https://c5.patreon.com/external/logo/become_a_patron_button@2x.png\" width=\"150\"\u003e\u003c/a\u003e [![forthebadge](http://forthebadge.com/images/badges/built-with-love.svg)](http://forthebadge.com) [![forthebadge](http://forthebadge.com/images/badges/uses-css.svg)](http://forthebadge.com) [![forthebadge](http://forthebadge.com/images/badges/powered-by-netflix.svg)](http://forthebadge.com)\n\n# Sassy Starter [![Stories in Ready](https://badge.waffle.io/minamarkham/sassy-starter.png?label=ready\u0026title=Ready)](https://waffle.io/minamarkham/sassy-starter)\n\nA starter toolkit based on [Scalable and Modular Architecture for CSS](http://smacss.com/) (SMACSS) and [Atomic Design](http://atomicdesign.bradfrost.com) for [Sass](http://sass-lang.com/) (SCSS) projects. Do what you'd like with it :)\n\nStyles are broken down into the following groups: **Base, Layout, Atoms, Molecules, Organisms, States, Themes, Utilities and Overrides**\n\n## Getting Started\n\n1. If needed, [install](http://blog.nodeknockout.com/post/65463770933/how-to-install-node-js-and-npm) `node` and `npm` (Node Package Manager).\n- If needed, install `gulp` with `npm install gulp -g`.\n- Clone this repo with `git clone https://github.com/minamarkham/sassy-starter` or download the zip.\n- In terminal, `cd` to the folder containing your project. Alternatively, you can type `cd ` and drag the location of the folder into your terminal and hit enter (on Macs).\n- In terminal, type `npm install`. If (and _only_ if) `npm install` isn't working, try `sudo npm install`. This should install all [dependencies](#dependencies).\n- In terminal, enter `gulp`.\n- 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!\n- Edit your code inside of the `src` folder.\n- Your complied and minified css, html, and javascript files will be created and updated in `dist/`. Never edit files within the `dist/` folder, as it gets deleted frequently.\n- Keep `gulp` running while you're making changes. When you want to stop the gulp task, hit `ctrl + C`.\n\n_For theming: add separate file (theme.scss) in`src/scss/themes/`, override the default `$theme` variable, and run `gulp themes`._\n\n## Requirements\n- Node/NPM\n- LibSass\n- Gulp\n\n## Features\n- Live reloading with BrowserSync\n- Image Minification\n- Github Pages deployment\n- Sass linting (based on [default](https://github.com/sasstools/sass-lint/blob/master/lib/config/sass-lint.yml) config)\n- Autoprefixer configuration\n- SMACSS and Atomic Design-based folder structure\n- `px` to `em`, `px` to `rem` and other useful functions.\n- Mixins for inlining media queries.\n* Useful CSS helper classes.\n* Default print styles, performance optimized.\n* \"Delete-key friendly.\" Easy to strip out parts you don't need.\n- Includes:\n  - [`Normalize.css`](https://necolas.github.com/normalize.css/)\n    for CSS normalizations and common bug fixes\n  - [`CSS Pesticide`](https://pesticide.io)\n    for easy CSS debugging\n  - [`jQuery`](https://jquery.com/) via CDN, with a local fallback\n  - [`Modernizr`](http://modernizr.com/), via CDN, for feature\n    detection\n  - [`Apache Server Configs`](https://github.com/h5bp/server-configs-apache)\n    that, among other, improve the web site's performance and security\n\n## Dependencies\n```\n  \"browser-sync\": \"^2.0.0-rc4\",\n  \"colors\": \"^1.1.2\",\n  \"del\": \"^2.0.2\",\n  \"gulp-autoprefixer\": \"^2.1.0\",\n  \"gulp-concat\": \"^2.4.3\",\n  \"gulp-gh-pages\": \"^0.4.0\",\n  \"gulp-imagemin\": \"^2.1.0\",\n  \"gulp-jshint\": \"^1.9.0\",\n  \"gulp-minify-css\": \"^0.3.12\",\n  \"gulp-minify-html\": \"^0.1.8\",\n  \"gulp-notify\": \"^2.2.0\",\n  \"gulp-plumber\": \"^0.6.6\",\n  \"gulp-rename\": \"^1.2.0\",\n  \"gulp-sass\": \"^1.3.2\",\n  \"gulp-sass-lint\": \"1.0.1\",\n  \"gulp-size\": \"^1.2.0\",\n  \"gulp-sourcemaps\": \"^1.5.2\",\n  \"gulp-uglify\": \"^1.0.2\",\n  \"imagemin-pngquant\": \"^4.0.0\",\n  \"sassdoc\": \"^2.1.15\",\n  \"vinyl-paths\": \"^2.0.0\"\n```\n\n## Tasks\n- clean:dist\n- styles\n- browser-sync\n- deploy\n- js-app\n- js-libs\n- sass-lint\n- minify-html\n- watch\n- imagemin\n- stats\n- sassdoc\n- themes\n- default\n  - clean:dist\n  - browser-sync\n  - js-app\n  - js-libs\n  - imgmin\n  - minify-html\n  - styles\n  - watch\n- build\n  - clean:dist\n  - js-app\n  - js-libs\n  - imgmin\n  - minify-html\n  - styles\n  - copy\n- audit\n  - sass-lint\n  - stats\n\n## Directory structure\n\n```\n┌── .gitignore\n├── .htaccess\n├── .sass-lint.yml\n├── .travis.yml\n├── src\n│   ├── browserconfig.xml\n│   ├── crossdomain.xml\n│   ├── humans.txt\n│   ├── icons\n│   │   ├── apple-touch-icon-114x114-precomposed.png\n│   │   ├── apple-touch-icon-57x57-precomposed.png\n│   │   ├── apple-touch-icon-72x72-precomposed.png\n│   │   ├── apple-touch-icon-precomposed.png\n│   │   ├── apple-touch-icon.png\n│   │   ├── favicon.ico\n│   │   └── favicon.png\n│   ├── img\n│   ├── index.html\n│   ├── js\n│   ├── robots.txt\n│   └── scss\n│       ├── atoms\n│       │   └── _index.scss\n│       ├── base\n│       │   ├── _base.scss\n│       │   └── _index.scss\n│       ├── layout\n│       │   └── _index.scss\n│       ├── libs\n│       │   ├── _index.scss\n│       │   ├── _normalize.scss\n│       │   └── _pesticide.scss\n│       ├── molecules\n│       │   └── _index.scss\n│       ├── organisms\n│       │   └── _index.scss\n│       ├── overrides\n│       │   └── _index.scss\n│       ├── states\n│       │   ├── _index.scss\n│       │   └── _print.scss\n│       ├── themes\n│       │   └── rebeccapurple.scss\n│       ├── utilities\n│       │   ├── _colors.scss\n│       │   ├── _config.scss\n│       │   ├── _fonts.scss\n│       │   ├── _functions.scss\n│       │   ├── _index.scss\n│       │   ├── _mixins.scss\n│       │   └── _typography.scss\n│       ├── styles.scss\n│       └── _shame.scss\n├── gulpfile.js\n└── package.json\n```\n\n## Bugs \u0026 Support\nDeveloped by [@MinaMarkham](http://twitter.com/MinaMarkham). Please list all bugs and feature requests in the Github issue tracker.\n\n## Thanks \u0026 Resources\n\nThis toolkit is based on the work of the following fine people \u0026 projects.\n\n- [HTML5 Boilerplate](https://github.com/h5bp/html5-boilerplate)\n- [Scalable and Modular Architecture for CSS](http://smacss.com/book) (\u003cabbr title=\"Scalable and Modular Architecture for CSS\"\u003eSMACSS\u003c/abbr\u003e)\n- [Atomic Design](http://atomicdesign.bradfrost.com)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fminamarkham%2Fsassy-starter","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fminamarkham%2Fsassy-starter","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fminamarkham%2Fsassy-starter/lists"}