Download to read offline
Uploaded byJacqueline Jensen
Bootstrap 3 Presentation at Las Vegas Ruby Group
Bootstrap 3 is a popular front-end framework that makes website creation easier and faster through features like consistency and customization. The document discusses three key changes in Bootstrap 3 - a flat design, improved typography, and a mobile-first approach. It also provides information on converting websites from previous Bootstrap versions to Bootstrap 3, either through automated tools or manually.
Bootstrap 3 Presentation at Las Vegas Ruby Group
- 1. BOOTSTRAP 3 ISHERE. LET’S TALK CHANGES, HOW TO CONVERT, & WHY BOOTSTRAP ROCKS.
- 2. WHAT IS BOOTSTRAP Createdby 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. WHY I BOOTSTRAP 1 hourlater…
- 4. WHY USE BOOTSTRAP Bootstrapis a powerful tool for front-end web development. It makes the creation of websites and apps easier and faster. Save Time // Customizable // Consistency //
- 5. THREE BOOTSTRAP 3 CHANGES. (Thatstand out to a newbie.) FLAT DESIGN // TYPOGRAPHY // MOBILE-FIRST //
- 6. #1 – FLATDESIGN
- 7.
- 8. #3 – MOBILE-FIRST Inthis 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. 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. SOURCES getbootstrap.com // sitepoint.com // bootstrap3.kissr.com// code.divshot.com // mattduchek.com // instagram.com/jackiemjensen //
Editor's Notes
- #5 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.
- #7 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.
- #8 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:
- #9 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.
- #10 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!
- #11 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.