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
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
Styles for this can be found in elements/extras.scss
Published by Scarboro Missions (Toronto, Canada)
Copyright © Scarboro Missions 2006
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
Be sure to check out elements/two-col.scss for more features such as images on the left, the right, and more!
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.
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!