Hdwp presentation


Published on

Our presentation from the Joomla World Conference 2013. *note missing live demo obviously

Published in: Education, Technology
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Hdwp presentation

  1. 1. Making Bootstrap Work for You and Techie Jones
  2. 2. About Me ● Owner of Happy Dog Web Productions Ryan Boog ● Devoted father and husband ● Sadly a proud Vikings fan @hdwebpros ● Away from Joomla! and web, I enjoy hanging out, sports, trying new restaurants and pretending to be a decent food critic, @ryanboog doing fun competitive things. Okay, an occasional beer too, especially on fun /HappyDogWebProductions events like this. 651-243-2DOG Let’s Connect! #youreawesome
  3. 3. What is Bootstrap? According to them, it is: “Sleek, intuitive, and powerful mobile first frontend framework for faster and easier web development.”
  4. 4. Stop wrestling with CSS Lots of prewritten code can save you oodles of time. Easily use a responsive grid, styled tables, typography, buttons and forms with ease. Stop wrestling with CSS
  5. 5. Where can I use it? Extensions ● ● ● ● ● ● ● Customize the backend Custom front end Make all aspects responsive Shopping cart Calendar Forum Social Network Interfacing ● ● ● ● ● Use icons with ease Create complex workflows Quick buttons Accordions Tabs Templating ● ● ● ● Create a responsive admin template Custom templates that are responsive Lay out the site in a stackable way Lean on buttons, tabs, helper classes to quickly write lots of code for you
  6. 6. Lets do some Bootstrappin You came here to see some Bootstrappin’, right? I will now show you how easy it is to use on your site.
  7. 7. Enabling (for core Bootstrap, J!3) Either just use the Protostar template or Insert this into your template’s index file in these 2 steps (insert CSS & JS) 1. //Insert the CSS (via php) $doc = JFactory::getDocument(); /*This most likely is at the top already */ $doc->addStyleSheet($this->baseurl . '/media/jui/css/bootstrap.min. css'); //OR in the <head> <link href='<?php echo $this->baseurl ?>/media/jui/css/bootstrap.min. css' rel='stylesheet' type='text/css'> 2. //With any Joomla 3.1+ site, just add in the <head> tag for the .js file *interesting* <jdoc:include type="head" /> //Otherwise, insert this just before the </body> <?php JHtml::_('bootstrap.framework'); ?>
  8. 8. Out of the Box Example ● ● ● ● Use Grid Create a 4 column layout Add simple text to each column Add a blank button to each
  9. 9. Meet Techie Jones My name is Techie Jones. Literally. I have a gift for great design and create a great user experience. Some web agencies say I’m a challenge to work with. But I hear you’re up to the task. Are you?
  10. 10. Techie’s Task We need to make an ecommerce layout to sell dog supplies for Boston Foods Company. You must complete this within 24 hours. Love, Techie
  11. 11. Universal: ● No additional extension, we need this in the core ● 4 products to a row, responsive, stacks on mobile ● All product images must automatically be rounded, even if the client uploads a square image, no matter what perspective the image is. The image will be 50% of the width until stacked, with the title next to it. ● Some products may have tables for information. These tables need to be ○ Zebra striped ○ Change colors on hover ○ Responsive ● All products must scale, or Zoom, when hovered over to “make it pop” ● Items are off white, and go to pure white on hover ● Setup all buy now links to go to PayPal for now Requirements Specifics ● 4 fun products (raft, costume, frisbee, balls) *images uploaded already ○ Paws Raft ○ Costume ○ Frisbee ○ Balls ● Paws Raft is New, so use a badge in the title declaring it. ● Paws Raft needs a informational declaration box showing that it can pop from dog nails
  12. 12. Customize the grid! ● ● ● ● ● ● ● Desktops with large monitors ○ Show 4 to a line ○ Image to the left, title to the right Laptops ○ Show 3 to a line ○ Image is full width, everything flows underneath Tablet ○ 2 to a line Smartphone ○ 1 to a line If needed, change the amount of columns to the grid It is forced fluid (for the better) Push and Pull?!? Other Cool Extras ● ● ● ● ● Enable colors on specific table cells or rows Use Glyphicons (Bazinga!) Extra helper classes Lots of renaming (better semantics) More for flat design instead of skeuomorphic Ways Bootstrap 3 can improve even more!
  13. 13. You guys are rad! How did you do that so fast and so well? I WILL hire you for twice your rate next time. Have fun in Boston!
  14. 14. Questions? I will answer your questions. I will not catch socks in my mouth. Got one for later? @hdwebpros or just pull me aside Remember, #JWC13 #youreawesome