https://github.com/happycog/templatestarter2016

Happy Cog frontend starter files
https://github.com/happycog/templatestarter2016

Last synced: 3 months ago
JSON representation

Happy Cog frontend starter files

• Host: GitHub
• URL: https://github.com/happycog/templatestarter2016
• Owner: happycog
• Created: 2016-05-09T19:20:59.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2016-06-07T17:54:37.000Z (over 8 years ago)
• Last Synced: 2024-07-31T18:19:45.725Z (6 months ago)
• Language: CSS
• Homepage:
• Size: 14.3 MB
• Stars: 325
• Watchers: 29
• Forks: 24
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
## Happy Cog starter files

 - Does not include [Patternlab](http://patternlab.io/), can be ported over easily

### Coding Style

We follow Harry Robert's [CSS Guidelines](http://cssguidelin.es/)

#### Naming Classes

- Try to extract things you see repeating over and over into classes so you can reuse them for the sake of speed. We use an [Expressive CSS](http://johnpolacek.github.io/expressive-css/ BEM-hybrid) approach: class names should be very descriptive and never abbreviated (ex. `.button` not `.btn`). Follow BEM syntax but map to the property/value if only one style is captured. ex. `.text-align--center`, `.position--relative`. Please review the `_library.tools.scss` partial to see whats written and available for reuse.

#### Naming CSS Partials

- `config.` prefix denotes other files have dependencies on them

- `library.` prefix means file is basic, global styling and tooling

- `module.` is a small block of code that is indivisible

- `object.` is a collection of modules or a module and other elements

#### Breakpoints

- See `_config.mediaqueries.scss`

- We're using http://include-media.com/ to handle our media queries. Example usage:

```

@include media('>large') {

}

@include media('>=large') {

}

@include media(' .column` you can just use `.column-full`

- Gutters are defined at a fixed width per column.

#### Units of measure

- Please use the `rem()` function for all units (see `_config.map-fun.scss`), it will print a px fallback ex. `font-size: rem(15);`

#### Typography

- See [Expressive CSS for Type](http://cognition.happycog.com/article/expressive-type-for-css) and `_library.type-styles.scss`

- Text styles should be defined once, captured in classes to be applied directly to the elements in the HTML, classes like `.type-alpha--xxl`

- Text style classes should _never_ be extended with `@extend` in Sass, in general, please do not use `@extend`