Hdwp presentation
Upcoming SlideShare
Loading in...5

Hdwp presentation



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

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



Total Views
Views on SlideShare
Embed Views



2 Embeds 9

http://www.eventifier.co 6
http://eventifier.co 3



Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

Hdwp presentation Hdwp presentation Presentation Transcript

  • Making Bootstrap Work for You and Techie Jones
  • 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
  • What is Bootstrap? According to them, it is: “Sleek, intuitive, and powerful mobile first frontend framework for faster and easier web development.”
  • 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
  • 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
  • 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.
  • 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'); ?>
  • Out of the Box Example ● ● ● ● Use Grid Create a 4 column layout Add simple text to each column Add a blank button to each
  • 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?
  • 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
  • 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
  • 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!
  • 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!
  • 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