Bootstrap. December 2015 [Brisbane Drupal meetup]

Bootstrap08 December 2015Drupal Brisbane meetup

TOC

- What is Bootstrap?

- What is next for Bootstrap?

- Bootstrap in Drupal

- Alternatives

Seen bootstrap lately?

Seen bootstrap lately?

What is bootstrap?

- 4 year old front end framework

- originated in twitter

- HTML, CSS, and JS framework

- Responsive, mobile first

BootsTrap 3

CSS

- http://getbootstrap.com/css/- Less (with official Sass port)

Components

- http://getbootstrap.com/components/

Javascript plugins

- http://getbootstrap.com/javascript/

BootsTrap 4

- Announced Aug-2015

- Dev Branch on github

- http://v4-alpha.getbootstrap.com/getting-started/

- http://blog.getbootstrap.com/2015/08/19/bootstrap-4-alpha/

BootsTrap 4: changes

- Moved from Less to Sass

- Improved grid system

- Opt-in flexbox support

- cards replaced wells, thumbnails, and

panels

- Brand new customization options

BootsTrap 4: changes

- Rewrote all our JavaScript plugins

BootsTrap 4: changes

- Improved auto-placement of tooltips and

popovers (Tether)

- Improved documentation in Markdown

- And more

BootsTrap In Drupal

- https://www.drupal.org/project/bootstrap

- http://drupal-bootstrap.org/

- 81,529 sites currently report using this theme

- Downloads: 474,231

- Subtheme model

BootsTrap In Drupal

- CDN for "out-of-the-box" styling and faster

page load times.

- Bootswatch theme support, if using the CDN.

- Glyphicons support via Icon API.

BootsTrap In Drupal

- Extensive integration and

template/preprocessor overrides

- Integrated Theme settings

- /DOCS folder

BootsTrap In Drupal 7

- Depend on jQuery_update module

BootsTrap In Drupal 7

BootsTrap In Drupal 7

BootsTrap In Drupal 8

BootsTrap In Drupal 8

DRUPAL Themes

- Bootstrap

- Tweme

- Beginning

- Kalatheme

- Bootstrap Barrio

- Radix

- https://www.drupal.org/node/2164399

Alternatives

Zurb Foundation

- http://foundation.zurb.com/

- https://github.com/zurb/foundation-sites

Google Material Design

- https://www.google.com/design/spec/material-design/

- https://github.com/google/material-design-lite

- https://material.angularjs.org/latest

- http://mdbootstrap.com/material-design-for-bootstrap/

In Conclusion

- Use Bootstrap

- Common language

- Enterprise use

QUESTIONS?

@Vladimiraus @tesdev

http://www.slideshare.net/VladimirAus