hdwp presentation
DESCRIPTION
Our presentation from the Joomla World Conference 2013. *note missing live demo obviouslyTRANSCRIPT
![Page 1: Hdwp presentation](https://reader033.vdocuments.net/reader033/viewer/2022052823/55509943b4c90595208b4778/html5/thumbnails/1.jpg)
Making Bootstrap Work for Youand Techie Jones
![Page 2: Hdwp presentation](https://reader033.vdocuments.net/reader033/viewer/2022052823/55509943b4c90595208b4778/html5/thumbnails/2.jpg)
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.
![Page 3: Hdwp presentation](https://reader033.vdocuments.net/reader033/viewer/2022052823/55509943b4c90595208b4778/html5/thumbnails/3.jpg)
What is Bootstrap?According to them, it is:
“Sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development.”
![Page 4: Hdwp presentation](https://reader033.vdocuments.net/reader033/viewer/2022052823/55509943b4c90595208b4778/html5/thumbnails/4.jpg)
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
![Page 5: Hdwp presentation](https://reader033.vdocuments.net/reader033/viewer/2022052823/55509943b4c90595208b4778/html5/thumbnails/5.jpg)
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
![Page 6: Hdwp presentation](https://reader033.vdocuments.net/reader033/viewer/2022052823/55509943b4c90595208b4778/html5/thumbnails/6.jpg)
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.
![Page 7: Hdwp presentation](https://reader033.vdocuments.net/reader033/viewer/2022052823/55509943b4c90595208b4778/html5/thumbnails/7.jpg)
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'); ?>
![Page 8: Hdwp presentation](https://reader033.vdocuments.net/reader033/viewer/2022052823/55509943b4c90595208b4778/html5/thumbnails/8.jpg)
Out of the Box Example● Use Grid● Create a 4 column layout● Add simple text to each column● Add a blank button to each
![Page 9: Hdwp presentation](https://reader033.vdocuments.net/reader033/viewer/2022052823/55509943b4c90595208b4778/html5/thumbnails/9.jpg)
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?
![Page 10: Hdwp presentation](https://reader033.vdocuments.net/reader033/viewer/2022052823/55509943b4c90595208b4778/html5/thumbnails/10.jpg)
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
![Page 11: Hdwp presentation](https://reader033.vdocuments.net/reader033/viewer/2022052823/55509943b4c90595208b4778/html5/thumbnails/11.jpg)
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
![Page 12: Hdwp presentation](https://reader033.vdocuments.net/reader033/viewer/2022052823/55509943b4c90595208b4778/html5/thumbnails/12.jpg)
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
![Page 13: Hdwp presentation](https://reader033.vdocuments.net/reader033/viewer/2022052823/55509943b4c90595208b4778/html5/thumbnails/13.jpg)
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!
![Page 14: Hdwp presentation](https://reader033.vdocuments.net/reader033/viewer/2022052823/55509943b4c90595208b4778/html5/thumbnails/14.jpg)
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