Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Thumper

 Thumper

My presentation at Front end conference about the responsive framework I built called Thumper.

Robert DeLuca

June 22, 2013
Tweet

More Decks by Robert DeLuca

Other Decks in Programming

Transcript

  1. Thumper
    @robdel12

    View Slide

  2. · Front end developer for izea
    · Mustang lover
    · My first conference ever… and LOVING it!
    A little about me

    View Slide

  3. What exactly is
    Thumper?

    View Slide

  4. The rabbit?
    This guy is crazy...

    View Slide

  5. Where did the
    name come
    from?

    View Slide

  6. I used to work
    at ThreeTwelve
    Creative

    View Slide

  7. A responsive
    framework

    View Slide

  8. Not just a
    responsive
    framework...

    View Slide

  9. ...A light,
    flexible, and
    scalable one

    View Slide

  10. When compiled and
    compressed it
    weighs just 7kb.

    View Slide

  11. Built upon LESS and
    SCSS
    For flexibility!  

    View Slide

  12. Technically
    infinite

    View Slide

  13. Bootstrap is
    based off of
    12ths

    View Slide

  14. Thumper is based
    off of 20ths

    View Slide

  15. One 20th is 2.6%
    The gutter is 2%

    View Slide

  16. So.. Almost
    infinite!

    View Slide

  17. Spacer divs!

    View Slide

  18. Like Bootstraps
    offset feature

    View Slide

  19. Turns this:

    View Slide

  20. Into this:

    View Slide

  21. The code for it:
    Super simple

    View Slide

  22. SCSS Media
    query mixins:
    · smallerDesktop (861px to 1040px )
    ·tablet (640px to 860px)
    · mobile (0 to 639px)

    View Slide

  23. So... Who is this for?

    View Slide

  24. Not for those who
    need something done
    in 2 days

    View Slide

  25. Nothing is prestyled

    View Slide

  26. But why not?

    View Slide

  27. New project =
    new everything

    View Slide

  28. For those who start
    over every project

    View Slide

  29. This is cool..
    Examples?

    View Slide

  30. SRMA.net

    View Slide

  31. ASPG.com

    View Slide

  32. GainingResults.com

    View Slide

  33. I was going to show
    the mobile versions..
    But they’re all broke

    View Slide

  34. L

    View Slide

  35. That’s Thumper!

    View Slide

  36. Contact info:
    Twitter: @robdel12
    Github: github.com/robdel12
    Get the slides:
    Robert-deluca.com/blog

    View Slide