Home

Pattern Library

Jump to a Section:

Overview

The purpose of a pattern library is to provide an set of user interface (UI) patterns used on Desaraev.com. The UI patterns are a a set of recurring UI solutions including attributes, classes, and elements. Maintaining a pattern library makes it easier to ensure consistent UI/UX solutions. It is easier because all the necessary code and samples of elements are easily identified and organized in one location. Additionally, documentation like a style guide, user specification documentation, and information architecture documents like case studies and ethnography studies allow designers, developers, and quality assurance testers to see additional details about patterns and the reasoning behind solutions.

External Tools

Main Theme

Color Scheme

  • #2c9ab7
  • #000
  • #656e7f
  • #cacdd3
  • #4c4848
  • #fafafa
  • #bde7ec
  • #044669

Fonts

Primary Body:

body, .post-body div, .post-body span, .jump-link a, a.home-link, a.home-link:visited, button, .button, #blog-pager-older-link a, #blog-pager-newer-link a, #Label1 select:

Primary font: 'PT Sans', 'PT Sans', 'Helvetica neue', Helvetica, 'Source Sans Pro', Helvetica, Arial !important;

Primary font italic: 'PT Sans', 'PT Sans', 'Helvetica neue', Helvetica, 'Source Sans Pro', Helvetica, Arial !important;

Primary font bold: 'PT Sans', 'PT Sans', 'Helvetica neue', Helvetica, 'Source Sans Pro', Helvetica, Arial !important;

Secondary Body:

Secondary font: normal normal 15px Arial, Tahoma, Helvetica, FreeSans, sans-serif;

Secondary font italic: normal normal 15px Arial, Tahoma, Helvetica, FreeSans, sans-serif;

Secondary font bold; normal normal 15px Arial, Tahoma, Helvetica, FreeSans, sans-serif;

This is a text link

Strong is used to indicate strong importance

This text has added emphasis

The b element is stylistically different text from normal text, without any special importance

The i element is text that is set off from the normal text

The u element is text with an unarticulated, though explicitly rendered, non-textual annotation

This text is deleted and This text is inserted

This text has a strikethrough

Superscript®

Subscript for things like H2O

This small text is small for for fine print, etc.

Abbreviation: HTML

Keybord input: Cmd

This text is a short inline quotation

This is a citation

The dfn element indicates a definition.

The mark element indicates a highlight

This is what inline code looks like.

This is sample output from a computer program

The variarble element, such as x = y

H1

h1 { font-size: 22px !important; margin: 10px 0; } h1, h2, h3, h4, h5 { font-family: 'PT Sans', 'PT Sans', 'Helvetica neue', Helvetica, 'Source Sans Pro', Helvetica, Arial !important; font-weight: bold; }

H2

h2, .entry-content h2, .entry-content h2 span { font: normal bold 20px Open Sans !important; margin: 10px 0; }

H3

h3, h3.post-title, h3.post-title a, h3.post-title span, h3.post-title a span

h3, h3.post-title, h3.post-title a, h3.post-title span, h3.post-title a span { font-size: 14pt !important; line-height: 1.5em !important; max-width: 555px !important; font-style: italic; text-transform: Capitalize; margin: 12px 0 0 0; } h1, h2, h3, h4, h5 { font-family: 'PT Sans', 'PT Sans', 'Helvetica neue', Helvetica, 'Source Sans Pro', Helvetica, Arial !important; font-weight: bold; }

H4

h1, h2, h3, h4, h5 { font-family: 'PT Sans', 'PT Sans', 'Helvetica neue', Helvetica, 'Source Sans Pro', Helvetica, Arial !important; font-weight: bold; } h1, h2, h3, h4 { margin: 0; position: relative; } .h4, h4 { font-size: 18px; }
H5
h5 { font-size: 11pt; margin: 5px 0; }
H6
.h6, h6 { font-size: 12px; } .h4, .h5, .h6, h4, h5, h6 { margin-top: 10px; margin-bottom: 10px; } .h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 { font-family: inherit; font-weight: 500; line-height: 1.1; color: inherit; }

Text Styles

Blockquote
blockquote { font-size: 2rem; border: 5px solid #BEE7ED; background: #FFF; padding: 1rem 1rem; margin: 0 1rem; transition: all .5s ease; color: #41403E; font-size: 2rem; letter-spacing: 1px; outline: none; box-shadow: 20px 38px 34px -26px rgba(0, 0, 0, 0.2); border-radius: 255px 15px 225px 15px/15px 225px 15px 255px; border-top-left-radius: 255px 15px; border-top-right-radius: 15px 225px; border-bottom-right-radius: 225px 15px; border-bottom-left-radius: 15px 255px; }

Toggle

The toggle changes based on an invisible checkbox (CSS based). The theme of the site changes based on when the toggle is switched and the checkbox is checked or not. The theme change happens because of javascript. The javascript changes a class in the body from the following classes: mainbg to darkbg or magicbg.

.toggle.toggledaynight

Buttons

<div class="button-wrapper right primarybutton">
<button class='lined thin'>
<a href="http://www.desaraev.com/2016/06/portfolio-website.html">Portfolio Case Study <div class="arrow arrow-1 right"></div>
</a>
</button>
</div>
<div class="clearfix"></div>

Layout Components

Project Pages

  • Thumbnail Hidden
  • Purpose Statment
  • Image
  • Jump to Section Anchor Links (Uses Blockquote)
  • Overview
  • Examples
  • About the Project
  • Process
  • Tools/Kills
  • Challenges/Solution
  • Buttons that Link to More Information (Primary Buttons)

Search Pages

  • Title
  • Thumbnail
  • Purpose Statement
  • A List of Skill Related Topics in the Purpose Statement
  • Label/Categories
  • Read More Button

Unique Pages/

  • Home Page
  • View All
  • About
  • References
  • Sitemap
  • Categories Page
  • Pattern Library

Accessibility

"The main content is not usually the first thing on a web page. Keyboard and screen reader users generally must navigate a long list of navigation links, sub-lists of links, corporate icons, site searches, and other elements before ever arriving at the main content. This is particularly difficult for users with some forms of motor disabilities.

The idea is simple enough: provide a link at the top of the page which jumps the user down to an anchor or target at the beginning of the main content. For the most part, it really is this easy, though there is more than one way to accomplish the goal." -- WebAim

On Screen View

HTML

<!--start skip nav-->
<a class='sr-only sr-only-focusable' href='#content' id='skippy'>
<div class='container'><span class='skiplink-text'>Skip to main content</span>
</div></a>
<!--end skip nav-->

CSS

.sr-only-focusable:active, .sr-only-focusable:focus { width: 100%; height: auto; margin: 0; overflow: visible; clip: auto; position: fixed; top: 0; left: 0; background: #064471; z-index: 1; color: #fff !important; text-align: center; }

On Screen View

Example:

↑ Top

On Screen View

<div class="top" style="float:right;">
<a href="#top">↑ Top</a>
</div>

Responsive Design

Desaraev.com is built using the Bootstrap Framework. To accommodate additional newer phones screen sizes and to create the ability to track user's viewport sizes additional media breakpoints where added to the main theme. At each media query, a message has been added next to the logo with the viewport size. This allows users to easily provide feedback that includes their screen width. The added screen widths are:

  • min-width: 1200px
  • min-width: 1181px
  • (min-width: 0px) and (max-width: 1180px)
  • (min-width: 1100px) and (max-width: 1180px)
  • (min-width: 1000px) and (max-width: 1100px)
  • (min-width: 900px) and (max-width: 1000px)
  • (min-width: 700px) and (max-width: 900px)
  • (min-width: 900px) and (max-width: 1180px)
  • (min-width: 0px) and (max-width: 900px)
  • (min-width: 460px) and (max-width: 700px)
  • (min-width: 0px) and (max-width: 700px)
  • (min-width: 0px) and (max-width: 460px)

Visibility

This Code is only visible on screens with a width greater than 1181px.

.desktoponly li.dropdown:hover > ul

This code is approximately half the width of it's parent container/wrapper's width on large screens (greater than 1181px) but switches to 100% on small screens.

.col-lg-6.col-sm-12 .halfpage .halfscreen-lg

This code is hidden on screens with a width less than 1180px.

.superman #topwrapper #toggleDOWNLOADS

This code is visible on screens with a width less than 1180px.

.mobileoponly

This code is 100% width of it's parent container or wrapper on small screens (less than 1180px) but switches to 50% on large screens.

.col-lg-6.col-sm-12 .halfpage .halfscreen-lg

Main Navigation

@media (min-width: 1200px) {
.toggle-wrapper.desktopmenu {
display: block;
}
.toggle-wrapper.mobilemenu {
display: none;
}
}
@media (max-width: 1199px) {
.toggle-wrapper.desktopmenu {
display: none;
}
.toggle-wrapper.mobilemenu {
display: block;
}
}

min-width: 1200px

max-width: 1199px

Icons

Font Awesome: http://fontawesome.io/icons/

Bootstrap Glyphicons: http://glyphicons.bootstrapcheatsheets.com/

My Photo
Senior UI/UX web designer. Adventurist and certified Yoga / Barre Instructor. Love aviation, books, and travel. More: References About

No comments:

Post a Comment

Subscribe to: Posts (Atom)