https://github.com/leongaban/sass-smacss

Organized project ready SASS modules using SMACSS
https://github.com/leongaban/sass-smacss

css sass scss smacss

Last synced: 2 months ago
JSON representation

Organized project ready SASS modules using SMACSS

• Host: GitHub
• URL: https://github.com/leongaban/sass-smacss
• Owner: leongaban
• Created: 2015-03-08T07:29:17.000Z (almost 10 years ago)
• Default Branch: master
• Last Pushed: 2018-08-30T20:43:48.000Z (over 6 years ago)
• Last Synced: 2024-11-21T21:56:29.344Z (3 months ago)
• Topics: css, sass, scss, smacss
• Language: CSS
• Homepage:
• Size: 82 KB
• Stars: 28
• Watchers: 4
• Forks: 11
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        

# sass-smacss 1.0.3

By @leongaban

### Scalable and modular architecture for CSS https://smacss.com | http://sass-lang.com

![Bower, SMACSS, SASS](https://raw.githubusercontent.com/leongaban/github_images/master/sass-smacss-logo.png)

##### SMACSS is a style guide for writing and organizing SASS modules.

##### Steps to install

Install Node (which comes with NPM): https://nodejs.org/

#### NPM

`$ npm i sass-smacss`

#### Bower.io

`$ bower install sass-smacss`

The layout tree below, the module layouts imports all sectional styles from the layouts folder:

Main sass module: `bower_components > sass-smacss > sass > main.scss`

#### What's new

- sass-lint.yml added

- Gulp file removed

- input.scss removed

- comments removed, lint errors fixed and clean up

- package published to NPM

```

/*==========================================================

Master Stylesheet

============================================================

stylesheets/

|-- vendors/

| |-- _reset # Eric Meyer's reset v2.0.0

|

|-- modules/

| |-- _base # Imports all the modules

|  |-- _animation

|  |-- _colors

|  |-- _fonts

|  |-- _mixins

|

| |-- _defaults

| |-- _buttons

| |-- _fonts

| |-- _components

|  ...

|

| |-- _svg

| |-- _queries

|

|-- vendors/

| |-- _normalize # Nicolas Gallagher v3.0.2

| ...

|

`-- main

*/

@import 'vendors/normalize';

@import 'vendors/reset';

@import 'modules/base';

@import 'modules/defaults';

@import 'modules/inputs';

@import 'modules/buttons';

@import 'modules/components';

@import 'modules/svg';

@import 'modules/queries';

```

Next are the normalize and reset modules. Base module imports the mixins, colors and other less frequently updated settings/modules:

```

@import 'mixins';

@import 'colors';

@import 'fonts';

@import 'animation';

```

Colors

Example:

```

// Primary

$blue: #024562;

$green: #249B7A;

$red: #F25A43;

// Brands

$facebook: #438acb;

$twitter: #5cbde9;

// Elements

$body: #fff;

$button: $blue;

$buttonHover:	lighten($blue, 10%);

```

defaults.scss is where all main non-custom elements are set:

```

/* Start of styles | Defaults

==================================================== */

html, body { width: 100%; height: 100%; }

body {

  overflow-x: hidden;

  // font-family: 'Ubuntu', sans-serif; // <- choose your body font

  // font-weight: 300;

  font-size: em(16);

  color: #666;

  background: $body;

}

...

```

Then modules such as inputs, tables, buttons etc should follow:

```

@import "modules/inputs";	// Inputs & Selects

@import "modules/buttons";	// Buttons

```

Next comes the components module which starts importing your component styles for your React or AngularJS app:

```

/* Components

==================================================== */

// Header

@import '../components/header';

```

Finally the SVG or PNG and media queries modules.

```

@import 'modules/svg';

@import 'modules/queries';

```

In 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.

```

// Profile | profile.scss

.green-phone-icon,

.remove-info,

.dropdown-arrow,

// Reports | reports.scss

.check-green,

.check-red,

.css-label,

// Errors | alerts.scss

.lost-man {

  background-size: 1600px 1600px;

  background-image: url(/static/img/dashboard/icons.svg), none;

}

```

Class in seperate module using the SVG background image.

```

.green-phone-icon {

  float: left;

  width: 24px;

  height: 24px;

  margin: 5px 10px;

  background-position: -50px -150px;

}

```

Added example of custom mixin function for creating multiple colored items

```

/*

  Custom mixin | colored-tag

  usage:

  .tag {

    border: 1px solid $gray_light;

    background: $gray_bg;

    @include transition(all, .2s, ease-out);

    &.blue1 { @include colored-tag($blue1) }

    &.blue2 { @include colored-tag($blue2) }

    &.blue3 { @include colored-tag($blue3) }

  }

 */

@mixin colored-tag($kolor) {

  border: 1px solid $kolor;

  background: $kolor;

  @if $kolor == $yellow {

    color: $gray4;

    &:hover {

      border: 1px solid $kolor !important;

      background: lighten($kolor, 20%) !important;

    }

  } @else if $kolor == $gold {

    color: $gray4;

    &:hover {

      border: 1px solid $kolor !important;

      background: lighten($kolor, 20%) !important;

    }

  } @else if $kolor == $orange {

    color: $gray4;

    &:hover {

      border: 1px solid $kolor !important;

      background: lighten($kolor, 20%) !important;

    }

  } @else {

    color: #fff;

    &:hover {

      // color: $gray4;

      border: 1px solid $kolor !important;

      background: lighten($kolor, 10%) !important;

    }

  }

}

```