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. What is Bootstrap?
According to them, it is:
“Sleek, intuitive, and powerful mobile first frontend framework for faster and easier web
development.”
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. 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. 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. 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. 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. 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. 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. 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!
●
●
●
●
●
●
●
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. 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. 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
