A Pen by Jameson Bjorkman.

edh---CSS---Test.markdown

edh - CSS - Test

The following test should allow us to acurately see your skill in CSS. We are looking for clean and efficient css that is easy to update and maintain.

A Pen by Jameson Bjorkman on CodePen.

License.

index.haml

%h1 EDH - CSS Test
%h2 October 2013
%p The following test should allow us to accurately see your skill in CSS. We are looking for clean and efficient CSS that is easy to update and maintain. Please follow the instructions/rules below.
%p.name
%h2 Rules
%ol
  %li Do not touch the HTML/HAML, unless asked to.
  %li Do use SASS(.sass) with out addons.
  %li More selectors are better than more properties.
  %li Order properties in alphabetical order with extensions and mixins first.
  %li Assume we are using the latest browsers to check your results.
  %li Use two spaces for tabs.
 
%h2 Instructions
%ol
  %li Find the following tag (<code>p.name</code>) and put your name in it, follow your name by an escaped <code>em dash</code> and something awesome about yourself.
  %li Give all text a color of <code>#455667</code>.
  %li <a href="#">Anchor tags</a> should be <code>#f06</code> with an underline.
  %li <code>strong, em, code</code> need a background of <code>#455667</code> with an alpha of <code title="rgba(#455667, 0.05)">0.05</code>.
  %li <code>strong, em, code</code> need a padding of <code>3px</code> top/bottom and <code>6px</code> left/right.
  %li <code>strong, em, code</code> need a border radius of <code>3px</code>.
  %li <code>body</code> needs a width of <code>32em</code> and be centered <code>6em</code> from the top/bottom  .  
  %li Images and the first paragraph should be pull off to the left side by <code>5em</code> but remain flush with the right hand side of the body.
  %li Create a <code>vendor</code> mixin, that adds the appropriate vendor prefixes to a property and value.
  %li Use your new <code>vendor</code> mixin to create a <code>border-radius</code> and <code>box-shadow</code> mixin. Use these mixins where ever you need a box-shadow or border-radius.
  %li Images need a border radius of 3px and a box-shadow of <code>$shadow</code>.
  %li Make the text antialiased.
  %li <code>h1</code> need a font size of <code>$type-large</code> and a line height of <code>1.2</code>.
  %li <code>h1</code> need a single pixel border along the bottom the same color as the <code>strong</code> background.
  %li <code>h2</code> need a font size of <code>$type-medium</code> and a line height of <code>1.2</code>.
  %li <code>h3</code> need a font size of <code>$type-body</code> and a line height of <code>1.2</code>.
  %li <code>p</code> and everything else need a font size of <code>$type-body</code> and a line height of <code>$golden</code>.
  %li All text needs to be <code>helvetica</code>,
  %li <code>code</code> needs to be <code>courier</code>.
  %li <code>blockquote</code> needs to be <code>georgia</code>.
  %li <code>blockquote</code> needs to be <code>italic</code>.
  %li <code>blockquote</code> needs a 3px border on the left the same color as the <code>strong</code> background.
  %li <code>blockquote</code> needs a 1em space between the border and text.
  %li All text needs to have a kerning of <code>1px</code>, except <code>code</code>.
  
  %li There should be a <code>$type-body</code> gap between all elements except for sibling paragraphs and list items.
  %li The first paragraph is bold
  %li A paragraph that is an ajacent sibling of another paragraph has the first line indented by <code>4em</code>, except when it follows the very first paragraph.
  %li Ajacent sibling paragraphs have no gap between them.
  
%blockquote You are approached a week later after you did all of the above. Your css is slowing down the site. Shame on you! Clean up your css and make it more effcient and then explain in the <code>p.explain</code> tag your approach...

%p.explain

- lorem = 'Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Maecenas faucibus mollis interdum. Etiam porta sem malesuada magna mollis euismod. <strong>Donec</strong> sed odio dui. Aenean lacinia bibendum <a>nulla</a> sed consectetur. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Nullam id dolor id nibh <em>ultricies</em> vehicula ut id elit. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.'

%h2 Ignore the following.
%p= lorem
%p= lorem
%img{src: 'http://placekitten.com/g/700/500'}
%p= lorem
%p= lorem
%p= lorem
%blockquote= lorem
%h3 This is a sub sub heading
%p= lorem

style.sass

@import "compass"
*
  margin: 0
  padding: 0
  text-decoration: none

$golden: 1.61538462
$base: 10px
$type-body: $base * $golden
$type-medium: floor($type-body * $golden)
$type-large: floor($type-medium * $golden)
$shadow: 0 1px 2px -1px rgba(black, 0.5)