TAG SCSS Starter w/ Gulp
To Get Started:
- If they aren't already, make sure that node and npm (Node Package Manager) are installed. If you are using a Mac, Homebrew is recommended for this.
- If this is your first time ever using gulp, you will need to install it globally by running
npm install -g gulp
so that the terminal recognizes gulp commands. - The first time running this particular project,
cd
into this directory and typenpm install
- To continually watch .scss and .js files for changes, type
gulp
and usectrl + C
to stop. - To run a one-time compilation of .scss files, type
gulp scss
Note: You'll need the livereload browser extension to automatically refresh on changes.
Guidelines:
- In general, all units should use the
px-to-rem()
described in scss/base/_functions.scss - With rare case-by-case exceptions, bitmap sprites should never be used.
- For multi-color illustrations for which a bitmap sprite might often be used, use an SVG sprite instead if at all possible.
- Do not nest your CSS selectors, except for states (:hover, etc.), pseudoelements(:before, :after), or pseudo-selectors (:nth-child, etc.). While SCSS provides this functionality, it can easily get out of control creating hard-to-read code and unwieldy selectors.
- All styling should be done mobile-first. This repo contains a mixin for the
min-width
media query only, which in the vast majority of cases should be all you need. - When in doubt, break your code out into its own partial. You can add partials by first creating the partial and then importing it from _components.scss, _base.scss, _layout.scss, or _global.scss. In the majority of cases, it will belong in components. Do not put partials outside of these folders.
- View the full TAG Front-End Best Practices
Grid:
- Susy removed fbeb55f
Generating Icons
- Add your icons to
images/svg/
and run thegulp icons
task. This will optimize your SVGs and create an icon font with scss partial. - Tip: If your icons seem tiny or invisible despite normal font sizes, make sure that none of the svg files have
width="100%"
and/orheight="100%"
on the<svg>
tag.
Sass-lint
Sass-lint accepts YML
or JSON
files. Config needs to be in project root unless you specify in package.json
.
If you need to ignore a rule use: // sass-lint:disable <rule>, <rule>
and include a reason.
Helpful References:
Frequently Used JS Libraries:
- Owl carousel and its documentation