Brand
Logos
Colours
Typefaces
Typography
The modular typography uses a system generated by Typografier. There are multiple sizes and spacing classes available—all based on the font-size and line-height to create a harmonious vertical rhythm. See the documentation for all available classes.
Size adjustments
Typografier generates font-sizes and line-heights for different screen widths that are more appropriate for the available space.
Vertical spacing
The vertical spacing classes generated by Typografier provide a range of different sizes for both top & bottom padding and bottom margins. These same sizes would be applied to the island classes.
Horizontal spacing
The horizontal spacing classes generated by Typografier provide range of different sizes for left & right padding. These same sizes would be applied to the island classes.
Font sizes
There are 10 font-sizes available based on a typographic scale. The font-sizes and line-heights increase as the screen gets wider to better use the available space.
Grid
The grids generated by Gridifier provide an array of sizing options—with explicit classes—for each major breakpoint. See the documentation for all available classes.
Modules
Modulifier generates a series of simple, default CSS components that can be used throughout the site, or as basic building blocks for more complex patterns. See the documentation for all available classes.
List group
The list group system provides two classes: one for a vertical, stacking group of list items; and another for a horizontal, side-by-side group of list items.
Embed
Embed containers should be used for all content images, enforcing aspect ratios but also giving browsers a placeholder for the graphic before it loads to prevent unnecessary text reflows.
Media object
A simple pattern that provides and image beside some text—good for comments with avatars and many other situations. Will usually be combined into larger patterns.
Icons
The sprite sheet contains the following icons that are available for use in the website. Combine the icons with Modulifier classes for lots of variability. See the documentation for all available classes.
The banner is featured on the home page to grab the viewer's attention. The button on the banner directs to the dog adoption page.
<section role="banner">
<div class="relative">
<div>
<img class="img-flex" src="../../images/banner.jpg" alt="Loyal Rescue banner">
</div>
<div class="info w-1 text-center" id="banner">
<h2 class="yotta push-1-2 pad-t banner-heading">Rescuing Dogs in Need</h2>
<p class="push banner-text giga">Connecting foster dogs with their forever homes in the Toronto area.</p>
<div>
<a class="btn btn-reverse push" href="#">Adopt Now</a>
</div>
</div>
</div>
</section>
<section class="blog max-length island">
<h1 class="main-header">Blog</h1>
<div class="blog-post push-2">
<input type="checkbox" class="read-more-state" id="post">
<small class="not-bold">April 2, 2017 4:36PM</small>
<h2 class="tera push-1-4 pad-t-1-2">Natural Leather Wraps Fundraiser</h2>
<div class="read-more-wrapper push-1-2" id="wraps-hand">Loyal Rescue has been taking on more dogs than ever. As such we have much more medical bills to pay for all these poor dogs.
<div class="read-more-target inline-block"> Loyal Rescue has parterned with Natural Leather Wraps to raise money this month. Until the end of the month Natural Leather Wraps will donate 5% of the profit made to Loyal Rescue. Remember these make a great Mothers Day gift!
<img class="pad-t-1-2 img-flex" src="../../images/blog-leather-wraps.jpg" alt="Natural Leather Wraps on arm" aria-details="wraps-hand">
<p class="text-center img-caption">Natural Leather Wraps come in red, green and brown!</p>
</div>
</div>
<label for="post" class="read-more-btn"></label>
</div>
<div class="blog-post push-2">
<input type="checkbox" class="read-more-state" id="post-2">
<small class="not-bold">March 21, 2017 2:21PM</small>
<h2 class="tera push-1-4 pad-t-1-2">Dog of the Week: Rusty</h2>
<div class="read-more-wrapper push-1-2">Rusty has recovered fully after getting hit by a car.
<span class="read-more-target"> He unfortunately lost one leg during the process. But now Rusty is ready to go to a new home with loving pet parents.</span>
</div>
<label for="post-2" class="read-more-btn"></label>
</div>
</section>
These buttons use the primary colour to bring unity to the whole website. Each button has its own purpose:
- The regular button is for use on any light background.
- The reverse button is for use on an image or dark background. Specifically to be used on the banner.
- The icon button is for use on the cards featuring each adoptable dogs.
These are mixed with typografier classes to create buttons of all different sizes.
<a class="btn" href="#">Send</a>
<a class="btn btn-reverse" href="#">Adopt</a>
<a class="btn btn-icon relative" href="#"><i class="icon i-18 gutter absolute">
<svg><use class="paw" xlink:href="../../images/icons.svg#paw"/></svg>
</i><span class="icon-label">Adopt Me!</span></a>
The card section is how multiple cards are displayed.
<section class="grid island-1-2 card-section" id="adoptable">
<div class="wrapper">
<div class="island-1-2 unit xs-1 s-1 m-1-2 l-1-3">
<div class="card">
<div class="img">
<img class="img-flex relative" alt="winston" src="../../images/card-winston.jpg" aria-details="winston">
</div>
<div class="island-1-2" id="winston">
<h3 class="push-1-8 tera">Winston</h3>
<h4 class="push-1-2 mega">#4563</h4>
<p class="push-0">Golden Retriever</p>
<p class="push">Puppy | Male</p>
<div class="text-center">
<a class="btn btn-icon relative" href="#">
<i class="icon i-18 gutter absolute">
<svg><use class="paw" xlink:href="../../images/icons.svg#paw"/></svg>
</i>
<span class="icon-label">Adopt Me</span>
</a>
</div>
</div>
</div>
</div>
<div class="island-1-2 unit xs-1 s-1 m-1-2 l-1-3">
<div class="card">
<div class="img">
<img class="img-flex relative" alt="oliver" src="../../images/card-oliver.jpg" aria-details="oliver">
</div>
<div class="island-1-2" id="oliver">
<h3 class="push-1-8 tera">Oliver</h3>
<h4 class="push-1-2 mega">#4564</h4>
<p class="push-0">Dachshund</p>
<p class="push">Adult | Male</p>
<div class="text-center">
<a class="btn btn-icon relative" href="#">
<i class="icon i-18 gutter absolute">
<svg><use class="paw" xlink:href="../../images/icons.svg#paw"/></svg>
</i>
<span class="icon-label">Adopt Me</span>
</a>
</div>
</div>
</div>
</div>
<div class="island-1-2 unit xs-1 s-1 m-1-2 l-1-3">
<div class="card">
<div class="img">
<img class="img-flex relative" alt="princess" src="../../images/card-princess.jpg" aria-details="princess">
</div>
<div class="island-1-2" id="princess">
<h3 class="push-1-8 tera">Princess</h3>
<h4 class="push-1-2 mega">#4565</h4>
<p class="push-0">Dachshund</p>
<p class="push">Puppy | Female</p>
<div class="text-center">
<a class="btn btn-icon relative" href="#">
<i class="icon i-18 gutter absolute">
<svg><use class="paw" xlink:href="../../images/icons.svg#paw"/></svg>
</i>
<span class="icon-label">Adopt Me</span>
</a>
</div>
</div>
</div>
</div>
<div class="island-1-2 unit xs-1 s-1 m-1-2 l-1-3">
<div class="card">
<div class="img">
<img class="img-flex relative" alt="teddy" src="../../images/card-teddy.jpg" aria-details="teddy">
</div>
<div class="island-1-2" id="teddy">
<h3 class="push-1-8 tera">Teddy</h3>
<h4 class="push-1-2 mega">#4566</h4>
<p class="push-0">King Charles Spaniel</p>
<p class="push">Adult | Male</p>
<div class="text-center">
<a class="btn btn-icon relative" href="#">
<i class="icon i-18 gutter absolute">
<svg><use class="paw" xlink:href="../../images/icons.svg#paw"/></svg>
</i>
<span class="icon-label">Adopt Me</span>
</a>
</div>
</div>
</div>
</div>
<div class="island-1-2 unit xs-1 s-1 m-1-2 l-1-3">
<div class="card">
<div class="img">
<img class="img-flex relative" alt="lily" src="../../images/card-lily.jpg" aria-details="lily">
</div>
<div class="island-1-2" id="lily">
<h3 class="push-1-8 tera">Lily</h3>
<h4 class="push-1-2 mega">#4567</h4>
<p class="push-0">Borzoi</p>
<p class="push">Adult | Female</p>
<div class="text-center">
<a class="btn btn-icon relative" href="#">
<i class="icon i-18 gutter absolute">
<svg><use class="paw" xlink:href="../images/icons.svg#paw"/></svg>
</i>
<span class="icon-label">Adopt Me</span>
</a>
</div>
</div>
</div>
</div>
<div class="island-1-2 unit xs-1 s-1 m-1-2 l-1-3">
<div class="card">
<div class="img">
<img class="img-flex relative" alt="zoe" src="../../images/card-zoe.jpg" aria-details="zoe">
</div>
<div class="island-1-2" id="zoe">
<h3 class="push-1-8 tera">Zoe</h3>
<h4 class="push-1-2 mega">#4568</h4>
<p class="push-0">Yorkshire Terrier</p>
<p class="push">Puppy | Female</p>
<div class="text-center">
<a class="btn btn-icon relative" href="#">
<i class="icon i-18 gutter absolute">
<svg><use class="paw" xlink:href="../images/icons.svg#paw"/></svg>
</i>
<span class="icon-label">Adopt Me</span>
</a>
</div>
</div>
</div>
</div>
<div class="island-1-2 unit xs-1 s-1 m-1-2 l-1-3">
<div class="card">
<div class="img">
<img class="img-flex relative" alt="lucy" src="../../images/card-lucy.jpg" aria-details="lucy">
</div>
<div class="island-1-2">
<h3 class="push-1-8 tera">Lucy</h3>
<h4 class="push-1-2 mega">#4569</h4>
<p class="push-0">Pug</p>
<p class="push">Adult | Female</p>
<div class="text-center">
<a class="btn btn-icon relative" href="#">
<i class="icon i-18 gutter absolute">
<svg><use class="paw" xlink:href="../images/icons.svg#paw"/></svg>
</i>
<span class="icon-label">Adopt Me</span>
</a>
</div>
</div>
</div>
</div>
<div class="island-1-2 unit xs-1 s-1 m-1-2 l-1-3">
<div class="card">
<div class="img">
<img class="img-flex relative" alt="copper" src="../../images/card-copper.jpg" aria-details="copper">
</div>
<div class="island-1-2" id="copper">
<h3 class="push-1-8 tera">Copper</h3>
<h4 class="push-1-2 mega">#4570</h4>
<p class="push-0">Dalmatian</p>
<p class="push">Adult | Male</p>
<div class="text-center">
<a class="btn btn-icon relative" href="#">
<i class="icon i-18 gutter absolute">
<svg><use class="paw" xlink:href="../../images/icons.svg#paw"/></svg>
</i>
<span class="icon-label">Adopt Me</span>
</a>
</div>
</div>
</div>
</div>
<div class="island-1-2 unit xs-1 s-1 m-1-2 l-1-3">
<div class="card">
<div class="img">
<img class="img-flex relative" alt="riley" src="../../images/card-riley.jpg" aria-details="riley">
</div>
<div class="island-1-2" id="riley">
<h3 class="push-1-8 tera">Riley</h3>
<h4 class="push-1-2 mega">#4571</h4>
<p class="push-0">Chihauhua</p>
<p class="push">Senior | Male</p>
<div class="text-center">
<a class="btn btn-icon relative" href="#">
<i class="icon i-18 gutter absolute">
<svg><use class="paw" xlink:href="../../images/icons.svg#paw"/></svg>
</i>
<span class="icon-label">Adopt Me</span>
</a>
</div>
</div>
</div>
</div>
<div class="island-1-2 unit xs-1 s-1 m-1-2 l-1-3">
<div class="card">
<div class="img">
<img class="img-flex relative" alt="bear" src="../../images/card-bear.jpg" aria-details="bear">
</div>
<div class="island-1-2" id="bear">
<h3 class="push-1-8 tera">Bear</h3>
<h4 class="push-1-2 mega">#4572</h4>
<p class="push-0">Bernese Mountain Dog</p>
<p class="push">Adult | Male</p>
<div class="text-center">
<a class="btn btn-icon relative" href="#">
<i class="icon i-18 gutter absolute">
<svg><use class="paw" xlink:href="../../images/icons.svg#paw"/></svg>
</i>
<span class="icon-label">Adopt Me</span>
</a>
</div>
</div>
</div>
</div>
<div class="island-1-2 unit xs-1 s-1 m-1-2 l-1-3">
<div class="card">
<div class="img">
<img class="img-flex relative" alt="lucky" src="../../images/card-lucky.jpg" aria-details="lucky">
</div>
<div class="island-1-2" id="lucky">
<h3 class="push-1-8 tera">Lucky</h3>
<h4 class="push-1-2 mega">#4573</h4>
<p class="push-0">Jack Russel</p>
<p class="push">Adult | Male</p>
<div class="text-center">
<a class="btn btn-icon relative" href="#">
<i class="icon i-18 gutter absolute">
<svg><use class="paw" xlink:href="../../images/icons.svg#paw"/></svg>
</i>
<span class="icon-label">Adopt Me</span>
</a>
</div>
</div>
</div>
</div>
</div>
</section>
The cards provide a way to highlight and group important information. Notice how the edges of the card are rounded to appear soft and welcoming.
<div class="card">
<div class="img">
<img class="img-flex relative" alt="winston" src="../../images/card-winston.jpg">
</div>
<div class="island-1-2">
<h3 class="push-1-8 exa">Winston</h3>
<h4 class="push-1-2 mega">#4563</h4>
<p class="push-0 mega">Pug</p>
<p class="push-2 mega ">Puppy | Male</p>
<div class="text-center">
<a class="btn btn-icon relative" href="#">
<i class="icon i-18 gutter absolute">
<svg><use class="paw" xlink:href="../../images/icons.svg#paw"/></svg>
</i>
<span class="icon-label">Adopt Me!</span>
</a>
</div>
</div>
</div>
The footer pattern is used on the bottom of every Loyal Rescue webpage. The footer features all the main navigation links and social media links. The website and company copyright is found at the bottom of the footer.
<footer class="grid grid-middle footer" role="contentinfo">
<nav class="unit xs-1 s-1 m-1 l-2-3 island relative" id="nav-footer" role="navigation">
<ul class="grid list-group">
<li class="unit xs-1 s-1-2 m-1-2 l-1-4 push-1-2">
<ul class="list-group">
<li><a class="gutter-1-2 pad-t-1-4 pad-b-1-4" href="home.html">Home</a></li>
<li><a class="gutter-1-2 pad-t-1-4 pad-b-1-4 micro" href="home.html#happy-tails">Happy Tails</a></li>
<li><a class="gutter-1-2 pad-t-1-4 pad-b-1-4 micro" href="home.html#our-mission">Our Mission</a></li>
<li><a class="gutter-1-2 pad-t-1-4 pad-b-1-4 micro" href="home.html#contact-us">Contact Us</a></li>
</ul>
</li>
<li class="unit xs-1 s-1-2 m-1-2 l-1-4 push-1-2">
<ul class="list-group">
<li><a class="gutter-1-2 pad-t-1-4 pad-b-1-4" href="#">Blog</a></li>
<li><a class="gutter-1-2 pad-t-1-4 pad-b-1-4 micro" href="#">Process</a></li>
<li><a class="gutter-1-2 pad-t-1-4 pad-b-1-4 micro" href="#">Stories</a></li>
<li><a class="gutter-1-2 pad-t-1-4 pad-b-1-4 micro" href="#">Events</a></li>
<li><a class="gutter-1-2 pad-t-1-4 pad-b-1-4 micro" href="#">FAQ</a></li>
</ul>
</li>
<li class="unit xs-1 s-1-2 m-1-2 l-1-4 push-1-2">
<ul class="list-group">
<li><a class="gutter-1-2 pad-t-1-4 pad-b-1-4" href="#">Adopt</a></li>
<li><a class="gutter-1-2 pad-t-1-4 pad-b-1-4 micro" href="adopt.html#about">About</a></li>
<li><a class="gutter-1-2 pad-t-1-4 pad-b-1-4 micro" href="adopt.html#steps">Steps</a></li>
<li><a class="gutter-1-2 pad-t-1-4 pad-b-1-4 micro" href="adopt.html#adoptable">Adoptable</a></li>
</ul>
</li>
<li class="unit xs-1 s-1-2 m-1-2 l-1-4 push-1-2">
<ul class="list-group">
<li><a class="gutter-1-2 pad-t-1-4 pad-b-1-4" href="#">Application</a></li>
<li><a class="gutter-1-2 pad-t-1-4 pad-b-1-4 micro" href="application.html#personal-info">Personal Info</a></li>
<li><a class="gutter-1-2 pad-t-1-4 pad-b-1-4 micro" href="application.html#lifestyle">Lifestyle</a></li>
<li><a class="gutter-1-2 pad-t-1-4 pad-b-1-4 micro" href="application.html#pet-info">Pet Info</a></li>
<li><a class="gutter-1-2 pad-t-1-4 pad-b-1-4 micro" href="application.html#contract">Contract</a></li>
</ul>
</li>
</ul>
</nav>
<div class="unit xs-1 s-1 m-1 l-1-3 push text-center">
<div class="facebook-icon inline">
<a class="gutter-1-2 social" href="#">
<i class="icon icon-footer i-32">
<svg><use class="facebook" xlink:href="../../images/icons.svg#facebook"/></svg>
</i>
</a>
</div>
<div class="twitter-icon inline">
<a class="gutter-1-2 social" href="#">
<i class="icon icon-footer i-48">
<svg><use class="twitter" xlink:href="../../images/icons.svg#twitter"/></svg>
</i>
</a>
</div>
<div class="instagram-icon inline">
<a class="gutter-1-2 social" href="#">
<i class="icon icon-footer i-48">
<svg><use class="instagram" xlink:href="../../images/icons.svg#instagram"/></svg>
</i>
</a>
</div>
</div>
<div class="island copyright unit xs-1 s-1 m-1 l-1 relative">
<small class="milli">© Loyal Rescue. All right reserved.</small>
</div>
</footer>
Forms
These forms are used to gather information from potential dog adopters.
- The basic form is simple and easy to understand. The basic form is used on the application page to begin the process of adopting a dog.
- The icon form gathers the name, e-mail of the user and a comment/question on the home page. It is decorated more then the basic form because it is small. It can be used for any small form.
<section class="wrapper island basic-form">
<form class="grid" method="POST" novalidate="" action="https://formspree.io/obri0205@algonquincollege.com">
<div class="unit xs-1 s-1 m-1 l-1 error-message error-message-highlighted push" role="alert" aria-live="assertive" tabindex="-1">
<h4 class="push-0 tera warning text-center pad-t pad-b gutter">There was an error with the highlighted fields below</h4>
</div>
<fieldset class="w-1 push-2" id="personal-info">
<legend class="unit xs-1 tera main-legend push">Personal Information</legend>
<h3 class="unit xs-1 s-1 m-1-5 l-1-5 mega">Dog's Info</h3>
<div class="unit xs-1 s-1 m-2-5 push gutter-1-4">
<label class="milli" for="dog-name">Dog's name</label>
<input id="dog-name" name="dog name" required aria-describedby="dog-name-error">
<p class="error-message micro island-1-4 push-0" id="dog-name-error">
<i class="icon i-24"><svg><use xlink:href="../../images/icons.svg#warning"/></svg></i>
<span class="icon-label">Provide the name of the dog</span>
</p>
</div>
<div class="unit xs-1 s-1 m-2-5 l-2-5 push gutter-1-4">
<label class="milli" for="adopt-num">Adoption number</label>
<input type="number" name="adoption-number" id="adopt-num" required aria-describedby="adopt-num-error">
<p class="error-message micro island-1-4 push-0" id="adopt-num-error">
<i class="icon i-24"><svg><use xlink:href="../../images/icons.svg#warning"/></svg></i>
<span class="icon-label">Provide the dog's adoption number</span>
</p>
</div>
<h3 class="unit xs-1 s-1 m-1-5 l-1-5 mega">About You</h3>
<div class="unit xs-1 s-1 m-3-5 l-3-5 push gutter-1-4">
<label class="milli" for="name">Full name</label>
<input id="name" name="full-name" required aria-describedby="name-error">
<p class="error-message micro island-1-4 push-0" id="name-error">
<i class="icon i-24"><svg><use xlink:href="../../images/icons.svg#warning"/></svg></i>
<span class="icon-label">Provide your full name</span>
</p>
</div>
<div class="unit xs-1 s-1 m-1-5 l-1-5 push gutter-1-4">
<label class="milli" for="age">Age</label>
<input type="number" name="age" id="age" min="18" required aria-describedby="age-error">
<p class="error-message micro island-1-4 push-0" id="age-error">
<i class="icon i-24"><svg><use xlink:href="../../images/icons.svg#warning"/></svg></i>
<span class="icon-label">Must be over 18</span>
</p>
</div>
<div class="unit xs-1 s-1 m-1-5 l-1-5">
</div>
<fieldset class="unit xs-1 s-1 m-2-5 l-2-5 push gutter-1-4">
<legend class="milli not-bold push-1-2">Are you employed?</legend>
<input type="radio" name="employed" id="yes-employed" required aria-describedby="employed-error">
<label for="yes-employed">Yes</label>
<input type="radio" name="employed" id="no-employed" required aria-describedby="employed-error">
<label for="no-employed" class="gutter-1-2">No</label>
<p class="error-message micro island-1-4 push-0" id="employed-error">
<i class="icon i-24"><svg><use xlink:href="../../images/icons.svg#warning"/></svg></i>
<span class="icon-label">Select yes if you are employed</span>
</p>
</fieldset>
<div class="unit xs-1 s-1 m-2-5 l-2-5 push gutter-1-4">
<label class="milli" for="job-title">If yes, your job title <em class="flag-optional micro normal">(optional)</em></label>
<input id="job-title" name="job-title">
</div>
<h3 class="unit xs-1 s-1 m-1-5 mega">Contact</h3>
<div class="unit xs-1 s-1 m-2-5 l-2-5 push gutter-1-4">
<label class="milli" for="phone">Primary phone</label>
<input type="tel" name="primary-phone" id="phone" required aria-describedby="phone-error">
<p class="error-message micro island-1-4 push-0" id="phone-error">
<i class="icon i-24"><svg><use xlink:href="../../images/icons.svg#warning"/></svg></i>
<span class="icon-label">Provide your phone number</span>
</p>
</div>
<div class="unit xs-1 s-1 m-2-5 l-2-5 push gutter-1-4">
<label class="milli" for="email">E-mail address</label>
<input type="email" name="e-mail" id="email" required aria-describedby="email-error">
<p class="error-message micro island-1-4 push-0" id="email-error">
<i class="icon i-24"><svg><use xlink:href="../../images/icons.svg#warning"/></svg></i>
<span class="icon-label">Provide your e-mail address</span>
</p>
</div>
<div class="unit xs-1 s-1 m-1-5 l-1-5">
</div>
<div class="unit xs-1 s-1 m-2-5 l-2-5 push gutter-1-4">
<label class="milli" for="work-phone">Work phone <em class="flag-optional micro normal">(optional)</em></label>
<input type="tel" id="work-phone" name="work-phone">
</div>
<fieldset class="unit xs-1 s-1 m-2-5 l-2-5 push gutter-1-4">
<legend class="milli not-bold push-1-2">Can we call you at work? <em class="flag-optional micro normal">(optional)</em></legend>
<input type="radio" name="work-call" id="yes-work">
<label for="yes-work">Yes</label>
<input type="radio" name="work-call" id="no-work">
<label for="no-work" class="gutter-1-2">No</label>
</fieldset>
<h3 class="unit xs-1 s-1 m-1-5 l-1-5 mega">Address</h3>
<div class="unit xs-1 s-1 m-2-5 l-2-5 push gutter-1-4">
<label class="milli" for="apart-num">Apartment number <em class="flag-optional micro normal">(optional)</em></label>
<input name="apartment-number" id="apart-num">
</div>
<div class="unit xs-1 s-1 m-2-5 l-2-5 push gutter-1-4">
<label class="milli" for="street">Street address</label>
<input type="tel" name="street-address" id="street" required aria-describedby="street-error">
<p class="error-message micro island-1-4 push-0" id="street-error">
<i class="icon i-24"><svg><use xlink:href="../../images/icons.svg#warning"/></svg></i>
<span class="icon-label">Provide your street address</span>
</p>
</div>
<div class="unit xs-1 s-1 m-1-5 l-1-5">
</div>
<fieldset class="unit xs-1 s-1 m-1-5 l-1-5 push gutter-1-4">
<label class="milli" for="province">Province</label>
<select class="push-1-2" name="province" id="province">
<option value="AB">AB</option>
<option value="BC">BC</option>
<option value="MB">MB</option>
<option value="NB">NB</option>
<option value="NL">NL</option>
<option value="NS">NS</option>
<option value="NT">NT</option>
<option value="NU">NU</option>
<option value="ON">ON</option>
<option value="PE">PE</option>
<option value="QC">QC</option>
<option value="SK">SK</option>
<option value="YT">YT</option>
</select>
</fieldset>
<div class="unit xs-1 s-1 m-2-5 l-2-5 push gutter-1-4">
<label class="milli" for="city">City</label>
<input name="city-address" id="city" required aria-describedby="city-error">
<p class="error-message milli island-1-4 push-0" id="city-error">
<i class="icon i-24"><svg><use xlink:href="../../images/icons.svg#warning"/></svg></i>
<span class="icon-label">Which city do you live in?</span>
</p>
</div>
<div class="unit xs-1 s-1 m-1-5 l-1-5 push gutter-1-4">
<label class="milli" for="postal">Postal code</label>
<input name="postal-code" id="postal" pattern="[A-Za-z][0-9][A-Za-z] ?[0-9][A-Za-z][0-9]" required aria-describedby="postal-error">
<p class="error-message micro island-1-4 push-0" id="postal-error">
<i class="icon i-24"><svg><use xlink:href="../../images/icons.svg#warning"/></svg></i>
<span class="icon-label">Provide your postal code</span>
</p>
</div>
</fieldset>
<fieldset class="w-1 push-2" id="lifestyle">
<legend class="unit xs-1 tera main-legend push">Lifestyle</legend>
<h3 class="unit xs-1 s-1 m-1-5 mega">Environment</h3>
<fieldset class="unit xs-1 s-1 m-2-5 l-2-5 push gutter-1-4">
<label class="milli" for="house">Type of house</label>
<select name="house" id="house" required aria-describedby="house-error">
<option value="">Select One</option>
<option value="house">House</option>
<option value="semi-detach">Semi Detach</option>
<option value="townhouse">Townhouse</option>
<option value="condo">Condo</option>
<option value="apartment">Apartment</option>
<option value="mobile-home">Mobile Home</option>
<option value="other">Other</option>
</select>
<p class="error-message micro island-1-4 push-0" id="house-error">
<i class="icon i-24"><svg><use xlink:href="../../images/icons.svg#warning"/></svg></i>
<span class="icon-label">Select your house type?</span>
</p>
</fieldset>
<fieldset class="unit xs-1 s-1 m-2-5 l-2-5 push gutter-1-4">
<legend class="milli not-bold push-1-2">Rent or own?</legend>
<input type="radio" name="rent-own" id="rent" required aria-describedby="rent-error">
<label for="rent">Rent</label>
<input type="radio" name="rent-own" id="own">
<label for="own" class="gutter-1-2">Own</label>
<p class="error-message micro island-1-4 push-0" id="rent-error">
<i class="icon i-24"><svg><use xlink:href="../../images/icons.svg#warning"/></svg></i>
<span class="icon-label">Do you rent or own?</span>
</p>
</fieldset>
<div class="unit xs-1 s-1 m-1-5 l-1-5">
</div>
<fieldset class="unit xs-1 s-1 m-2-5 l-2-5 push gutter-1-4">
<legend class="milli not-bold push-1-2">Rural or urban?</legend>
<input type="radio" name="rural-urban" id="rural" required aria-describedby="rural-error">
<label for="rural">Rural</label>
<input type="radio" name="rural-urban" id="urban">
<label for="urban" class="gutter-1-2">Urban</label>
<p class="error-message micro island-1-4 push-0" id="rural-error">
<i class="icon i-24"><svg><use xlink:href="../../images/icons.svg#warning"/></svg></i>
<span class="icon-label">Do you live in a rural or urban area?</span>
</p>
</fieldset>
<div class="unit xs-1 s-1 m-2-5 l-2-5 push gutter-1-4">
<label class="milli" for="footage">Square footage <em class="flag-optional micro normal">(optional)</em></label>
<input type="number" id="footage" name="footage">
</div>
<div class="unit xs-1 s-1 m-1-5 l-1-5">
</div>
<fieldset class="unit xs-1 s-1 m-2-5 l-2-5 push gutter-1-4">
<label class="milli" for="yard">Yard size</label>
<select name="yard" id="yard" required aria-describedby="yard-error">
<option value="">Select One</option>
<option value="none">None</option>
<option value="small">Small</option>
<option value="medium">Medium</option>
<option value="large">Large</option>
</select>
<p class="error-message micro island-1-4 push-0" id="yard-error">
<i class="icon i-24"><svg><use xlink:href="../../images/icons.svg#warning"/></svg></i>
<span class="icon-label">What is your yard size?</span>
</p>
</fieldset>
<fieldset class="unit xs-1 s-1 m-2-5 l-2-5 push gutter-1-4">
<legend class="milli not-bold push-1-2">Is your yard fenced?</legend>
<input type="radio" name="fenced" id="fence-yes" required aria-describedby="fence-error">
<label for="fence-yes">Yes</label>
<input type="radio" name="fenced" id="fence-no">
<label for="fence-no" class="gutter-1-2">No</label>
<p class="error-message micro island-1-4 push-0" id="fence-error">
<i class="icon i-24"><svg><use xlink:href="../../images/icons.svg#warning"/></svg></i>
<span class="icon-label">Is your yard fenced?</span>
</p>
</fieldset>
</fieldset>
<fieldset class="w-1">
<legend class="unit xs-1 tera main-legend push">Pet Preference</legend>
<h3 class="unit xs-1 s-1 m-1-5 mega">Preference</h3>
<fieldset class="unit xs-1 s-1 m-4-5 l-4-5 push gutter-1-4">
<legend class="milli push-1-2 not-bold">What size of dog do you prefer? <em class="flag-optional micro normal">(optional)</em></legend>
<input type="checkbox" name="size" id="toy">
<label for="toy">Toy</label>
<input type="checkbox" name="size" id="small">
<label for="small" class="gutter-1-2">Small</label>
<input type="checkbox" name="size" id="medium">
<label for="medium" class="gutter-1-2">Medium</label>
<input type="checkbox" name="size" id="large">
<label for="large" class="gutter-1-2">Large</label>
</fieldset>
<div class="unit xs-1 s-1 m-1-5 l-1-5">
</div>
<div class="unit xs-1 s-1 m-4-5 l-4-5 push gutter-1-4">
<label class="milli" for="why-adopt">Why do you want to adopt a dog?</label>
<textarea name="why-adopt" id="why-adopt" required aria-describedby="why-adopt-error"></textarea>
<p class="error-message milli island-1-4 push-0" id="why-adopt-error">
<i class="icon i-24"><svg><use xlink:href="../../images/icons.svg#warning"/></svg></i>
<span class="icon-label">Tell us why you want to adopt</span>
</p>
</div>
</fieldset>
<div class="unit xs-1 s-1 m-1-5 l-1-5">
</div>
<div class="unit xs-1 s-1 m-2-5 l-2-5 push gutter-1-4">
<label class="milli" for="date">Date</label>
<input type="date" name="today-date" id="date" required aria-describedby="date-error">
<p class="error-message milli island-1-4 push-0" id="date-error">
<span class="icon-label">Select todays date</span>
</p>
</div>
<div class="unit xs-1 s-1 m-2-5 l-2-5">
</div>
<h3 class="unit xs-1 s-1 m-1-5 mega">Agreement</h3>
<div class="unit xs-1 s-1 m-4-5 l-4-5 push gutter-1-4">
<div class="milli not-bold push">
<p class="push-1-2">I certify that all the information provided is correct and true with nothing of relevence being omitted. I realize that my application may be denied if I have provied false or misleading information.</p>
<p class="push-1-2">I grant my permission for Loyal Rescue to contact my references and vet.</p>
<p class="push-1-2">I am aware the home visits are mandatory prior to and after adoption on a random basis.</p>
<p class="push-1-2">I am financially and physically able to care for a dog.</p>
</div>
<input type="radio" name="behavior" id="info-yes" required aria-describedby="info-error">
<label for="info-yes" class="push-1-4"><strong>I agree to the above statements and am older than 18</strong></label>
<p class="error-message micro island-1-4 push-0" id="info-error">
<i class="icon i-24"><svg><use xlink:href="../../images/icons.svg#warning"/></svg></i>
<span class="icon-label">Please agree to the terms</span>
</p>
</div>
<div class="unit xs-1 s-1 m-1-5 l-1-5">
</div>
<div class="unit xs-1 s-1 m-1-5 l-1-5 pad-t-1-2">
<button class="btn" type="submit">Submit</button>
</div>
<input type="hidden" name="_subject" value="Request to adopt a dog">
</form>
</section>
<section class="wrapper island icon-form push-2" id="contact-us">
<div class="max-length">
<form method="POST" novalidate="" action="https://formspree.io/obritschk@gmail.com">
<fieldset>
<legend class="peta push-1-4 pad-t-1-2 contact-legend">Contact Us</legend>
<div class="error-message error-message-highlighted push" role="alert" aria-live="assertive">
<h3 class="push-0 tera warning text-center pad-t pad-b gutter">There was an error with the highlighted fields below</h3>
</div>
<div class="push-1-2">
<label class="mega" for="name">Full Name</label>
<div class="relative">
<input id="name" required aria-describedby="name-error">
<p class="error-message milli pad-t-1-4 push-1-2" id="name-error">Please provide a full name</p>
<div class="form-background absolute pin-top-left">
<i class="icon i-24 absolute pin-center island-1-2"><svg><use xlink:href="../../images/icons.svg#person"/></svg></i>
</div>
</div>
</div>
<div class="push-1-2">
<label class="mega" for="email">Email</label>
<div class="relative">
<input id="email" required aria-describedby="email-error">
<p class="error-message milli pad-t-1-4 push-1-2" id="email-error">Please provide a proper e-mail</p>
<div class="form-background absolute pin-top-left">
<i class="icon i-24 absolute pin-center island-1-2"><svg><use xlink:href="../../images/icons.svg#mail"/></svg></i>
</div>
</div>
</div>
<div class="push-1-2">
<label class="mega" for="question">Questions or comments?</label>
<div class="relative">
<textarea name="question" id="question" required aria-describedby="question-error"></textarea>
<p class="error-message milli pad-t-1-4 push-1-2" id="question-error">Please tell us your comment</p>
<div class="form-background form-background-question absolute pin-top-left">
<i class="icon i-24 absolute pin-center island-1-2"><svg><use xlink:href="../../images/icons.svg#question"/></svg></i>
</div>
</div>
</div>
<div>
<input type="hidden" name="_subject" value="Contact">
</div>
<div class="pad-t-1-2">
<button class="btn" type="submit">Send</button>
</div>
</fieldset>
</form>
</div>
</section>
The header pattern is used on the top of every Loyal Rescue webpage. The header features the main website navigation and the Loyal Rescue logo.
<header class="masthead grid grid-middle gutter pad-t-1-2 pad-b-1-2 header">
<h1 class="mega unit xs-1 s-1 m-1 l-1-3 push-0">
<a class="logo" href="home.html">
<i class="icon i-64">
<img src="../../images/logo-64.svg" alt="Loyal Rescue logo">
</i><span class="gutter-1-2">Loyal Rescue</span>
</a>
</h1>
<nav class="unit xs-1 s-1 m-1 l-2-3 island-1-2 relative" id="nav" role="navigation">
<ul class="grid list-group text-center">
<li class="unit xs-1-2 s-1-2 m-1-2 l-1-4"><a class="gutter-1-2 pad-t-1-4 pad-b-1-4" href="#">Home</a></li>
<li class="unit xs-1-2 s-1-2 m-1-2 l-1-4"><a class="gutter-1-2 pad-t-1-4 pad-b-1-4" href="#">Blog</a></li>
<li class="unit xs-1-2 s-1-2 m-1-2 l-1-4"><a class="gutter-1-2 pad-t-1-4 pad-b-1-4" href="adopt.html">Adopt</a></li>
<li class="unit xs-1-2 s-1-2 m-1-2 l-1-4"><a class="gutter-1-2 pad-t-1-4 pad-b-1-4" href="application.html">Application</a></li>
</ul>
</nav>
</header>
The infographic is used on the adoptable dog page to educate viewers about the adoption steps. Simple animations are used to make the infographic more exciting.
<div class="text-center infographic-section">
<section class="grid island wrapper-infographic infographic" id="steps">
<div class="unit xs-1 s-1-2 step-1">
<div class="pad-t-1-2">
<h2 class="push-1-2 tera">Step 1</h2>
<p class="milli">Find your forever pet</p>
</div>
<div class="image push-2">
<svg class="animation" width="96" height="96" viewbox="0 0 96 96">
<g id="pug">
<g id="face">
<rect width="64.9" height="58.68" x="15.6" y="26.9" fill="#cbcaca" rx="6.6" ry="6.6" />
<rect width="35.3" height="7.86" x="30.4" y="80" fill="#06386e" rx="2.3" ry="2.3" />
<circle cx="48" cy="90.6" r="4.3" fill="#f0a979" />
<path fill="#06386e" d="M22.1 26.9a6.5 6.5 0 0 0-6.5 6.5V49l20.2-22.1z" />
<path fill="#06386e" d="M73.9 26.9a6.5 6.5 0 0 1 6.5 6.5V49L60.2 26.9z" />
<circle cx="32.2" cy="48.9" r="5.4" fill="#06386e" />
<circle cx="63.9" cy="48.9" r="5.4" fill="#06386e" />
<path fill="#fff" d="M35.4 48.3c-.5.9-.8-.4-1.7-.9s-2.2.1-1.7-.9a1.9 1.9 0 1 1 3.4 1.8z" />
<path fill="#fff" d="M67.4 48.3c-.5.9-.8-.4-1.7-.9s-2.2.1-1.7-.9a1.9 1.9 0 1 1 3.4 1.8z" />
<path fill="#06386e" d="M48.8 62.4c.6 4.2 4.6 5.2 7 5.3a1.4 1.4 0 0 1 1.2 1.9c-2.9 9.1-14.9 9.1-18 0a1.4 1.4 0 0 1 1.2-1.9c2.4-.2 6.5-1.1 7-5.3" />
<line x1="48" x2="48" y1="33.4" y2="49.3" fill="none" stroke="#06386e" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.47" />
<circle cx="48" cy="58.1" r="5.2" fill="#06386e" />
<path fill="none" stroke="#06386e" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.47" d="M53.8 31.5a5.7 5.7 0 1 1-11.5 0" />
<path fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.11" d="M50.9 59.3c0-1.2-1.3-2.3-2.9-2.3s-2.9 1-2.9 2.3" />
<path fill="none" stroke="#06386e" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2.95" d="M68.9 63.4c0-7.8-9.3-14.1-20.9-14.1s-20.8 6.3-20.8 14.1" />
<line x1="48.1" x2="48.1" y1="57" y2="63.3" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.11" />
<circle cx="33.9" cy="83.8" r="1.7" fill="#fff" />
<circle cx="61.9" cy="83.8" r="1.7" fill="#fff" />
<circle cx="40.9" cy="83.8" r="1.7" fill="#fff" />
<circle cx="47.9" cy="83.8" r="1.7" fill="#fff" />
<circle cx="54.9" cy="83.8" r="1.7" fill="#fff" />
<path fill="#ff739d" d="M51.8 69.1v5.6a3.8 3.8 0 0 1-3.8 3.8 3.8 3.8 0 0 1-3.8-3.8v-5.6" />
</g>
<path id="heart-2" fill="#f0a979" d="M13.7 10.8l-.4.2a4 4 0 0 0-1.7 3 .3.3 0 0 1-.4.2 4 4 0 0 0-3.4-.3l-.4.2c-1.7 1.3-2.3 2.8-.7 5.2s6 3.2 9.3 3.8c1.4-3 3.3-6.6 2.3-9.7s-2.6-3.3-4.6-2.6z" />
<path id="heart-1" fill="#f0a979" d="M35.8 3.7h-.4a4 4 0 0 0-2.8 2 .3.3 0 0 1-.4 0 4 4 0 0 0-3-1.7h-.4c-2.1.5-3.3 1.6-2.8 4.4s4.1 5.4 6.9 7.3c2.5-2.2 5.8-4.6 6.1-7.9S38 4 35.8 3.7z" />
</g>
</svg>
</div>
</div>
<div class="unit xs-1 s-1-2 step-3">
<div class="pad-t-1-2">
<h2 class="push-1-2 tera">Step 3</h2>
<p class="milli">Bring them home</p>
</div>
<div class="unit image push-2">
<svg id="house" width="96" height="96" viewbox="0 0 96 96">
<path id="roof" fill="#f0a979" d="M87.7 38.6L56.5 16.7a2.7 2.7 0 0 0-2.8-.2L29.4 28.3v-4.7a1 1 0 0 0-1-1h-6.1a1 1 0 0 0-1 1v8.6L8.7 38.3a2.7 2.7 0 0 0 1.2 5.2l1.2-.3 43.6-21.1L84.5 43a2.7 2.7 0 0 0 3.1-4.5z" />
<circle id="smoke-3" cx="22.1" cy="16.2" r="3.2" fill="#06386e" />
<circle id="smoke-2" cx="27.8" cy="11.6" r="2.6" fill="#06386e" />
<circle id="smoke-1" cx="23.1" cy="5" r="2.1" fill="#06386e" />
<path fill="#06386e" d="M54.7 28.1L16.1 46.8v39.8a6.5 6.5 0 0 0 6.5 6.5h5.8V71.8a11.1 11.1 0 0 1 22.3 0v21.4h22.7a6.5 6.5 0 0 0 6.5-6.5V45.8z" />
<path id="heart-window" fill="#fff" d="M68.6 49.8c-.8 4.2-5.1 7.1-8.5 9.8-3.4-2.7-7.7-5.7-8.3-10s1.1-5.1 3.9-5.5h.6a5.1 5.1 0 0 1 3.7 2.4.3.3 0 0 0 .6 0 5.1 5.1 0 0 1 3.8-2.4h.6c2.6.6 4.1 2.1 3.6 5.7z" />
</svg>
</div>
</div>
<div class="dots unit xs-1 push">
<img class="img-flex" src="../../images/dots.png" alt="">
</div>
<div class="unit xs-1 step-2">
<div class="pad-t-1-2">
<h2 class="push-1-2 tera">Step 2</h2>
<p class="milli">Send your application</p>
</div>
<div class="unit image push">
<svg width="96" height="96" viewbox="0 0 96 96">
<g id="airplane">
<path id="body" fill="#06386e" d="M32.8 44.2l16.6 16.5a1.7 1.7 0 0 0 2.6-.3l28.3-48a1.7 1.7 0 0 0-1.8-2.5L16.8 25.7a1.7 1.7 0 0 0-.8 2.8l9.3 9.3 39-17.8z" />
<polygon id="wing" fill="#cbcaca" points="25.3 56.4 32.8 44.2 64.3 20 25.3 37.8 25.3 56.4" />
<polygon id="shadow" fill="#585858" points="40.3 51.6 25.3 56.4 32.8 44.2 40.3 51.6" />
<ellipse id="ground" cx="48" cy="88.4" fill="#cbcaca" rx="24.5" ry="5.4" />
</g>
</svg>
</div>
</div>
</section>
</div>
The intro section is at the top of the web page introducing the content below.
<section class="grid intro-section" id="about">
<div class="wrapper">
<div class="intro-text island max-width">
<h1 class="unit xs-1 s-1 m-1 l-1 main-header peta">Adopt</h1>
<p class="unit xs-1 s-1 m-2-3 l-2-3">Currently we have 11 dogs up for adoption—waiting for their forever homes. Loyal Rescue will do all we can to help you find your perfect match.</p>
<div class="unit xs-1 s-1 m-1-3 l-1-3">
</div>
</div>
</div>
</section>
The Happy Tails sections features quotes from happy dog adoption stories. To support the quotes images are shown of a dog growing up.
<section class="grid wrapper pull-quote-section island push-2" id="happy-tails">
<h2 class="unit xs-1 s-1 m-1 l-1 peta push-1-4 pad-t-1-2">Happy Tails</h2>
<div class="unit xs-1 s-1 m-1-3 relative" id="pull-quote-1">
<span class="absolute proper-left">“</span>
<p class="pull-quote island giga relative">I adopted Nutmeg 2 years ago. I am so thankful for Loyal Rescue and all the foster families.</p>
</div>
<div class="unit xs-1 s-1 m-1-3 pad-b gutter-1-2">
<img class="img-flex" src="../../images/dog-quote-1.jpg" alt="Dog laying on couch" aria-details="pull-quote-1">
</div>
<div class="unit xs-1 s-1 m-1-3 relative" id="pull-quote-2">
<span class="absolute proper-left">“</span>
<p class="pull-quote island giga relative">Thanks Loyal Rescue for making our family complete.</p>
</div>
<div class="unit xs-1 s-1 m-1-3 pad-b gutter-1-2">
<img class="img-flex" src="../../images/dog-quote-2.jpg" alt="Dog holding rope" aria-details="pull-quote-2">
</div>
<div class="unit xs-1 s-1 m-1-3 relative" id="pull-quote-3">
<span class="absolute proper-left">“</span>
<p class="pull-quote island giga relative">Oreo was rescued three years ago. We are so happy that we could rescue him and see him happy.</p>
</div>
<div class="unit xs-1 s-1 m-1-3 pad-b gutter-1-2">
<img class="img-flex" src="../../images/dog-quote-3.jpg" alt="Dog on beach" aria-details="pull-quote-3">
</div>
</section>
This section is used on the home page to display the mission of Loyal Rescue. A simple infographic shows how many dogs are waiting, how many dogs have been adopted and how much money has been donated this month.
<section class="section island push" id="our-mission">
<div class="wrapper">
<div class="section-text max-length push-2">
<h2 class="peta push-1-4 pad-t-1-2">Our Mission</h2>
<p class="push-1-2">Our mission is to connect fostered dogs to their forever homes in the Toronto area. For 7 years we have proudly been doing just that.</p>
<p>Our fosters have opened their hearts and homes to dogs in need of rescue. Loyal Rescue has never operated out of a shelter and as such each dog is viewed in a private home. We are always in desperate need for commited foster families to join our team.</p>
</div>
<div class="grid push stats">
<div class="unit xs-1 s-1 m-1-3 l-1-3 text-center push">
<i class="icon i-48 push">
<svg><use class="paw-outline" xlink:href="../../images/icons.svg#paw-outline"/></svg>
</i>
<p class="yotta text-center push-1-4 bold">11</p>
<p class="text-center">adoptable dogs waiting</p>
</div>
<div class="unit xs-1 s-1 m-1-3 l-1-3 text-center push">
<i class="icon i-48 push">
<svg><use class="heart" xlink:href="../../images/icons.svg#heart"/></svg>
</i>
<p class="yotta text-center push-1-4 bold">2,013</p>
<p class="text-center">dogs adopted so far</p>
</div>
<div class="unit xs-1 s-1 m-1-3 l-1-3 text-center push">
<i class="icon i-48 push">
<svg><use class="money" xlink:href="../../images/icons.svg#money"/></svg>
</i>
<p class="yotta text-center push-1-4 bold">$1,045</p>
<p class="text-center">donated this month</p>
</div>
</div>
</div>
</section>