Introduction

Welcome to the UI page

Below are some resources and example of templates, quick font examples, and mixins in use. If you're ever working with a mock and things look a little inconsistent be sure to check this page and try to match what we have here.

This page is updated to match the most current style guide/tiles. If there is anything that doesn't match the most current version, be sure to make the fixes yourself and notify Erik about it, or just notify Erik and he'll make sure it's taken care of.

H1 in heros or classed "hero"

H1 Who We AreAnd What We Do

Add ".bottom" to add bottom padding

Check base.scss for color classes like "yellow" or "white" or "blue", most headings have this class feature but add to the base if you find some that don't.

H2 INTRODUCTION

H2 with Icon Re-Usable Oxygen template (padding baked in)

H3 News Titles text and "Quote text"

H4 Academic Research and Analysis

H5 is body text but bold, as seen on Business Ethics in the books section

Body text

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas pretium placerat felis, dignissim interdum nulla venenatis quis. Aliquam id lacinia tellus. Quisque eget vehicula elit. Nulla condimentum nisl augue, quis molestie mauris bibendum quis. Aliquam imperdiet faucibus tempor. Nunc euismod metus a mauris condimentum, ut pellentesque arcu tristique. Suspendisse et lacus venenatis, consectetur urna a, tincidunt erat. Nullam feugiat tortor non accumsan egestas. Nam malesuada, purus sit amet vulputate consequat, neque purus finibus orci, id euismod nisi libero in metus. Nullam volutpat imperdiet erat id condimentum. Suspendisse interdum et dolor sed varius. Curabitur viverra ante est, quis volutpat est ultricies eget. Cras urna velit, ultrices sit amet auctor at, tincidunt sit amet felis. Cras et risus est. Duis a purus scelerisque, eleifend ligula varius, egestas diam. Proin at mattis lacus.

Maecenas aliquet luctus scelerisque. Phasellus vulputate, erat sit amet imperdiet lobortis, nibh turpis accumsan dui, a venenatis elit lacus et dui. Etiam quis ipsum ac enim gravida hendrerit. Morbi libero enim, consequat a lectus eget, porttitor posuere eros. Nunc ut aliquet ex. Cras mollis, mauris non aliquam tempor, lacus mauris malesuada velit, et lobortis massa felis at ante. Aliquam egestas ante mattis lorem convallis, eget sodales urna semper.

Quisque at mi ut dolor venenatis mattis id et ligula. Nullam sit amet volutpat urna, id vestibulum nulla. Quisque dapibus ullamcorper pellentesque. Proin eget volutpat risus, vel dictum nunc. Ut tincidunt sagittis ultricies. Phasellus neque sem, euismod eu metus at, interdum finibus nibh. Ut consequat nibh at sollicitudin convallis. Fusce auctor non leo ut pharetra. Sed lorem justo, ullamcorper nec purus non, tempus posuere libero. Maecenas eleifend erat a viverra ultrices. Morbi dui mauris, ultrices a consequat ac, sodales vitae massa.

This is a plain ol'button
"white" class button
"Dark" class button
Hover states subject to change

Accordion template

This is a block of text. Double-click this text to edit it.

Comment out "max-height" in elements/accordion.scss when trying to input or check copy.

This is a block of text. Double-click this text to edit it.

elements/row-intro.scss

This is a large intro row

Remove elements as needed. This is where the para text would go

Download the documents

button button

Intro Row with "center" class

Below is the intro row with the "small" class. with columns and content removed

elemnts/two-col.scss

The sections (rows) come as page-width pages and should be changed to full-width pages. All sections have 1 $col-vw added on the left and right.

Add left and right padding according to mock

$col-vw/4 on side of columns

Wave template at elements/wave-clippings.scss

The wave is a custom code block where you can change the SVG and control the color with classes like "yellow", "blue", "light-grey" and so on.

Class "top" to align to the top, and "bottom" bottom.

You can easily add bottom padding to the section that holds the wave by adding "wave-bottom" or "wave-top"

Styles for this can be found in elements/extras.scss

Sections also take color classes

Styles for this can be found in elements/extras.scss

Below is the copy right template, use it when needed

Published by Scarboro Missions (Toronto, Canada)

PERMISSION TO REPRINT THIS DOCUMENT:

Scarboro Missions encourages the reproduction and use of this document for educational purposes for limited distribution.

For permission to reproduce this document for commercial use or large-scale distribution, contact Paul McKenna at tel. 416-261-7135 ext. 296 or e-mail interfaith@scarboromissions.ca

Two Col has lots of feautres

Be sure to check out elements/two-col.scss for more features such as images on the left, the right, and more!

Mixins

There are some mixins that we'll be using to make row padding a lot easier when it comes to standardized padding and mobile optimization.

Check out utilities/mixins to see the padding mixins that should be used through out the pages.

The padding is usually used for the padding of rows and the gutters on the side. Since each page is unique, use your best judgment on when to use the mixins or when to do it by hand.

There is also some typography vertical padding that can be used. Usually adding the class "bottom" will add the padding desired but if you would like to use it elsewhere just add to the style sheet that suits the context of the class for padding.

As always, use your best judgment

Try and aim for matching the mock when you can but this site is extremely large so we'd rather you take your time and do a quality job. With the sheer amount of pages this site has quality control is going to be an area to keep an eye on.

If you have any questions about anything related to this page or page development on this site, feel free to get in touch with Erik and he'll get back to you when he can.

Happy deving!