This presentation focuses on the best practices when building with Bootstrap & Django.

1. Building
the Billion Dollar
Page

2. goal
increase
# of leads

4. but how?

6. focusing on conversion
first impression
~3 seconds attention span
responsive
needs to adapt all devices
high performance
small footprint and fast loading time

9. what’s under the hood?

11. one page fits all
•single django model for each landing page
•define content in each sections
•use components to render

12. #django-pipeline
http://django-pipeline.readthedocs.org

14. building the front-end with

15. customizing bootstrap
bootstrap-custom.sass

16. define your variables before
bootstrap variables
because some internal variables are dependent on
each other. ie. $link-color

17. disable unused components

18. define your own variables
variables.sass

19. leverage !default
_variables.scss

20. wrestling with bootstrap

21. always include vars & mixins

22. do not nest more than
3 levels deep

24. leverage existing mixins
•clearfix
•rounded corners
•gradients
•sass utilities [sass_functions.scss]

25. mobile first!
write your responsive styles starting with mobile
then incrementally add styles for larger screens

27. responsive utilities

28. responsive grid
•Make sure to read docs as the grid system is
created from ground up in Bootstrap 3
http://getbootstrap.com/css/#grid

30. after the fluff...

31. progressive images

32. adapt to viewport

34. open issues
•best way to load mobile & desktop
components [user-agent sniffing]
•best way build js bundles for progressive
loading [requirejs]
•loading images for different resolutions
[modernizr]
•making grunt & bower part of the build
process [animate.css]

35. customizing animate.css

36. Questions?

37. supercharging your front-end
with the best UX practices
speaking at codefront.io