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.
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
2.3.1 Available Grunt Tasks
There are several Grunt tasks available to developers. View the Gruntfile.js for a listing of included tasks
Mobile first front-end framework, a stripped down version to the core grid elements http://getbootstrap.com/
A CSS extension language https://sass-lang.com/
Grunt as a task manager to aid development http://gruntjs.com/