Indigo design language
JavaScript HTML CSS
Latest commit ebfbf46 Feb 16, 2017 @LouiseSchuller LouiseSchuller committed on GitHub Merge pull request #168 from laurieaUCL/master
Added space between degree name and qualification for SAYT
Permalink
Failed to load latest commit information.
css add mobile give button tweak Dec 6, 2016
images added grey ucl logo for the bartlett Dec 1, 2016
js Merge branch 'master' of https://github.com/UCL-WAMS/indigo Feb 16, 2017
sass
skins add back files May 13, 2015
.editorconfig add back files May 13, 2015
.gitignore
README.md
accordion-multiple.html
accordion.html add back files May 13, 2015
advert.html add back files May 13, 2015
audio.html add back files May 13, 2015
banner-image.html updated image lazy loading classes on png and svg Nov 25, 2016
blockquote.html
blurb-wide.html
blurb.html remove figure and figurecaption for blurb templates Dec 11, 2015
box-tagged.html add back files May 13, 2015
box.html
breadcrumb-nav.html
breadcrumb.html
carousel.html add back files May 13, 2015
code.html add back files May 13, 2015
favicon-144.png add back files May 13, 2015
favicon-152.png
favicon.ico
flag.html
footer.html update gh pages with upstream master Jun 4, 2015
form-in-template.html
form.html merge upstream into gh-pages Jul 20, 2015
global-masthead.html update wrong masthead links in template files Dec 1, 2015
gruntfile.js adding twitter function to all-site Sep 30, 2016
hero.html
image.html
index.html add back files May 13, 2015
leftnav-logo.html add back files May 13, 2015
leftnav.html add back files May 13, 2015
lightbox.html add back files May 13, 2015
longform.html add back files May 13, 2015
map.html
media.html
menu-block.html add back files May 13, 2015
navigation.html
package.json
pre.html add back files May 13, 2015
pullquote.html
readme.txt add back files May 13, 2015
responsive-image-1col-template.html
responsive-image-2col-template.html updated image lazy loading classes on png and svg Nov 25, 2016
responsive-image.html
search-page-paired-listing.html
search-page.html
search.html
social-buttons.html add flickr and youtube to social icons Sep 7, 2015
table-responsive.html add back files May 13, 2015
table.html add back files May 13, 2015
tabs.html update gh pages with upstream master Jun 4, 2015
template-1col-vertical-nav.html updated image lazy loading classes on png and svg Nov 25, 2016
template-carousel.html
template-combi-nav-2-col.html updated image lazy loading classes on png and svg Nov 25, 2016
template-combi-nav-3-col.html
template-cta.html updated image lazy loading classes on png and svg Nov 25, 2016
template-horizontal-nav-one-col.html
template-horizontal-nav.html updated image lazy loading classes on png and svg Nov 25, 2016
template-left-nav.html updated image lazy loading classes on png and svg Nov 25, 2016
template-long-vertical-nav.html
template-sticky-nav.html updated image lazy loading classes on png and svg Nov 25, 2016
template-video-listing.html
template-video.html updated image lazy loading classes on png and svg Nov 25, 2016
template.html updated image lazy loading classes on png and svg Nov 25, 2016
typography.html add back files May 13, 2015
ucl-banner.html
vcard.html add back files May 13, 2015
video.html

README.md

UCL Design Language - release 2

The UCL Design Language repository contains:

  • All individual patterns, saved as separate .html files
  • The foundation Sass
  • The CSS output
  • Web fonts
  • Global images
  • Javascript
  • Respond js when using a CDN
  • Require js
  • Editing Files

The following steps will describe how to use the existing design language foundation to create a new UCL website.

  1. Download the foundation files - at a minimum you will need the css, fonts, img and js folders.

  2. Start with the template.html file which will show you a basic structure for the foundation website to create your pages.

  3. If you are extending the Foundation the elements that must remain in any design are the Global Masthead, UCL Banner and UCL Footer.

  4. It is best to use Sass while working with the UCL Design Language. Keep your site specific styles separate to the foundation CSS. If using Sass then either create a new yoursite.scss file in the partials folder and add an import to it in the screen.scss file, or, add your Sass directly to the screen.scss file, underneath the imports.

  5. However, if using Sass is not possible, download the css folder and add your additional css directly to a new yoursite.css file in this folder . You will need to add a link to this css file in the head of your html documents, underneath the screen.css link.

  6. If you require specific patterns, then you can locate the abstracted code in the html files in the github repository. This code is modular and will work wherever it is placed within the site. Customisation options for the patterns will be documented in Indigo.

  7. The site uses respond js to achieve responsiveness on old IE browsers. If you are using a CDN you will need to make sure all of your CSS assets and your respond-proxy.html live on the same domain as the CDN see https://github.com/scottjehl/Respond

  8. You will need to set your staticBaseUrl relative to your local project for development. The staticBaseUrl we set is for projects that use the UCL cdn assests.

  9. Please see http://editorconfig.org/ for notes on the editorconfig. We have included this in the project. You will need to configure your IDE to use this file to have the correct settings for each file type.

Release 2 updates

We have updated the patterns and css so the class names and html follows the BEM methodology https://bem.info

We have added SCSS linting. To install linting please run the ruby command 'gem install scss-lint' - More info https://github.com/ahmednuaman/grunt-scss-lint