happycog/templatestarter2016

Happy Cog frontend starter files

Happy Cog starter files

• Does not include Patternlab, can be ported over easily

Coding Style

We follow Harry Robert's CSS Guidelines

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('<large') {

}

Spacing

• See _library.spacing.scss
• We're using the lobotomized owl technique for vertical spacing, meaning you should rarely if ever have to add margin-top/margin-bottom on elements for spacing. Instead, please add a class of .spacing, .spacing--half, .spacing--double etc to the elements parents in order to create space between elements. If you have to add a parent div strictly for spacing, that is completely acceptable.
• We use the variable $padding to keep spacing around objects consistent

Grid

• Built off Neat grids
• Starter grid is a 12 column grid with fixed 10px gutters (see _config.grid.scss).
• Columns must be created with a .layout-NNN class. Where NNN is one of full, split-2, split-3, or split-4. Column percentages are expressed as .layout-split-2--25-75 where on desktop we expect a 2 column layout where the first column is 25% width and the second is 75% width.
• To avoid .layout-full > .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 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

templatestarter2016's Issues

Missing .bowerrc file

It currently defaults to installing in 'bower_components', but the Gruntfile is looking for 'components'.

Cannot get screen.css to compile

The Gruntfile is ignoring 'config.imports' because it's a partial. If it remove the underscore, it continually errors on sass variables.

_object.buttons.scss is named wrong

_config.imports.scss is looking for 'objects.buttons'

Still getting a terminal error on "grunt"

Running "sass:dev" (sass) task

Error: Invalid unit medium.
on line 189 of components/include-media/dist/_include-media.scss

@error $message;

----^
Warning: Use --force to continue.

Gulp version

Is there a Gulp version of the build file or is it Grunt only. I'm asking before deciding if I want to build my own or not 🎱

Undefined variables

$base-color: $green;
$pad: 20px;
$pad-double: $pad_2;
$pad-half: $pad/2;
$alpha-divider-color: $base-color;
$alpha-link-color: $base-color;
$alpha-link-color-hover: $base-color;
$button-color--alpha--inverse: $base-color;
$button-border-color--alpha--inverse: $base-color;
$button-color-hover--alpha--inverse: $base-color;
$button-border-color-hover--alpha--inverse: $base-color;
$button-background-color-hover--alpha--inverse: $base-color;
$button-color--alpha: $base-color;
$button-border-color--alpha: $base-color;
$button-color-hover--alpha: $base-color;
$button-border-color-hover--alpha: $base-color;
$button-background-color-hover--alpha: $base-color;
$button-background-color-hover--alpha--inverse: $base-color;
$button-background-color--beta: $base-color;
$button-background-color-hover--beta: $base-color;
$button-color-hover--beta: $base-color;
$color--alpha: $base-color;
$space: $pad;
$color--beta: $base-color;
$space-half: $space/2;
$space-and-half: $space+$space/2;
$space-double: $space_2;