Skip to content
The National Archives frontend toolkit
CSS HTML Other
Branch: master
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.
css
sass
test
tna-base/1.0
.gitignore
.travis.yml
Gruntfile.js
README.md
index.html
package.json

README.md

Build Status

tna-frontend-toolkit

The National Archives frontend toolkit

A collection of CSS and HTML elements for using as part of your application's frontend. A way of creating flexible and unique layouts whilst also maintaining consistency across TNA online. For more information please see our Design guide.

1.0 Installation

Coming soon...

2.0 Development setup

2.1 Clone Github repository 'tna-css-toolkit' using SourceTree

Click 'Remote' in SourceTree and you will be shown a full list of repositories you have access to. Then:

  • Create a folder called 'tna-css-toolkit' in the a desired directory
  • Select the 'tna-css-toolkit' repository in SourceTree and clone it to your newly created 'tna-css-toolkit' directory

2.2 Create a new project in PhpStorm

  • Select 'Create New Project from Existing Files'
  • Select 'Source files are in a local directory, no web server is yet configured'
  • Set the created 'tna-css-toolkit' directory and click 'Project Root'

2.3 Running Grunt

Assuming that the Grunt CLI has been installed follow the instructions on the Grunt website.

2.3.1 Available Grunt Tasks

There are several Grunt tasks available to developers. View the Gruntfile.js for a listing of included tasks

  • grunt will run a predefined set of tasks and result in an ongoing 'watch' tasks which responds to any changes to JavaScript and SASS files by compiling, concatenating and minifying the output.

Features

Bootstrap 3.3.6

Mobile first front-end framework, a stripped down version to the core grid elements http://getbootstrap.com/

Sass

A CSS extension language https://sass-lang.com/

Grunt

Grunt as a task manager to aid development http://gruntjs.com/

You can’t perform that action at this time.