SlideShare une entreprise Scribd logo
1  sur  14
Télécharger pour lire hors ligne
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

Contenu connexe

Tendances

Wordpress Underscores & foundation5
Wordpress Underscores & foundation5Wordpress Underscores & foundation5
Wordpress Underscores & foundation5Aum Watcharapol
 
How to Jazz Up Your WordPress Site – without a lick o’ code
How to Jazz Up Your WordPress Site – without a lick o’ codeHow to Jazz Up Your WordPress Site – without a lick o’ code
How to Jazz Up Your WordPress Site – without a lick o’ codeKathryn Presner
 
Navigation in Xamarin.Forms
Navigation in Xamarin.FormsNavigation in Xamarin.Forms
Navigation in Xamarin.FormsKym Phillpotts
 
Theming Your Views
Theming Your ViewsTheming Your Views
Theming Your ViewsMark Jarrell
 
The Adobe Legal Department Style Guide
The Adobe Legal Department Style GuideThe Adobe Legal Department Style Guide
The Adobe Legal Department Style GuideAdobe
 
Evolve 2014 - Effective Navigation in Xamarin Android
Evolve 2014 - Effective Navigation in Xamarin AndroidEvolve 2014 - Effective Navigation in Xamarin Android
Evolve 2014 - Effective Navigation in Xamarin AndroidJames Montemagno
 
Using disqus & facebook comment in wordpress themes
Using disqus & facebook comment in wordpress themesUsing disqus & facebook comment in wordpress themes
Using disqus & facebook comment in wordpress themescodebangla
 
Prezi tutorial 2010
Prezi tutorial 2010Prezi tutorial 2010
Prezi tutorial 2010Karen Brooks
 
A Beginner's Guide to WordPress - WordCamp New York City 2012
A Beginner's Guide to WordPress - WordCamp New York City 2012A Beginner's Guide to WordPress - WordCamp New York City 2012
A Beginner's Guide to WordPress - WordCamp New York City 2012Kathryn Presner
 
LibTech 2014: Redesign On A Dime
LibTech 2014: Redesign On A DimeLibTech 2014: Redesign On A Dime
LibTech 2014: Redesign On A DimeJulieLibrarian
 
Markdown vs. WYSIWYG - Stop using the web like a word document
Markdown vs. WYSIWYG - Stop using the web like a word document Markdown vs. WYSIWYG - Stop using the web like a word document
Markdown vs. WYSIWYG - Stop using the web like a word document Zensations GmbH
 
The New UI - Staying Strong with Flexbox, SASS, and {{Mustache.js}}
The New UI - Staying Strong with Flexbox, SASS, and {{Mustache.js}}The New UI - Staying Strong with Flexbox, SASS, and {{Mustache.js}}
The New UI - Staying Strong with Flexbox, SASS, and {{Mustache.js}}Eric Carlisle
 
WordPress 101 wcmelb 2013
WordPress 101 wcmelb 2013WordPress 101 wcmelb 2013
WordPress 101 wcmelb 2013Warren Denley
 
Final project-Google drive
Final project-Google driveFinal project-Google drive
Final project-Google driveTrangNguyen2012
 

Tendances (20)

Wordpress Underscores & foundation5
Wordpress Underscores & foundation5Wordpress Underscores & foundation5
Wordpress Underscores & foundation5
 
Atomic design
Atomic designAtomic design
Atomic design
 
How to Jazz Up Your WordPress Site – without a lick o’ code
How to Jazz Up Your WordPress Site – without a lick o’ codeHow to Jazz Up Your WordPress Site – without a lick o’ code
How to Jazz Up Your WordPress Site – without a lick o’ code
 
Navigation in Xamarin.Forms
Navigation in Xamarin.FormsNavigation in Xamarin.Forms
Navigation in Xamarin.Forms
 
Theming Your Views
Theming Your ViewsTheming Your Views
Theming Your Views
 
Adobe & HTML5
Adobe & HTML5Adobe & HTML5
Adobe & HTML5
 
The Adobe Legal Department Style Guide
The Adobe Legal Department Style GuideThe Adobe Legal Department Style Guide
The Adobe Legal Department Style Guide
 
Evolve 2014 - Effective Navigation in Xamarin Android
Evolve 2014 - Effective Navigation in Xamarin AndroidEvolve 2014 - Effective Navigation in Xamarin Android
Evolve 2014 - Effective Navigation in Xamarin Android
 
Akki presentation 1
Akki presentation 1Akki presentation 1
Akki presentation 1
 
BUILD YOUR OWN WEBSITE
BUILD YOUR OWN WEBSITEBUILD YOUR OWN WEBSITE
BUILD YOUR OWN WEBSITE
 
Using disqus & facebook comment in wordpress themes
Using disqus & facebook comment in wordpress themesUsing disqus & facebook comment in wordpress themes
Using disqus & facebook comment in wordpress themes
 
Prezi tutorial 2010
Prezi tutorial 2010Prezi tutorial 2010
Prezi tutorial 2010
 
A Beginner's Guide to WordPress - WordCamp New York City 2012
A Beginner's Guide to WordPress - WordCamp New York City 2012A Beginner's Guide to WordPress - WordCamp New York City 2012
A Beginner's Guide to WordPress - WordCamp New York City 2012
 
LibTech 2014: Redesign On A Dime
LibTech 2014: Redesign On A DimeLibTech 2014: Redesign On A Dime
LibTech 2014: Redesign On A Dime
 
Web components
Web componentsWeb components
Web components
 
Markdown vs. WYSIWYG - Stop using the web like a word document
Markdown vs. WYSIWYG - Stop using the web like a word document Markdown vs. WYSIWYG - Stop using the web like a word document
Markdown vs. WYSIWYG - Stop using the web like a word document
 
The New UI - Staying Strong with Flexbox, SASS, and {{Mustache.js}}
The New UI - Staying Strong with Flexbox, SASS, and {{Mustache.js}}The New UI - Staying Strong with Flexbox, SASS, and {{Mustache.js}}
The New UI - Staying Strong with Flexbox, SASS, and {{Mustache.js}}
 
Google Desktop searching
Google Desktop searchingGoogle Desktop searching
Google Desktop searching
 
WordPress 101 wcmelb 2013
WordPress 101 wcmelb 2013WordPress 101 wcmelb 2013
WordPress 101 wcmelb 2013
 
Final project-Google drive
Final project-Google driveFinal project-Google drive
Final project-Google drive
 

Similaire à Hdwp presentation

Bootstrap 3 - Sleek, intuitive, and powerful mobile first front-end framework...
Bootstrap 3 - Sleek, intuitive, and powerful mobile first front-end framework...Bootstrap 3 - Sleek, intuitive, and powerful mobile first front-end framework...
Bootstrap 3 - Sleek, intuitive, and powerful mobile first front-end framework...Cedric Spillebeen
 
Bootstrap Web Development Framework
Bootstrap Web Development FrameworkBootstrap Web Development Framework
Bootstrap Web Development FrameworkCindy Royal
 
In Class Assignment 1 .docx
In Class Assignment 1                                        .docxIn Class Assignment 1                                        .docx
In Class Assignment 1 .docxjaggernaoma
 
Twitter Bootstrap, or why being a PHP Developer is a bad idea
Twitter Bootstrap, or why being a PHP Developer is a bad ideaTwitter Bootstrap, or why being a PHP Developer is a bad idea
Twitter Bootstrap, or why being a PHP Developer is a bad ideaJason Lotito
 
From a Fireworks Comp to a Genesis Child Theme, Step by Step
From a Fireworks Comp to a Genesis Child Theme, Step by StepFrom a Fireworks Comp to a Genesis Child Theme, Step by Step
From a Fireworks Comp to a Genesis Child Theme, Step by StepEast Bay WordPress Meetup
 
Basics of Front End Web Dev PowerPoint
Basics of Front End Web Dev PowerPointBasics of Front End Web Dev PowerPoint
Basics of Front End Web Dev PowerPointSahil Gandhi
 
Joomla! Day Chicago 2011 - Templating the right way - Jonathan Shroyer
Joomla! Day Chicago 2011 - Templating the right way - Jonathan ShroyerJoomla! Day Chicago 2011 - Templating the right way - Jonathan Shroyer
Joomla! Day Chicago 2011 - Templating the right way - Jonathan ShroyerSteven Pignataro
 
Drupal7 Theming session on the occassion of Drupal7 release party in Delhi NCR
Drupal7 Theming session on the occassion of  Drupal7 release party in Delhi NCRDrupal7 Theming session on the occassion of  Drupal7 release party in Delhi NCR
Drupal7 Theming session on the occassion of Drupal7 release party in Delhi NCRGaurav Mishra
 
How to make your own WordPress website
How to make your own WordPress websiteHow to make your own WordPress website
How to make your own WordPress websitelindyfly
 
UTEP AITP Presentation - 10/17/2012
UTEP AITP Presentation - 10/17/2012UTEP AITP Presentation - 10/17/2012
UTEP AITP Presentation - 10/17/2012impulsedev
 
Google Apps for Education Foundations 2015
Google Apps for Education Foundations 2015Google Apps for Education Foundations 2015
Google Apps for Education Foundations 2015Martin Cisneros
 
Developing Custom WordPress Themes for Clients
Developing Custom WordPress Themes for ClientsDeveloping Custom WordPress Themes for Clients
Developing Custom WordPress Themes for ClientsSteven Slack
 
Light introduction to HTML
Light introduction to HTMLLight introduction to HTML
Light introduction to HTMLabidibo Contini
 
Untangling spring week5
Untangling spring week5Untangling spring week5
Untangling spring week5Derek Jacoby
 
Power of mu plugins
Power of mu pluginsPower of mu plugins
Power of mu pluginsMikel King
 
Drupalcamp performance
Drupalcamp performanceDrupalcamp performance
Drupalcamp performanceFrontkom
 
Topsy Turvy Design
Topsy Turvy DesignTopsy Turvy Design
Topsy Turvy DesignRich Quick
 
Untangling the web - fall2017 - class 4
Untangling the web - fall2017 - class 4Untangling the web - fall2017 - class 4
Untangling the web - fall2017 - class 4Derek Jacoby
 

Similaire à Hdwp presentation (20)

Bootstrap 3 - Sleek, intuitive, and powerful mobile first front-end framework...
Bootstrap 3 - Sleek, intuitive, and powerful mobile first front-end framework...Bootstrap 3 - Sleek, intuitive, and powerful mobile first front-end framework...
Bootstrap 3 - Sleek, intuitive, and powerful mobile first front-end framework...
 
Bootstrap Web Development Framework
Bootstrap Web Development FrameworkBootstrap Web Development Framework
Bootstrap Web Development Framework
 
In Class Assignment 1 .docx
In Class Assignment 1                                        .docxIn Class Assignment 1                                        .docx
In Class Assignment 1 .docx
 
Twitter Bootstrap, or why being a PHP Developer is a bad idea
Twitter Bootstrap, or why being a PHP Developer is a bad ideaTwitter Bootstrap, or why being a PHP Developer is a bad idea
Twitter Bootstrap, or why being a PHP Developer is a bad idea
 
From a Fireworks Comp to a Genesis Child Theme, Step by Step
From a Fireworks Comp to a Genesis Child Theme, Step by StepFrom a Fireworks Comp to a Genesis Child Theme, Step by Step
From a Fireworks Comp to a Genesis Child Theme, Step by Step
 
Basics of Front End Web Dev PowerPoint
Basics of Front End Web Dev PowerPointBasics of Front End Web Dev PowerPoint
Basics of Front End Web Dev PowerPoint
 
Joomla! Day Chicago 2011 - Templating the right way - Jonathan Shroyer
Joomla! Day Chicago 2011 - Templating the right way - Jonathan ShroyerJoomla! Day Chicago 2011 - Templating the right way - Jonathan Shroyer
Joomla! Day Chicago 2011 - Templating the right way - Jonathan Shroyer
 
Easy Webtech
Easy WebtechEasy Webtech
Easy Webtech
 
Drupal7 Theming session on the occassion of Drupal7 release party in Delhi NCR
Drupal7 Theming session on the occassion of  Drupal7 release party in Delhi NCRDrupal7 Theming session on the occassion of  Drupal7 release party in Delhi NCR
Drupal7 Theming session on the occassion of Drupal7 release party in Delhi NCR
 
How to make your own WordPress website
How to make your own WordPress websiteHow to make your own WordPress website
How to make your own WordPress website
 
UTEP AITP Presentation - 10/17/2012
UTEP AITP Presentation - 10/17/2012UTEP AITP Presentation - 10/17/2012
UTEP AITP Presentation - 10/17/2012
 
Google Apps for Education Foundations 2015
Google Apps for Education Foundations 2015Google Apps for Education Foundations 2015
Google Apps for Education Foundations 2015
 
Developing Custom WordPress Themes for Clients
Developing Custom WordPress Themes for ClientsDeveloping Custom WordPress Themes for Clients
Developing Custom WordPress Themes for Clients
 
Light introduction to HTML
Light introduction to HTMLLight introduction to HTML
Light introduction to HTML
 
Untangling spring week5
Untangling spring week5Untangling spring week5
Untangling spring week5
 
Power of mu plugins
Power of mu pluginsPower of mu plugins
Power of mu plugins
 
Drupalcamp performance
Drupalcamp performanceDrupalcamp performance
Drupalcamp performance
 
Topsy Turvy Design
Topsy Turvy DesignTopsy Turvy Design
Topsy Turvy Design
 
Untangling the web - fall2017 - class 4
Untangling the web - fall2017 - class 4Untangling the web - fall2017 - class 4
Untangling the web - fall2017 - class 4
 
WordPress 101
WordPress 101 WordPress 101
WordPress 101
 

Dernier

A Critique of the Proposed National Education Policy Reform
A Critique of the Proposed National Education Policy ReformA Critique of the Proposed National Education Policy Reform
A Critique of the Proposed National Education Policy ReformChameera Dedduwage
 
9548086042 for call girls in Indira Nagar with room service
9548086042  for call girls in Indira Nagar  with room service9548086042  for call girls in Indira Nagar  with room service
9548086042 for call girls in Indira Nagar with room servicediscovermytutordmt
 
Call Girls in Dwarka Mor Delhi Contact Us 9654467111
Call Girls in Dwarka Mor Delhi Contact Us 9654467111Call Girls in Dwarka Mor Delhi Contact Us 9654467111
Call Girls in Dwarka Mor Delhi Contact Us 9654467111Sapana Sha
 
Activity 01 - Artificial Culture (1).pdf
Activity 01 - Artificial Culture (1).pdfActivity 01 - Artificial Culture (1).pdf
Activity 01 - Artificial Culture (1).pdfciinovamais
 
Class 11th Physics NEET formula sheet pdf
Class 11th Physics NEET formula sheet pdfClass 11th Physics NEET formula sheet pdf
Class 11th Physics NEET formula sheet pdfAyushMahapatra5
 
The Most Excellent Way | 1 Corinthians 13
The Most Excellent Way | 1 Corinthians 13The Most Excellent Way | 1 Corinthians 13
The Most Excellent Way | 1 Corinthians 13Steve Thomason
 
Beyond the EU: DORA and NIS 2 Directive's Global Impact
Beyond the EU: DORA and NIS 2 Directive's Global ImpactBeyond the EU: DORA and NIS 2 Directive's Global Impact
Beyond the EU: DORA and NIS 2 Directive's Global ImpactPECB
 
Ecosystem Interactions Class Discussion Presentation in Blue Green Lined Styl...
Ecosystem Interactions Class Discussion Presentation in Blue Green Lined Styl...Ecosystem Interactions Class Discussion Presentation in Blue Green Lined Styl...
Ecosystem Interactions Class Discussion Presentation in Blue Green Lined Styl...fonyou31
 
Key note speaker Neum_Admir Softic_ENG.pdf
Key note speaker Neum_Admir Softic_ENG.pdfKey note speaker Neum_Admir Softic_ENG.pdf
Key note speaker Neum_Admir Softic_ENG.pdfAdmir Softic
 
Student login on Anyboli platform.helpin
Student login on Anyboli platform.helpinStudent login on Anyboli platform.helpin
Student login on Anyboli platform.helpinRaunakKeshri1
 
Unit-IV- Pharma. Marketing Channels.pptx
Unit-IV- Pharma. Marketing Channels.pptxUnit-IV- Pharma. Marketing Channels.pptx
Unit-IV- Pharma. Marketing Channels.pptxVishalSingh1417
 
Web & Social Media Analytics Previous Year Question Paper.pdf
Web & Social Media Analytics Previous Year Question Paper.pdfWeb & Social Media Analytics Previous Year Question Paper.pdf
Web & Social Media Analytics Previous Year Question Paper.pdfJayanti Pande
 
Kisan Call Centre - To harness potential of ICT in Agriculture by answer farm...
Kisan Call Centre - To harness potential of ICT in Agriculture by answer farm...Kisan Call Centre - To harness potential of ICT in Agriculture by answer farm...
Kisan Call Centre - To harness potential of ICT in Agriculture by answer farm...Krashi Coaching
 
Introduction to Nonprofit Accounting: The Basics
Introduction to Nonprofit Accounting: The BasicsIntroduction to Nonprofit Accounting: The Basics
Introduction to Nonprofit Accounting: The BasicsTechSoup
 
Holdier Curriculum Vitae (April 2024).pdf
Holdier Curriculum Vitae (April 2024).pdfHoldier Curriculum Vitae (April 2024).pdf
Holdier Curriculum Vitae (April 2024).pdfagholdier
 
Interactive Powerpoint_How to Master effective communication
Interactive Powerpoint_How to Master effective communicationInteractive Powerpoint_How to Master effective communication
Interactive Powerpoint_How to Master effective communicationnomboosow
 
Measures of Central Tendency: Mean, Median and Mode
Measures of Central Tendency: Mean, Median and ModeMeasures of Central Tendency: Mean, Median and Mode
Measures of Central Tendency: Mean, Median and ModeThiyagu K
 
SOCIAL AND HISTORICAL CONTEXT - LFTVD.pptx
SOCIAL AND HISTORICAL CONTEXT - LFTVD.pptxSOCIAL AND HISTORICAL CONTEXT - LFTVD.pptx
SOCIAL AND HISTORICAL CONTEXT - LFTVD.pptxiammrhaywood
 

Dernier (20)

A Critique of the Proposed National Education Policy Reform
A Critique of the Proposed National Education Policy ReformA Critique of the Proposed National Education Policy Reform
A Critique of the Proposed National Education Policy Reform
 
9548086042 for call girls in Indira Nagar with room service
9548086042  for call girls in Indira Nagar  with room service9548086042  for call girls in Indira Nagar  with room service
9548086042 for call girls in Indira Nagar with room service
 
Call Girls in Dwarka Mor Delhi Contact Us 9654467111
Call Girls in Dwarka Mor Delhi Contact Us 9654467111Call Girls in Dwarka Mor Delhi Contact Us 9654467111
Call Girls in Dwarka Mor Delhi Contact Us 9654467111
 
Activity 01 - Artificial Culture (1).pdf
Activity 01 - Artificial Culture (1).pdfActivity 01 - Artificial Culture (1).pdf
Activity 01 - Artificial Culture (1).pdf
 
Class 11th Physics NEET formula sheet pdf
Class 11th Physics NEET formula sheet pdfClass 11th Physics NEET formula sheet pdf
Class 11th Physics NEET formula sheet pdf
 
The Most Excellent Way | 1 Corinthians 13
The Most Excellent Way | 1 Corinthians 13The Most Excellent Way | 1 Corinthians 13
The Most Excellent Way | 1 Corinthians 13
 
Beyond the EU: DORA and NIS 2 Directive's Global Impact
Beyond the EU: DORA and NIS 2 Directive's Global ImpactBeyond the EU: DORA and NIS 2 Directive's Global Impact
Beyond the EU: DORA and NIS 2 Directive's Global Impact
 
Ecosystem Interactions Class Discussion Presentation in Blue Green Lined Styl...
Ecosystem Interactions Class Discussion Presentation in Blue Green Lined Styl...Ecosystem Interactions Class Discussion Presentation in Blue Green Lined Styl...
Ecosystem Interactions Class Discussion Presentation in Blue Green Lined Styl...
 
Key note speaker Neum_Admir Softic_ENG.pdf
Key note speaker Neum_Admir Softic_ENG.pdfKey note speaker Neum_Admir Softic_ENG.pdf
Key note speaker Neum_Admir Softic_ENG.pdf
 
Student login on Anyboli platform.helpin
Student login on Anyboli platform.helpinStudent login on Anyboli platform.helpin
Student login on Anyboli platform.helpin
 
Código Creativo y Arte de Software | Unidad 1
Código Creativo y Arte de Software | Unidad 1Código Creativo y Arte de Software | Unidad 1
Código Creativo y Arte de Software | Unidad 1
 
Unit-IV- Pharma. Marketing Channels.pptx
Unit-IV- Pharma. Marketing Channels.pptxUnit-IV- Pharma. Marketing Channels.pptx
Unit-IV- Pharma. Marketing Channels.pptx
 
Web & Social Media Analytics Previous Year Question Paper.pdf
Web & Social Media Analytics Previous Year Question Paper.pdfWeb & Social Media Analytics Previous Year Question Paper.pdf
Web & Social Media Analytics Previous Year Question Paper.pdf
 
Kisan Call Centre - To harness potential of ICT in Agriculture by answer farm...
Kisan Call Centre - To harness potential of ICT in Agriculture by answer farm...Kisan Call Centre - To harness potential of ICT in Agriculture by answer farm...
Kisan Call Centre - To harness potential of ICT in Agriculture by answer farm...
 
Introduction to Nonprofit Accounting: The Basics
Introduction to Nonprofit Accounting: The BasicsIntroduction to Nonprofit Accounting: The Basics
Introduction to Nonprofit Accounting: The Basics
 
Mattingly "AI & Prompt Design: Structured Data, Assistants, & RAG"
Mattingly "AI & Prompt Design: Structured Data, Assistants, & RAG"Mattingly "AI & Prompt Design: Structured Data, Assistants, & RAG"
Mattingly "AI & Prompt Design: Structured Data, Assistants, & RAG"
 
Holdier Curriculum Vitae (April 2024).pdf
Holdier Curriculum Vitae (April 2024).pdfHoldier Curriculum Vitae (April 2024).pdf
Holdier Curriculum Vitae (April 2024).pdf
 
Interactive Powerpoint_How to Master effective communication
Interactive Powerpoint_How to Master effective communicationInteractive Powerpoint_How to Master effective communication
Interactive Powerpoint_How to Master effective communication
 
Measures of Central Tendency: Mean, Median and Mode
Measures of Central Tendency: Mean, Median and ModeMeasures of Central Tendency: Mean, Median and Mode
Measures of Central Tendency: Mean, Median and Mode
 
SOCIAL AND HISTORICAL CONTEXT - LFTVD.pptx
SOCIAL AND HISTORICAL CONTEXT - LFTVD.pptxSOCIAL AND HISTORICAL CONTEXT - LFTVD.pptx
SOCIAL AND HISTORICAL CONTEXT - LFTVD.pptx
 

Hdwp presentation

  • 1. Making Bootstrap Work for You and Techie Jones
  • 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