Your SlideShare is downloading. ×
0
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...
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 e...
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 de...
HOW TO CONVERT
#1 – Use a conversion tool
bootstrap3.kissr.com //
code.divshot.com //
#2 - Convert manually
(Why would you...
SOURCES
getbootstrap.com //
sitepoint.com //
bootstrap3.kissr.com //
code.divshot.com //
mattduchek.com //
instagram.com/j...
Upcoming SlideShare
Loading in...5
×

Bootstrap 3 Presentation at Las Vegas Ruby Group

469

Published on

Bootstrap 3 Presentation at Las Vegas Ruby Group

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
469
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • 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. 
  • 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.
  • 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:
  • 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.
  • 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!
  • 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. 
  • Transcript of "Bootstrap 3 Presentation at Las Vegas Ruby Group"

    1. 1. BOOTSTRAP 3 IS HERE. LET’S TALK CHANGES, HOW TO CONVERT, & WHY BOOTSTRAP ROCKS.
    2. 2. 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 //
    3. 3. WHY I BOOTSTRAP 1 hour later…
    4. 4. 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 //
    5. 5. THREE BOOTSTRAP 3 CHANGES. (That stand out to a newbie.) FLAT DESIGN // TYPOGRAPHY // MOBILE-FIRST //
    6. 6. #1 – FLAT DESIGN
    7. 7. #2 – TYPOGRAPHY
    8. 8. #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.
    9. 9. 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…)
    10. 10. SOURCES getbootstrap.com // sitepoint.com // bootstrap3.kissr.com // code.divshot.com // mattduchek.com // instagram.com/jackiemjensen //
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×