Twitter Bootstrap + Panopoly: Drupal with Kalatheme
•Download as PPTX, PDF•
0 likes•676 views
This session will briefly showcase the power of Panopoly, Panels and Twitter Bootstrap and then will show what happens when the three collide in a powerful explosion of codescience, namely a new theme developed by Kalamuna called Kalatheme. This intersection produces an entirely different theming experience for Drupal that will allow developers to rapidly build fully responsive, mobile and tablet ready themes built with a best practices CSS/JS toolkit (Bootstrap) but also built on top of the awesome Panopoly framework.
More Related Content
Similar to Twitter Bootstrap + Panopoly: Drupal with Kalatheme
Similar to Twitter Bootstrap + Panopoly: Drupal with Kalatheme (20)
Recently uploaded
Recently uploaded (20)
Twitter Bootstrap + Panopoly: Drupal with Kalatheme
- 1. Twitter Bootstrap + Panopoly Empowering Drupal Site Building with Kalatheme @ Kalamuna LLC / 03 / 09 / 2014
- 2. Alec Reynolds Co-Founder/Man of Many Faces d.o areynolds twitter @reynoldsalec email alec@kalamuna.com
- 4. Stuff we like... OAKLAN D(nicer when not on fire)
- 5. Stuff we like... DRUPAL kalabox BADCamp, SANDCamp, Phoenix, Florida, NYC, DrupalCon Anywhere else we can travel with a minimum of nausea
- 6. But mostly, we like GETTING SITES BUILT.
- 7. So...what is this “Bootstrap” thing and why should I care? Twitter-sponsored Open Source Project Framework = Common Language Mobile First Grid System LESS-powered (Sass versions available) Components (menus, buttons, hero units etc.)
- 8. Great! Let’s use it on my Drupal site. Well...there’s a catch.
- 9. Drupal and Twitter Bootstrap DON’T PLAY NICE
- 10. Unless you teach Drupal some manners. Make sure classnames don’t collide Insert Bootstrap classnames into Drupal elements Create templates to use Bootstrap grid Create Ctools plugins to recreate Bootstrap markup
- 11. Great, I (finally) have Bootstrap on my site. Now what? How do I position content? Blocks? Context? Panels? Display Suite? Template file?
- 12. All of the above?
- 13. We just want to build a Drupal site. Where does this leave us?
- 14. Code Rage!!!
- 15. What if you could use one tool?
- 17. Core Philosophy Accessible and Intuitive Flexible and Powerful
- 18. More specifically Keep it simple.
- 19. Twitter Bootstrap Libraries API Use any library Responsive classes Upgrade pathway Code Cleanse Hi There. Kalatheme
- 20. One Region No more blocks! No more regions! Panels layouts Way Way Less files Hi There. Kalatheme
- 21. Responsive Panopoly layouts Kalatheme layouts Views grids Responsive Toggling Hi There. Kalatheme
- 22. Site Builder Tools Responsive Tools Style Plugins Hi There. Kalatheme
- 23. 3.x Features Bootstrap 3.x Bootstrap Importer REAL Mobile First Hi There. Kalatheme
- 26. Q & A
- 27. Alec Reynoldsd.o areynolds twitter @reynoldsalec email alec@kalamuna.com Mike Pirog d.o pirog twitter @pirogcommamik e email mike@kalamuna.c om Will Hastings d.o whastings twitter @willhpower email will@kalamuna.com
- 28. thanks!
Editor's Notes
- --Explain the basics of Twitter bootstrap --Front-end framework: provides all the basics needed
- --Explain the basics of Twitter bootstrap --Front-end framework: provides all the basics needed
- --Explain the basics of Twitter bootstrap --Front-end framework: provides all the basics needed
- --Explain the basics of Twitter bootstrap --Front-end framework: provides all the basics needed
- --Explain the basics of Twitter bootstrap --Front-end framework: provides all the basics needed
- This is a real example from a client that we didn’t “hire”
- This is a real example from a client that we didn’t “hire”
- --Accessible: any sentient being can use it --Flexible: developers won’t be put off by apparent simplicity, able to exercise power
- All the goodness of Twitter Bootstrap
- Along with the accessibility and cleanliness of Panopoly
- --Bootstrap importer: ability to import custom bootstrap libraries and auto-create a subtheme
- --Show some demo sites: https://drupal.org/node/1949686