Download to read offline
More Related Content
Hdwp presentation
- 1. Making Bootstrap Work forYou and Techie Jones
- 2. About Me ● Ownerof 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. What is Bootstrap? Accordingto them, it is: “Sleek, intuitive, and powerful mobile first frontend framework for faster and easier web development.”
- 4. Stop wrestling withCSS 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. Where can Iuse 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. Lets do someBootstrappin You came here to see some Bootstrappin’, right? I will now show you how easy it is to use on your site.
- 7. Enabling (for coreBootstrap, 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. Out of theBox Example ● ● ● ● Use Grid Create a 4 column layout Add simple text to each column Add a blank button to each
- 9. Meet Techie Jones Myname 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. Techie’s Task We needto make an ecommerce layout to sell dog supplies for Boston Foods Company. You must complete this within 24 hours. Love, Techie
- 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. Customize the grid! ● ● ● ● ● ● ● Desktopswith 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. You guys arerad! 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. Questions? I will answeryour questions. I will not catch socks in my mouth. Got one for later? @hdwebpros or just pull me aside Remember, #JWC13 #youreawesome