Portfolio Style Guide

Swatches

Color Palette

#d9d1ce

hsla(16, 13%, 83%, 1)

rgba(217, 209, 206, 1)

$light-grey

#b0a39d

hsla(19, 11%, 65%, 1)

rgba(176, 163, 157, 1)

$grey

#419a9e

hsla(183, 42%, 44%, 1)

rgba(65, 154, 158, 1)

$turquois

#20233d

hsla(234, 31%, 18%, 1)

rgba(32, 35, 61, 1)

$dark-blue

#c11b05

hsla(7, 95%, 39%, 1)

rgba(193, 27, 5, 1)

$red

#f68948

hsla(22, 91%, 62%, 1)

rgba(246, 137, 72, 1)

$orange

Text

Heading 2

Heading 3

Heading 4

Heading 5

No monospace? Sans Serif if not using monospace. Roboto for the text for sure, it's clear, easy to read and common familiar font; don't need anything special for body text.

Main Navigation

Rendered Element

Look at the top of the screen. It's being rendered there.

Sample Code

%header
  %div.fixed-nav
    %div.hide-sm.logo.col-sm-12.col-md-4
      %a{:href => "#"} DPerazzolo
    -#     %img{:src => "img/logo.png", :alt => "Daniele Perazzolo Logo"}
    %nav.main.col-sm-12.col-md-8
      %a{:href => "index.html"} About
      %a{:href => "index.html#projects"} Projects
      %a{:href => "index.html#contact"} Contact

Breadcrumbs

Rendered Element

Sample Code

%aside.breadcrumbs.col-md-4.col-lg-3
  %ul
    %li
      %a{:href => "#"} Section 1
    %li
      %a{:href => "#"} Section 2

Projects

Rendered Element

Sample Code

%div.button-group.filter-button-group
  %button.active{:data => {:filter => "*"}} show all
  %button{:data => {:filter => ".ux"}} ux design
  %button{:data => {:filter => ".mobile"}} android/ios
%div.projects
  %a.ux{:href => "ui-design.html"}
    %img{:src => "img/Makers-Assist/preview.png", :alt => "Makers Assist Preview"}
    %p.title makers assist
    %p.sub app interface design
  %a.mobile{:href => "etextbook.html"}
    %img{:src => "img/eTextbook/preview.png", :alt => "eBooks Preview"}
    %p.title etextbook
    %p.sub android app development

Code Blocks

Rendered Element

# The Greeter class
class Greeter
  def initialize(name)
    @name = name.capitalize
  end

  def salute
    puts "Hello !"
  end
end

g = Greeter.new("world")
g.salute

Sample Code

%pre
  %code
    :preserve
      / Place your code in here

Footer

Rendered Element

Sample Code

%footer
  %div.links
    %a{:href => "style-guide.html"} Style Guide
    %span
      :escaped
        |
    %a{:href => "citations.html"} Citations
  %p.copyright Daniele Perazzolo © 2017