Embed Size (px)
DESCRIPTION
Our presentation from the Joomla World Conference 2013. *note missing live demo obviously
Citation preview
Making Bootstrap Work for Youand Techie Jones
About MeRyan Boog @hdwebpros @ryanboog /HappyDogWebProductions
651-243-2DOGLet’s Connect! #youreawesome
● Owner of Happy Dog Web Productions● Devoted father and husband● Sadly a proud Vikings fan● Away from Joomla! and web, I enjoy
hanging out, sports, trying new restaurants and pretending to be a decent food critic, doing fun competitive things. Okay, an occasional beer too, especially on fun events like this.
What is Bootstrap?According to them, it is:
“Sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development.”
Stop wrestling with CSSLots 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 BootstrappinYou 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
orInsert 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 JonesMy 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 TaskWe need to make an ecommerce layout to sell dog supplies for Boston Foods Company. You must complete this within 24 hours. Love, Techie
Requirements
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
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
Ways Bootstrap 3 can improve even more!
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
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
