Front-End Project Starter

Created By:

Killian Grant

Contributors:

Scott Kisloski

DEVELOPMENT

Front End Compilation Tasks

React:

npm run gulp-watch-react
npm run gulp-build-react

Vue:

npm run gulp-watch-vue
npm run gulp-build-vue

Starting http-server

npm run server-local
npm run server-prod

REMMY

Breakpoints

Breakpoints should be applied to override (cascade) any elements styles at specific browser widths.

@ include breakpoint(breakpoint-name) { ... }: overrides styles before and up-to the defined screen-size.
The breakpoint screen-size parameter also privides the number of columns available to the grid at that breakpoint. For example, 'desktop' carries 12 columns, whereas 'tablet' carries only 8

The Grid

@ include container: houses groups of columns. should be applied to grouped content. Flexbox vertical alignment properties may be applied to containers without ill effects.
@ include cols($columns, $context): determines the width of each element.
- $columns is the number of columns the element should span out of the number of columns available (via $context or breakpoint).
- If $context is provided, it overrides the default number of columns available from the breakpoint.