This course focuses on how to recreate the Vista project web page. It makes full use of Source and the Addon stacks (and also Limelight from Big White Duck!).
We will build this step by step and at each stage will learn about the various options and settings that are used to achieve the different layouts and effects.
Advanced Container sizing and positioning
A look at using the Container Plus stack to have different widths (and different alignments) at different breakpoints
Custom column definitions
A look at using Grid Plus to define our own custom column definitions (including split width columns)
Spanning grid items
You can begin to build some really interesting grids when you set some items to span multiple columns and/or rows
Layering grid items
Another approach when building advanced layouts is to set different grid items to overlap
Re-ordering grid items
The position of every grid item in Grid Plus can be controlled at different breakpoints
Adding in modals
We make use of Limelight stack (from Big White Duck) to display some content in lightboxes.
Creating a full page Nav
Again using Limelight we can build a full screen custom navigation option
....and much more!
Vista is a great project to start 'levelling up' with Source as it begins to look at some more intersting and advanced layouts using the Container Plus and Grid Plus stacks.