Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
html
src
.gitignore
Gemfile
Gemfile.lock
README.md
gulpfile.coffee
npm-shrinkwrap.json
package.json
update

README.md

internship.report

Frontend setup

  1. Install Node if not installed
  2. Ensure ./node_modules is in your PATH
  3. Run npm install
  4. Run gulp

Gulp tasks

List available tasks: gulp help

LiveReload (optional)

LiveReload is enabled while gulp watch is active. To use, install the the LiveReload extension for your browser and activate it for the relevant page(s) (in Chrome, click the extension icon when viewing a page).

Linting setup (optional)

Run bundle install (unless scss_lint gem is already available).

Updating live/staging

Run ./update && gulp dist - this does the following:

  1. Stashes changes (if stashable changes exist)
  2. Rebases origin/current branch onto current branch
  3. Applies stashed changes (if changes were stashed)
  4. Runs default gulp task
  5. Versions and minifies CSS/JS

Generating SVG sprites

For each sprite, create the following directory pattern (replacing {spritename} with a URL-friendly ID, e.g. ui or logos):

./src/sprites/{spritename}/svg/

Inside this nested svg directory, add an .svg file for each icon (with URL-friendly file names). These should be pre-scaled to the size at which they will be used (not vital as they're scalable, but this will help in IE8 when they're replaced with raster graphics)

Add the following @import rule to your Sass: @import "{spritename}/sprite.scss"; (Replacing {spritename} as above)

Run gulp sprites && gulp sass. This generates the SVG sprite + creates a reference HTML file: ./src/sprites/{spritename}/svg/sprite.html (may be useful as an overview of the available icons)

If you add additional .svg files in future, re-run gulp sprites && gulp sass

Using SVG sprites

Use markup similar to:

<i class="icon icon--{spritename}__{iconname}">
	<svg><use xlink:href="/media/images/sprites/{spritename}.svg#{iconname}" xmlns:xlink="http://www.w3.org/1999/xlink"></use></svg>
</i>

e.g. If a sprite exists named ui which contains an icon file named logo.svg, the markup to use the logo portion of the sprite would be:

<i class="icon icon--ui__logo">
	<svg><use xlink:href="/media/images/sprites/ui.svg#logo" xmlns:xlink="http://www.w3.org/1999/xlink"></use></svg>
</i>