{"id":23392709,"url":"https://github.com/leongaban/sass-smacss","last_synced_at":"2025-04-11T11:41:32.509Z","repository":{"id":28328955,"uuid":"31842010","full_name":"leongaban/sass-smacss","owner":"leongaban","description":"Organized project ready SASS modules using SMACSS","archived":false,"fork":false,"pushed_at":"2018-08-30T20:43:48.000Z","size":84,"stargazers_count":28,"open_issues_count":0,"forks_count":11,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-04-08T17:52:29.968Z","etag":null,"topics":["css","sass","scss","smacss"],"latest_commit_sha":null,"homepage":"","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/leongaban.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-03-08T07:29:17.000Z","updated_at":"2021-10-27T19:47:59.000Z","dependencies_parsed_at":"2022-08-17T17:55:40.780Z","dependency_job_id":null,"html_url":"https://github.com/leongaban/sass-smacss","commit_stats":null,"previous_names":[],"tags_count":15,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leongaban%2Fsass-smacss","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leongaban%2Fsass-smacss/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leongaban%2Fsass-smacss/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leongaban%2Fsass-smacss/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/leongaban","download_url":"https://codeload.github.com/leongaban/sass-smacss/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248385507,"owners_count":21094900,"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":["css","sass","scss","smacss"],"created_at":"2024-12-22T05:14:54.797Z","updated_at":"2025-04-11T11:41:32.478Z","avatar_url":"https://github.com/leongaban.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"\n# sass-smacss 1.0.3\nBy \u003ca href=\"http://twitter.com/leongaban\"\u003e@leongaban\u003c/a\u003e\n\n### Scalable and modular architecture for CSS https://smacss.com | http://sass-lang.com\n\n![Bower, SMACSS, SASS](https://raw.githubusercontent.com/leongaban/github_images/master/sass-smacss-logo.png)\n\n##### SMACSS is a style guide for writing and organizing SASS modules.\n\n##### Steps to install\nInstall \u003ca href=\"https://nodejs.org/\"\u003eNode\u003c/a\u003e (which comes with \u003ca href=\"https://www.npmjs.com/\"\u003eNPM\u003c/a\u003e): https://nodejs.org/\n\n#### NPM\n`$ npm i sass-smacss`\n\n#### Bower.io\n`$ bower install sass-smacss`\n\n\u003cstrong\u003eThe layout tree below, the module layouts imports all sectional styles from the layouts folder:\u003c/strong\u003e\n\nMain sass module: `bower_components \u003e sass-smacss \u003e sass \u003e main.scss`\n\n#### What's new\n\n- sass-lint.yml added\n- Gulp file removed\n- input.scss removed\n- comments removed, lint errors fixed and clean up\n- package published to NPM\n\n```\n/*==========================================================\nMaster Stylesheet\n============================================================\n\nstylesheets/\n|-- vendors/\n| |-- _reset # Eric Meyer's reset v2.0.0\n|\n|-- modules/\n| |-- _base # Imports all the modules\n|  |-- _animation\n|  |-- _colors\n|  |-- _fonts\n|  |-- _mixins\n|\n| |-- _defaults\n| |-- _buttons\n| |-- _fonts\n| |-- _components\n|  ...\n|\n| |-- _svg\n| |-- _queries\n|\n|-- vendors/\n| |-- _normalize # Nicolas Gallagher v3.0.2\n| ...\n|\n`-- main\n*/\n\n@import 'vendors/normalize';\n@import 'vendors/reset';\n@import 'modules/base';\n@import 'modules/defaults';\n@import 'modules/inputs';\n@import 'modules/buttons';\n@import 'modules/components';\n@import 'modules/svg';\n@import 'modules/queries';\n```\n\n\u003cstrong\u003eNext are the normalize and reset modules. Base module imports the mixins, colors and other less frequently updated settings/modules:\u003c/strong\u003e\n\n```\n@import 'mixins';\n@import 'colors';\n@import 'fonts';\n@import 'animation';\n```\n\n\u003cstrong\u003eColors\u003c/strong\u003e\n\nExample:\n\n```\n// Primary\n$blue: #024562;\n$green: #249B7A;\n$red: #F25A43;\n\n// Brands\n$facebook: #438acb;\n$twitter: #5cbde9;\n\n// Elements\n$body: #fff;\n$button: $blue;\n$buttonHover:\tlighten($blue, 10%);\n```\n\n\u003cstrong\u003edefaults.scss is where all main non-custom elements are set:\u003c/strong\u003e\n\n```\n/* Start of styles | Defaults\n==================================================== */\nhtml, body { width: 100%; height: 100%; }\n\nbody {\n  overflow-x: hidden;\n  // font-family: 'Ubuntu', sans-serif; // \u003c- choose your body font\n  // font-weight: 300;\n  font-size: em(16);\n  color: #666;\n  background: $body;\n}\n...\n```\n\n\u003cstrong\u003eThen modules such as inputs, tables, buttons etc should follow:\u003c/strong\u003e\n```\n@import \"modules/inputs\";\t// Inputs \u0026 Selects\n@import \"modules/buttons\";\t// Buttons\n```\n\n\u003cstrong\u003eNext comes the components module which starts importing your component styles for your React or AngularJS app:\u003c/strong\u003e\n```\n/* Components\n==================================================== */\n\n// Header\n@import '../components/header';\n```\n\n\u003cstrong\u003eFinally the SVG or PNG and \u003ci\u003emedia queries\u003c/i\u003e modules.\u003c/strong\u003e\n```\n@import 'modules/svg';\n@import 'modules/queries';\n```\n\n\u003cstrong\u003eIn the SVG module it's recommended to just add class names here, then in the modules where those classes are used, set the visual properties.\u003c/strong\u003e\n\n```\n// Profile | profile.scss\n.green-phone-icon,\n.remove-info,\n.dropdown-arrow,\n\n// Reports | reports.scss\n.check-green,\n.check-red,\n.css-label,\n\n// Errors | alerts.scss\n.lost-man {\n  background-size: 1600px 1600px;\n  background-image: url(/static/img/dashboard/icons.svg), none;\n}\n```\n\n\u003cstrong\u003eClass in seperate module using the SVG background image.\u003c/strong\u003e\n```\n.green-phone-icon {\n  float: left;\n  width: 24px;\n  height: 24px;\n  margin: 5px 10px;\n  background-position: -50px -150px;\n}\n```\n\n\u003cstrong\u003eAdded example of custom mixin function for creating multiple colored items\u003c/strong\u003e\n```\n/*\n  Custom mixin | colored-tag\n  usage:\n\n  .tag {\n    border: 1px solid $gray_light;\n    background: $gray_bg;\n    @include transition(all, .2s, ease-out);\n\n    \u0026.blue1 { @include colored-tag($blue1) }\n    \u0026.blue2 { @include colored-tag($blue2) }\n    \u0026.blue3 { @include colored-tag($blue3) }\n  }\n */\n\n@mixin colored-tag($kolor) {\n  border: 1px solid $kolor;\n  background: $kolor;\n\n  @if $kolor == $yellow {\n    color: $gray4;\n    \u0026:hover {\n      border: 1px solid $kolor !important;\n      background: lighten($kolor, 20%) !important;\n    }\n  } @else if $kolor == $gold {\n    color: $gray4;\n    \u0026:hover {\n      border: 1px solid $kolor !important;\n      background: lighten($kolor, 20%) !important;\n    }\n  } @else if $kolor == $orange {\n    color: $gray4;\n    \u0026:hover {\n      border: 1px solid $kolor !important;\n      background: lighten($kolor, 20%) !important;\n    }\n  } @else {\n    color: #fff;\n    \u0026:hover {\n      // color: $gray4;\n      border: 1px solid $kolor !important;\n      background: lighten($kolor, 10%) !important;\n    }\n  }\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fleongaban%2Fsass-smacss","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fleongaban%2Fsass-smacss","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fleongaban%2Fsass-smacss/lists"}