Dribbble Homepage Flexbox-ized

dribbble-homepage-flexbox-ized.markdown

Dribbble Homepage Flexbox-ized

A Pen by DevTips on CodePen.

License.

index.jade

mixin shot(img, views, comments, likes, avatar, name, link)
  a(href="#{link}").shot-wrap
    .shot
      img(src="#{img}")
      .meta
        div.views #{views}
        div.comments #{comments}
        div.likes #{likes}
    .owner
      img(src="#{avatar}").avatar
      span.name #{name}

doctype html

html
  head
    meta(charset="utf-8")
    title Flex Dribbble
    meta(name="viewport", content="width=device-width, initial-scale=1")
    
  body
    .header-banner
      header.positioner
        nav
          img(src="https://d13yacurqjgara.cloudfront.net/assets/logo-small-937a908fea9453d9eb8c3bf05dd04632.png").logo
          ul
            li: a(href="") Shots
            li: a(href="") Designers
            li: a(href="") Team
            li: a(href="") Meetups
            li: a(href="") Jobs
            li: a(href="") • • •

        .user-tools
          img(src="https://d13yacurqjgara.cloudfront.net/users/5348/avatars/mini/travitar-31-600.png?1395953251").avatar
          img(src="https://d13yacurqjgara.cloudfront.net/assets/icon-activity-8123503d4926740a2b90422717e30e28.png").activity
          img(src="https://d13yacurqjgara.cloudfront.net/assets/icon-upload-5214988b602f98a209b812d67e73f0d2.png").upload
          form.search-form
            input(type="text" placeholder="Search")

    nav.section-nav.positioner
      a(href="").active Following
      a(href="") Activity
      a(href="") Suggestions



      




    section.shots.positioner

      +shot("https://d13yacurqjgara.cloudfront.net/users/40433/screenshots/896977/dri_small_teaser.png", "137,186", "40", "3,002", "https://d13yacurqjgara.cloudfront.net/users/40433/avatars/mini/Screen_Shot_2013-10-04_at_10.19.58_PM.png", "UENO", "https://dribbble.com/shots/896977-Google-Grid")
      +shot("https://d13yacurqjgara.cloudfront.net/users/485324/screenshots/1581316/fireart_blog_teaser.jpg", "11,168", "111", "1,885", "https://d13yacurqjgara.cloudfront.net/users/485324/avatars/mini/FireArt_logo_%D0%BD%D0%B0_%D1%82%D0%B5%D0%BC%D0%BD%D0%BE%D0%BC2.jpg", "FireArt Studio", "https://dribbble.com/shots/1581316-Fireart-blog-illustration")
      +shot("https://d13yacurqjgara.cloudfront.net/users/5411/screenshots/1129680/ios-rip_teaser.jpg", "28,328", "105", "1,937", "https://d13yacurqjgara.cloudfront.net/users/5411/avatars/mini/995925_10151690627570688_868345894_n.jpg", "Marc Clancy", "https://dribbble.com/shots/1129680-iOS6-RIP")

      +shot("https://d13yacurqjgara.cloudfront.net/users/99875/screenshots/1433198/mark-and-john_teaser.gif", "33,981", "86", "1,965", "https://d13yacurqjgara.cloudfront.net/users/99875/avatars/mini/R.jpg?1364210714", "R A D I O", "https://dribbble.com/shots/1433198-Zuck-Dawg-making-it-rain")
      +shot("https://d13yacurqjgara.cloudfront.net/users/3460/screenshots/1080362/mcfly_gear_85_teaser.png", "21,380", "95", "1,943", "https://d13yacurqjgara.cloudfront.net/users/3460/avatars/mini/f6debbb5044f838dcf78bc3299172657.jpg", "Ryan Putnam", "https://dribbble.com/shots/1080362-McFly-Gear-1985")
      +shot("https://d13yacurqjgara.cloudfront.net/users/13774/screenshots/962088/walkups_teaser.jpg", "18,815", "70", "1,868", "https://d13yacurqjgara.cloudfront.net/users/13774/avatars/mini/Me_Web.jpg?1380768479", "Justin Mezzell", "https://dribbble.com/shots/962088-Call-Me-Maeby")

      +shot("https://d13yacurqjgara.cloudfront.net/users/60166/screenshots/931826/the_land_contour_teaser.jpg", "28,464", "63", "1,877", "https://d13yacurqjgara.cloudfront.net/users/60166/avatars/mini/yogaLogo.png", "Yoga Perdana", "https://dribbble.com/shots/931826-The-Land-Contour")
      +shot("https://d13yacurqjgara.cloudfront.net/users/3460/screenshots/1276794/san-francisco-office_teaser.png", "17,495", "44", "1,468", "https://d13yacurqjgara.cloudfront.net/users/148611/avatars/mini/dropbox-logo.png", "Dropbox", "https://dribbble.com/shots/1276794-San-Francisco-Office")
      +shot("https://d13yacurqjgara.cloudfront.net/users/5411/screenshots/1174183/moving-in_teaser.jpg", "22,995", "74", "1,530", "https://d13yacurqjgara.cloudfront.net/users/5411/avatars/mini/995925_10151690627570688_868345894_n.jpg?1381924037", "Marc Clancy", "https://dribbble.com/shots/1174183-iOS-7-moves-in")

      +shot("https://d13yacurqjgara.cloudfront.net/users/47731/screenshots/436011/mickey_or_bear_head_teaser.jpg", "25,843", "188", "1,496", "https://d13yacurqjgara.cloudfront.net/users/47731/avatars/mini/dribbble_profile_80x80_clair.jpg", "Abdallah Ahizoune", "https://dribbble.com/shots/436011-Playing-With-Number-3")
      +shot("https://d13yacurqjgara.cloudfront.net/users/45409/screenshots/323028/bt_buckslips_thumb_teaser.jpg", "24,105", "103", "1,655", "https://d13yacurqjgara.cloudfront.net/users/45409/avatars/original/a_logo.png", "Alex Rinker", "https://dribbble.com/shots/323028-Cocktail-Recipe-Cards")
      +shot("https://d13yacurqjgara.cloudfront.net/users/3460/screenshots/1459661/cords_teaser.png", "12,673", "48", "1,350", "https://d13yacurqjgara.cloudfront.net/users/148611/avatars/mini/dropbox-logo.png?1376953166", "Dropbox", "https://dribbble.com/shots/1459661-Cords")

  .ref-link.positioner
    a(href="http://youtu.be/H1lREysgdgc") Check out the tutorial video YouTube

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.sass

@import bourbon

// #Reset & Basics (Inspired by E. Meyers)
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video
  margin: 0
  padding: 0
  border: 0
  font-size: 100%
  font: inherit
  vertical-align: baseline
  
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section
  display: block
body
  line-height: 1
  
ol, ul
  list-style: none

  
blockquote:before,
blockquote:after,
q:before, q:after
  content: ''
  content: none

table
  border-collapse: collapse
  border-spacing: 0


// #Basic Styles

body
  background: #fff
  font: 14px/1.6 "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif
  color: #333
  -webkit-font-smoothing: antialiased
  -webkit-text-size-adjust: 100%


// #Typography

h1, h2, h3, h4, h5, h6
  color: #111
  font-weight: bold

h1 			
  font-size: 60px
  line-height: 1.1
h2 			
  font-size: 48px
  line-height: 1.2
h3 			
  font-size: 36px
  line-height: 1.3
h4 			
  font-size: 24px
  line-height: 1.4
h5 			
  font-size: 21px
  line-height: 1.5
h6 			
  font-size: 18px
  line-height: 1.6

p 			
  margin: 0 0 20px 0
em 			
  font-style: italic
strong
  font-weight: bold
  
hr 			
  border: solid #ddd
  border-width: 1px 0 0
  clear: both
  margin: 10px 0 30px
  height: 0


// #Links
a
  color: #333
  text-decoration: underline
  outline: 0

a:hover, a:focus
  color: #000



// General

*
  box-sizing: border-box

body
  background: url(https://d13yacurqjgara.cloudfront.net/assets/noise-f1-34223af06da6ee10a0b27723268a1f95.gif)





// Header
.header-banner
  background: rgba(47,47,47,0.98)

header
  color: rgba(255,255,255,0.5)
  font-size: 12px
  font-weight: bold
  padding: 16px 0
  
  a
    color: rgba(255,255,255,0.5)
    text-decoration: none
    transition: all 300ms
    
    &:hover
      color: rgba(255,255,255,1)
  
  .search-form input
    border: none
    border-radius: 5px
    padding: 5px 8px
  
  .avatar
    +size(16px)
    border-radius: 50%




// Header
.section-nav
  padding: 10px 0
  border-bottom: 1px solid #ccc
  
  a
    font-weight: bold
    text-decoration: none
    color: rgba(0,0,0,0.5)
    margin: 0 20px 0 0
    
    &.active, &:hover
      color: rgba(0,0,0,1)


// Shots
.shots
  padding: 20px 0
  
  .shot-wrap
    display: block
    margin-bottom: 20px
    text-decoration: none
    font-size: 12px
  
  .shot
    background: white
    padding: 10px 10px 6px 10px
    border-radius: 3px
    box-shadow: 0 1px 2px rgba(0,0,0,0.07)
  
  .meta
    color: #888
    
    div:before
      content: ''
      display: inline-block
      +size(18px 12px)
      background: pink
      margin: 0 2px 0 5px
      position: relative
      top: 2px
  
  .meta div
    &.views:before
      background: url(https://d13yacurqjgara.cloudfront.net/assets/icon-views-sm-f315b1f67523edc4a3e8b4a5c20a7fa6.png) center top no-repeat
    
    &.comments:before
      background: url(https://d13yacurqjgara.cloudfront.net/assets/icon-comments-4ec91f1ac45527f803cf99e98c896ce6.png) center top no-repeat
    
    &.likes:before
      background: url(https://d13yacurqjgara.cloudfront.net/assets/icon-hearts-79d9278bcac5768da940cd4487c574f6.png?) center top no-repeat
  
  .owner
    margin: 10px
    
    .avatar
      +size(16px)
      border-radius: 50%
      margin-right: 4px
      vertical-align: sub
      
    .name
      font-weight: bold
      color: #4083a9

      
// FLEX STUFF


.positioner
  max-width: 970px
  margin: 0 auto

%flex
  display: flex

header
  @extend %flex
  justify-content: space-between
  
  nav
    @extend %flex
    align-items: center
    
    ul
      @extend %flex
      
      li
        margin: 0 20px
  
  .user-tools
    @extend %flex
    align-items: center
    
    img
      margin: 0 20px


.shots
  @extend %flex
  flex-wrap: wrap 
  justify-content: space-between
  
  .meta
    @extend %flex
    justify-content: flex-end
    
    
.ref-link
  text-align: center
  font-size: 24px
  border-top: 1px solid rgba(0,0,0,0.1)
  margin-top: 20px
  padding-top: 30px