Skip to content
This repository

Shared front-end resources for Guardian projects

branch: master

Fetching latest commit…

Octocat-spinner-32-eaf2f5

Cannot retrieve the latest commit at this time

Octocat-spinner-32 build
Octocat-spinner-32 docs
Octocat-spinner-32 html
Octocat-spinner-32 i
Octocat-spinner-32 js
Octocat-spinner-32 less
Octocat-spinner-32 node_modules
Octocat-spinner-32 sass
Octocat-spinner-32 .gitignore
Octocat-spinner-32 Gruntfile.js
Octocat-spinner-32 LICENSE
Octocat-spinner-32 README.md
Octocat-spinner-32 bower.json
Octocat-spinner-32 setup.sh
README.md

Introduction

Pasteup is where design meets development. It is where the Guardian’s globally recognised design language is turned into code for the web, and the starting point when styling Guardian branded products for both internal teams and third parties.

Why Pasteup? It's a newspaper term for "the assemblage of pages by pasting type onto page mockups, which are then photographed to be made into metal plates for the printing press" (courtesy of John E McIntyre). This is quite a nice metaphor for how client-side development builds the Guardian's pages. Plus it sounds cool.

Using Pasteup

Link to Pasteup CSS and JavaScript files directly. The current URLs can be found at http://pasteup.guim.co.uk/index.html.

Using Bower in your own build

You can install Pasteup using bower.

> npm install -g bower
> bower install pasteup

This will create a components/pasteup directory and you can reference Pasteup LESS and JS files directly in your own code. For example, in LESS:

@import "components/pasteup/less/layout.less";
@import "components/pasteup/less/zones.less";

Or in you requirejs paths configuration:

paths: {
    detect: "components/pasteup/js/modules/detect",
    images: "components/pasteup/js/modules/images"
}

Contributing to Pasteup

To build Pasteup you need the following installed:

  • nodejs
  • npm
  • grunt

On linux you can run > ./setup to do this.

With these dependencies installed try the following.

> grunt # Runs the build, starts server on http://localhost:3000 and watches files for changes.

> grunt build # Runs the build.

Something went wrong with that request. Please try again.