Typography

Build a hierarchy of information through the use of standard typography. Users will navigate content this way by scanning for large headlines and big type. All font sizing is set to ems and px. Icons can also be helpful in helping communicate a particular action to a user. Wirefy comes with Font Awesome ready for your use.

The typography can be changed and updated through the _typography.scss file. In fact, there are many more styles like hr

Headings

Wirefy includes styles for all of the header elements that are balanced and based on a scale.

HTML
<h1>Heading h1 - 60px</h1>
<h2>Heading h2 - 40px</h2>
<h3>Heading h3 - 24px</h3>
<h4>Heading h4 - 18px</h4>
<h5>Heading h5 - 18px</h5>
<h6>Heading h6 - 14px</h6>
Rendered HTML

Heading h1

Heading h2

Heading h3

Heading h4

Heading h5
Heading h6

Paragraphs

This is a paragraph. Paragraphs are preset with a font size (16px), line height(1.25) and spacing to create an overall rhythm. We can add a bit more content to this paragraph by typing some random nonsense here. Wrap strong around type to make it bold! You can also use em to italicize your words.

HTML
<p>This is a paragraph. Paragraphs are preset with a font size (16px), line height(1.25) and spacing to create an overall rhythm. We can add a bit more content to this paragraph by typing some random nonsense here. Wrap <strong>strong</strong> around type to make it <b>bold</b>! You can also use <em>em</em> to italicize your words.</p>

Links

Including a link within your paragraph is not uncommon. In fact, you probably have internal links and external links. These should include different styles.

HTML
<p>Including a link within your paragraph is not uncommon. In fact, you probably have <a href="">internal</a> links and <a href="http://example.com" rel='external'>external</a> links. These should include different styles.</p>

Icons

Icons are from icomoon.

HTML
<span class="icon-home"></span> icon-home</span>
icon-home
icon-home2
icon-home3
icon-office
icon-newspaper
icon-pencil
icon-pencil2
icon-quill
icon-pen
icon-blog
icon-droplet
icon-paint-format
icon-image
icon-image2
icon-images
icon-camera
icon-music
icon-headphones
icon-play
icon-film
icon-camera2
icon-dice
icon-pacman
icon-spades
icon-clubs
icon-diamonds
icon-pawn
icon-bullhorn
icon-connection
icon-podcast
icon-feed
icon-book
icon-books
icon-library
icon-file
icon-profile
icon-file2
icon-file3
icon-file4
icon-copy
icon-copy2
icon-copy3
icon-paste
icon-paste2
icon-paste3
icon-stack
icon-folder
icon-folder-open
icon-tag
icon-tags
icon-barcode
icon-qrcode
icon-ticket
icon-cart
icon-cart2
icon-cart3
icon-coin
icon-credit
icon-calculate
icon-support
icon-phone
icon-phone-hang-up
icon-address-book
icon-notebook
icon-envelope
icon-pushpin
icon-location
icon-location2
icon-compass
icon-map
icon-map2
icon-history
icon-clock
icon-clock2
icon-alarm
icon-alarm2
icon-bell
icon-stopwatch
icon-calendar
icon-calendar2
icon-print
icon-keyboard
icon-screen
icon-laptop
icon-mobile
icon-mobile2
icon-tablet
icon-tv
icon-cabinet
icon-drawer
icon-drawer2
icon-drawer3
icon-box-add
icon-box-remove
icon-download
icon-upload
icon-disk
icon-storage
icon-undo
icon-redo
icon-flip
icon-flip2
icon-undo2
icon-redo2
icon-forward
icon-reply
icon-bubble
icon-bubbles
icon-bubbles2
icon-bubble2
icon-bubbles3
icon-bubbles4
icon-user
icon-users
icon-user2
icon-users2
icon-user3
icon-user4
icon-quotes-left
icon-busy
icon-spinner
icon-spinner2
icon-spinner3
icon-spinner4
icon-spinner5
icon-spinner6
icon-binoculars
icon-search
icon-zoom-in
icon-zoom-out
icon-expand
icon-contract
icon-expand2
icon-contract2
icon-key
icon-key2
icon-lock
icon-lock2
icon-unlocked
icon-wrench
icon-settings
icon-equalizer
icon-cog
icon-cogs
icon-cog2
icon-hammer
icon-wand
icon-aid
icon-bug
icon-pie
icon-stats
icon-bars
icon-bars2
icon-gift
icon-trophy
icon-glass
icon-mug
icon-food
icon-leaf
icon-rocket
icon-meter
icon-meter2
icon-dashboard
icon-hammer2
icon-fire
icon-lab
icon-magnet
icon-remove
icon-remove2
icon-briefcase
icon-airplane
icon-truck
icon-road
icon-accessibility
icon-target
icon-shield
icon-lightning
icon-switch
icon-power-cord
icon-signup
icon-list
icon-list2
icon-numbered-list
icon-menu
icon-menu2
icon-tree
icon-cloud
icon-cloud-download
icon-cloud-upload
icon-download2
icon-upload2
icon-download3
icon-upload3
icon-globe
icon-earth
icon-link
icon-flag
icon-attachment
icon-eye
icon-eye-blocked
icon-eye2
icon-bookmark
icon-bookmarks
icon-brightness-medium
icon-brightness-contrast
icon-contrast
icon-star
icon-star2
icon-star3
icon-heart
icon-heart2
icon-heart-broken
icon-thumbs-up
icon-thumbs-up2
icon-happy
icon-happy2
icon-smiley
icon-smiley2
icon-tongue
icon-tongue2
icon-sad
icon-sad2
icon-wink
icon-wink2
icon-grin
icon-grin2
icon-cool
icon-cool2
icon-angry
icon-angry2
icon-evil
icon-evil2
icon-shocked
icon-shocked2
icon-confused
icon-confused2
icon-neutral
icon-neutral2
icon-wondering
icon-wondering2
icon-point-up
icon-point-right
icon-point-down
icon-point-left
icon-warning
icon-notification
icon-question
icon-info
icon-info2
icon-blocked
icon-cancel-circle
icon-checkmark-circle
icon-spam
icon-close
icon-checkmark
icon-checkmark2
icon-spell-check
icon-minus
icon-plus
icon-enter
icon-exit
icon-play2
icon-pause
icon-stop
icon-backward
icon-forward2
icon-play3
icon-pause2
icon-stop2
icon-backward2
icon-forward3
icon-first
icon-last
icon-previous
icon-next
icon-eject
icon-volume-high
icon-volume-medium
icon-volume-low
icon-volume-mute
icon-volume-mute2
icon-volume-increase
icon-volume-decrease
icon-loop
icon-loop2
icon-loop3
icon-shuffle
icon-arrow-up-left
icon-arrow-up
icon-arrow-up-right
icon-arrow-right
icon-arrow-down-right
icon-arrow-down
icon-arrow-down-left
icon-arrow-left
icon-arrow-up-left2
icon-arrow-up2
icon-arrow-up-right2
icon-arrow-right2
icon-arrow-down-right2
icon-arrow-down2
icon-arrow-down-left2
icon-arrow-left2
icon-arrow-up-left3
icon-arrow-up3
icon-arrow-up-right3
icon-arrow-right3
icon-arrow-down-right3
icon-arrow-down3
icon-arrow-down-left3
icon-arrow-left3
icon-tab
icon-checkbox-checked
icon-checkbox-unchecked
icon-checkbox-partial
icon-radio-checked
icon-radio-unchecked
icon-crop
icon-scissors
icon-filter
icon-filter2
icon-font
icon-text-height
icon-text-width
icon-bold
icon-underline
icon-italic
icon-strikethrough
icon-omega
icon-sigma
icon-table
icon-table2
icon-insert-template
icon-pilcrow
icon-left-toright
icon-right-toleft
icon-paragraph-left
icon-paragraph-center
icon-paragraph-right
icon-paragraph-justify
icon-paragraph-left2
icon-paragraph-center2
icon-paragraph-right2
icon-paragraph-justify2
icon-indent-increase
icon-indent-decrease
icon-new-tab
icon-embed
icon-code
icon-console
icon-share
icon-mail
icon-mail2
icon-mail3
icon-mail4
icon-google
icon-google-plus
icon-google-plus2
icon-google-plus3
icon-google-plus4
icon-google-drive
icon-facebook
icon-facebook2
icon-facebook3
icon-instagram
icon-twitter
icon-twitter2
icon-twitter3
icon-feed2
icon-feed3
icon-feed4
icon-youtube
icon-youtube2
icon-vimeo
icon-vimeo2
icon-vimeo3
icon-lanyrd
icon-flickr
icon-flickr2
icon-flickr3
icon-flickr4
icon-picassa
icon-picassa2
icon-dribbble
icon-dribbble2
icon-dribbble3
icon-forrst
icon-forrst2
icon-deviantart
icon-deviantart2
icon-steam
icon-steam2
icon-github
icon-github2
icon-github3
icon-github4
icon-github5
icon-wordpress
icon-wordpress2
icon-joomla
icon-blogger
icon-blogger2
icon-tumblr
icon-tumblr2
icon-yahoo
icon-tux
icon-apple
icon-finder
icon-android
icon-windows
icon-windows8
icon-soundcloud
icon-soundcloud2
icon-skype
icon-reddit
icon-linkedin
icon-lastfm
icon-lastfm2
icon-delicious
icon-stumbleupon
icon-stumbleupon2
icon-stackoverflow
icon-pinterest
icon-pinterest2
icon-xing
icon-xing2
icon-flattr
icon-foursquare
icon-foursquare2
icon-paypal
icon-paypal2
icon-paypal3
icon-yelp
icon-libreoffice
icon-file-pdf
icon-file-openoffice
icon-file-word
icon-file-excel
icon-file-zip
icon-file-powerpoint
icon-file-xml
icon-file-css
icon-html5
icon-html52
icon-css3
icon-chrome
icon-firefox
icon-IE
icon-opera
icon-safari
icon-IcoMoon

Blockquotes

Quoting blocks of content from another source within your document can be use for building creditability.

HTML
<blockquote>
  Details matter, it’s worth waiting to get it right.
  <cite>Steve Jobs</cite>
</blockquote>
Rendered HTML
Details matter, it’s worth waiting to get it right. Steve Jobs

Small

De-emphasizing inline or blocks of text

HTML
<small>© 2014 - Wirefy is an open sourced framework.</small>
Rendered HTML
© 2014 - Wirefy is an open sourced framework.