Jasmine Website Starter Layout Patterns
When you are new to website building, knowing how to achieve certain layout patterns can be a little tricky until you've become familiar with it, even when using a basic template like our Jasmine Web Starter. So to help you along, we are going to show you how to create a few common layout patterns using our templates. The patterns we plan to cover here will mostly be page patterns that you would add inside the <main></main> section of your pages.
As we go along explaining each pattern we will show you the code needed to build up each page, along with emmet snippets for you to copy and paste into your editor. Remember when pasting emmet snippets into your editor if you don't see the option menu press Ctrl + Spacebar then you will be able to press Tab You can also use the Ctrl + Spacebar twice to see a sample of the expanded snippet pressing Ctrl + Spacebar again will close the sample popup.
Now if you have already gone through our tutorial, plus read the JWS Style Layouts page, you will hopefully be a little familiar with using our templates to create a basic webpage, which includes a <header></header> <main></main> and <footer></footer> sections. For those of you that haven't yet, then no worries just head over to our Quick start page first, where we explain how to create a new page in your web editor, plus linking in the template stylesheet using snippets & emmet.
Pattern Tutorials
The following pattern tutorials are available for you to follow along and create your own...
Notes & News Feed
Looking to list and publish your research notes, or create a news feed with articles? This tutorial consist of patterns for 2 different page layouts, the first a listing page, and the second a news / research article page. News Pattern
ShareLinks Page
Need a page to refer your customers, users or followers to, where they can find all your social links and more? This tutorial is a starter pattern for a basic list of links, with a header bio section, and an optional footer section, which will have a growing collection of features to help you create your own unique link sharing page. Sharelink Pattern
Page Last Edited: