SlideShare una empresa de Scribd logo
1 de 10
BOOTSTRAP 3 IS HERE.
LET’S TALK CHANGES,
HOW TO CONVERT,
& WHY BOOTSTRAP ROCKS.
WHAT IS BOOTSTRAP
Created by a designer and a
developer at Twitter, Bootstrap has
become one of the most popular
front-end frameworks and open
source projects in the world.
Created in mid-2010 //
Over 20 releases //
2 major rewrites with v2 and v3 //
WHY I

BOOTSTRAP

1 hour later…
WHY USE BOOTSTRAP
Bootstrap is a powerful tool for
front-end web development. It
makes the creation of websites
and apps easier and faster.
Save Time //
Customizable //
Consistency //
THREE BOOTSTRAP 3
CHANGES.
(That stand out to a newbie.)

FLAT DESIGN //
TYPOGRAPHY //
MOBILE-FIRST //
#1 – FLAT DESIGN
#2 – TYPOGRAPHY
#3 – MOBILE-FIRST
In this release, Bootstrap follows
the mobile-first approach and
makes your site always responsive
by default.
If you don’t need an adaptive site
you can “turn off” this feature by
adding some extra CSS.
HOW TO CONVERT
#1 – Use a conversion tool
bootstrap3.kissr.com //
code.divshot.com //
#2 - Convert manually
(Why would you do this?? Ready, set, discuss…)
SOURCES
getbootstrap.com //
sitepoint.com //
bootstrap3.kissr.com //
code.divshot.com //
mattduchek.com //
instagram.com/jackiemjensen //

Más contenido relacionado

Similar a Bootstrap 3 Presentation at Las Vegas Ruby Group

Web Development Tutorial Workshop for Beginners - Learn Responsive Web Design...
Web Development Tutorial Workshop for Beginners - Learn Responsive Web Design...Web Development Tutorial Workshop for Beginners - Learn Responsive Web Design...
Web Development Tutorial Workshop for Beginners - Learn Responsive Web Design...
Bootstrap Creative
 
03bnnbnbbnbnnbbnnb.IvanAWD_Bootstrap.pdf
03bnnbnbbnbnnbbnnb.IvanAWD_Bootstrap.pdf03bnnbnbbnbnnbbnnb.IvanAWD_Bootstrap.pdf
03bnnbnbbnbnnbbnnb.IvanAWD_Bootstrap.pdf
SuziSimonovska1
 

Similar a Bootstrap 3 Presentation at Las Vegas Ruby Group (20)

Are you a Bootstrapper?
Are you a Bootstrapper?Are you a Bootstrapper?
Are you a Bootstrapper?
 
Bootstrap 5 basic
Bootstrap 5 basicBootstrap 5 basic
Bootstrap 5 basic
 
What is bootstrap
What is bootstrap   What is bootstrap
What is bootstrap
 
All about bootstrap and Its Integration with TemplateToaster
All about bootstrap and Its Integration with TemplateToasterAll about bootstrap and Its Integration with TemplateToaster
All about bootstrap and Its Integration with TemplateToaster
 
Twitter bootstrap tutorial
Twitter bootstrap tutorialTwitter bootstrap tutorial
Twitter bootstrap tutorial
 
Introduction to bootstrap
Introduction to bootstrapIntroduction to bootstrap
Introduction to bootstrap
 
Bootstrap for beginners (ms) edukite
Bootstrap for beginners (ms)   edukiteBootstrap for beginners (ms)   edukite
Bootstrap for beginners (ms) edukite
 
Bootstrap seminar presentation
Bootstrap seminar presentationBootstrap seminar presentation
Bootstrap seminar presentation
 
RWD - Bootstrap
RWD - BootstrapRWD - Bootstrap
RWD - Bootstrap
 
BootStrap_1_Introduction
BootStrap_1_IntroductionBootStrap_1_Introduction
BootStrap_1_Introduction
 
7.-Bootstrap-5-report powerpoint presentation
7.-Bootstrap-5-report powerpoint presentation7.-Bootstrap-5-report powerpoint presentation
7.-Bootstrap-5-report powerpoint presentation
 
Bootstrap vs React Which is the best front-end framework.pdf
Bootstrap vs React Which is the best front-end framework.pdfBootstrap vs React Which is the best front-end framework.pdf
Bootstrap vs React Which is the best front-end framework.pdf
 
Bootstrap.pptx
Bootstrap.pptxBootstrap.pptx
Bootstrap.pptx
 
Bootstrap 4 n00bz
Bootstrap 4 n00bzBootstrap 4 n00bz
Bootstrap 4 n00bz
 
Bootstrap ppt
Bootstrap pptBootstrap ppt
Bootstrap ppt
 
Web Development Tutorial Workshop for Beginners - Learn Responsive Web Design...
Web Development Tutorial Workshop for Beginners - Learn Responsive Web Design...Web Development Tutorial Workshop for Beginners - Learn Responsive Web Design...
Web Development Tutorial Workshop for Beginners - Learn Responsive Web Design...
 
03bnnbnbbnbnnbbnnb.IvanAWD_Bootstrap.pdf
03bnnbnbbnbnnbbnnb.IvanAWD_Bootstrap.pdf03bnnbnbbnbnnbbnnb.IvanAWD_Bootstrap.pdf
03bnnbnbbnbnnbbnnb.IvanAWD_Bootstrap.pdf
 
Bootstrap 3.0
Bootstrap 3.0Bootstrap 3.0
Bootstrap 3.0
 
Analyzing bootsrap and foundation font-end frameworks : a comparative study
Analyzing bootsrap and foundation font-end frameworks : a comparative studyAnalyzing bootsrap and foundation font-end frameworks : a comparative study
Analyzing bootsrap and foundation font-end frameworks : a comparative study
 
Bootstrap
BootstrapBootstrap
Bootstrap
 

Último

Histor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slideHistor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slide
vu2urc
 

Último (20)

Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfBoost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdf
 
Developing An App To Navigate The Roads of Brazil
Developing An App To Navigate The Roads of BrazilDeveloping An App To Navigate The Roads of Brazil
Developing An App To Navigate The Roads of Brazil
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
 
Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024
 
Histor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slideHistor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slide
 
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot TakeoffStrategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
 
Handwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed textsHandwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed texts
 
Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024
 
The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024
 
Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...
 
AWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of TerraformAWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of Terraform
 
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, AdobeApidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
 
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time AutomationFrom Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
 
2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...
 
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
 
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
 
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
 
A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?
 
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdfUnderstanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
 
A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)
 

Bootstrap 3 Presentation at Las Vegas Ruby Group

Notas del editor

  1. The popularity of Twitter has helped it cross over from the realm of user-managed social networking to a place where developers sink their teeth into heavy duty code and make the world spin as a result. The Bootstrap framework is the latest innovation to hit the design and development arena, making the creation of websites and apps easier, faster and better in general. If you’re not using Twitter Bootstrap yet, it’s time you took a look. Bootstrap is like a candy store for developers full of a multitude of tools. So why should you use Bootstrap? 1. Save Time With Bootstrap, the first thing you do is cash in on a lot of time. The Bootstrap libraries offer readymade pieces of code that can pump life into a website. A web developer doesn’t have to spend time laboriously working out and writing code, but simply find the right piece and fit it into the structure they’re working on. In addition to this, a lot of the styling and design aspects are already taken care of, since the CSS is built with LESS. 2. Customizable A great aspect of Bootstrap is that you can make it your own. You can sit down and rummage through the whole framework and keep what you need and ditch what you don’t. The whole point of Bootstrap is that it lets you factor in your own needs and tailor your development project accordingly. This is the main reason many developers feel some tools are completely useless on the Bootstrap while others revere the same. 4. Consistency One of the main reasons this toolset was developed was because Twitter was seeing big inconsistencies between developers working on their projects. This caused some issues both on the development front and the end-user front. Since it works with a central set of development code, Bootstrap’s results are uniform across platforms. You’ll see the same thing on Internet Explorer, Chrome and Firefox. 
  2. The most obvious difference between v3.0 and previous releases is the emphasis on flat design. Bootstrap includes tons of pre-styled UI components like navigation, buttons and dropdown menus. In previous versions, these components have featured pleasing, sophisticated CSS3 gradients and box shadows. The gradients are gone in v3.0, though, and have been replaced with flat colors instead. Likewise, some of the default border radius values have been reduced from 6px to 4px; components like dropdowns do still have rounded corners but they aren’t quite as round.At first glance you can easily spot that Bootstrap now has a new flat design on all elements and components. Cool! But, as we know, not everyone is a fan of this particular trend, so for this reason there is also an optional theme.
  3. No big changes to typography in Bootstrap 3, but the default text styling has been refined just slightly. Helvetica Neue remains as the default font family, but font weights have been reduced on headlines with new emphasis on lighter font weights. Just take a look at the headlines and you’ll recognize the difference right away:
  4. So long bootstrap-responsive.css – Bootstrap is now responsive by default! In this release, Bootstrap follows the mobile-first approach and makes your site always responsive by default. It’s redesigned and rebuilt to start from your handheld devices and scale up. Responsive CSS is no longer separate and all responsive features are now included into the main file. That can be great for most people, but not everyone needs or wants an adaptive web site or application. If you don’t need an adaptive site you can “turn off” this feature by adding some extra CSS. You can find how to do this in the documentation plus an example that disables the adaptive or responsive features.
  5. We've gone through the Bootstrap 3 documentation and tried our best to extract out all the changes into an automatic tool. These are the rules our automated upgrader takes when it modifies your HTML, but it's also a handy checklist to keep in mind if you're upgrading code manually!
  6. The popularity of Twitter has helped it cross over from the realm of user-managed social networking to a place where developers sink their teeth into heavy duty code and make the world spin as a result. The Bootstrap framework is the latest innovation to hit the design and development arena, making the creation of websites and apps easier, faster and better in general. If you’re not using Twitter Bootstrap yet, it’s time you took a look. Bootstrap is like a candy store for developers full of a multitude of tools. So why should you use Bootstrap? 1. Save Time With Bootstrap, the first thing you do is cash in on a lot of time. The Bootstrap libraries offer readymade pieces of code that can pump life into a website. A web developer doesn’t have to spend time laboriously working out and writing code, but simply find the right piece and fit it into the structure they’re working on. In addition to this, a lot of the styling and design aspects are already taken care of, since the CSS is built with LESS. 2. Customizable A great aspect of Bootstrap is that you can make it your own. You can sit down and rummage through the whole framework and keep what you need and ditch what you don’t. The whole point of Bootstrap is that it lets you factor in your own needs and tailor your development project accordingly. This is the main reason many developers feel some tools are completely useless on the Bootstrap while others revere the same. 4. Consistency One of the main reasons this toolset was developed was because Twitter was seeing big inconsistencies between developers working on their projects. This caused some issues both on the development front and the end-user front. Since it works with a central set of development code, Bootstrap’s results are uniform across platforms. You’ll see the same thing on Internet Explorer, Chrome and Firefox.