Thumper

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

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