Андрей Юртаев - Improve theming with (Twitter) Bootstrap

889 views

Published on

Андрей Юртаев - Improve theming with (Twitter) Bootstrap
Событие: Drupal White Nights 2014
Дата: 07.06.2014
Анонс: http://camp2014.drupalspb.org/sessions/improve-theming-twitter-bootstrap

Published in: Software, Technology
  • Be the first to comment

  • Be the first to like this

Андрей Юртаев - Improve theming with (Twitter) Bootstrap

  1. 1. Improve theming with (Twitter) Bootstrap Yurtaev Andrey @i_amdroid
  2. 2. What is bootstrap? “The most popular front-end framework for developing responsive, mobile first projects on the web.” getbootstrap.com
  3. 3. Benefits ● standardization of markup ● popularity ● extensibility
  4. 4. d.o themes Bootstrap 3 ● Bootstrap dgo.to/bootstrap ● Bootstrap Barrio dgo.to/bootstrap_barrio ● Bootstrap Business dgo.to/bootstrap-business ● Radix dgo.to/radix ● Circle dgo.to/circle Bootstrap 2 ● Tweme dgo.to/tweme ● Elimai dgo.to/elimai
  5. 5. Examples
  6. 6. Bootstrap basic theme, navbar, wells, tooltips, many settings
  7. 7. Bootstrap Barrio bootstrap subtheme, basic theme
  8. 8. Bootstrap Business colors, looks great
  9. 9. Radix basic theme, for panopoly, bootswatch compatible
  10. 10. bootswatch.com - choose theme, for example, flatly drush radix "Flatly" --bootswatch=flatly easy, but requires compass and other gems
  11. 11. Circle for panels, very basic, many settings, no bs classes for standart elements
  12. 12. Tweme ready to use
  13. 13. Elimai
  14. 14. More Drupal themes themeforest.net more than 100 professional drupal themes based on bootstrap price 40-50$
  15. 15. Examples
  16. 16. Consilium d7.to/consilium
  17. 17. Dawn d7.to/dawn
  18. 18. Realia d7.to/realia
  19. 19. Make own Bootstrap theme MYTHEME.info: name = MYTHEME core = 7.x description = Bootstrap start theme. dependencies[] = jquery_update base theme = html5
  20. 20. template.php: function MYTHEME_preprocess_html(&$variables) { drupal_add_css('//netdna.bootstrapcdn.com/ bootstrap/3.1.1/css/bootstrap.min.css', array('type' => 'external')); drupal_add_js('//netdna.bootstrapcdn.com/ bootstrap/3.1.1/js/bootstrap.min.js', array('type' => 'external')); }
  21. 21. page.tpl.php: <!-- mark up from http://getbootstrap.com/components/#navbar --> <nav role="navigation" class="navbar navbar-default"> <div class="container-fluid"><div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#"><?php print $site_name; ?></a> </div> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <?php print theme('links__system_main_menu', array('links' => $main_menu, 'attributes' => array( 'id' => 'main-menu', 'class' => array('nav', 'navbar-nav')))); ?> </div></div> </nav>
  22. 22. Result
  23. 23. Preprocess template.php: /** * Override theme_menu_local_tasks(). * Add Bootstrap class to menu */ function MYTHEME_menu_tree($variables) { return '<ul class="menu nav">' . $variables['tree'] . '</ul>'; }
  24. 24. function MYTHEME_menu_local_tasks(&$variables) { $output = ''; if (!empty($variables['primary'])) { $variables['primary']['#prefix'] = '<h2 class="element-invisible">' . t('Primary tabs') . '</h2>'; $variables['primary']['#prefix'] .= '<ul class="nav nav-tabs">'; $variables['primary']['#suffix'] = '</ul>'; $output .= drupal_render($variables['primary']); } if (!empty($variables['secondary'])) { $variables['secondary']['#prefix'] = '<h2 class="element-invisible">' . t('Secondary tabs') . '</h2>'; $variables['secondary']['#prefix'] .= '<ul class="nav nav-tabs">'; $variables['secondary']['#suffix'] = '</ul>'; $output .= drupal_render($variables['secondary']); } return $output; }
  25. 25. So, we will get... Bootstrap (d.o theme)
  26. 26. Or... Glook d7.to/glook-sb
  27. 27. Glook ready to use, flexbox
  28. 28. Approaches Classic way ● a lot of css ● little bit preprocess ● different look BS subtheme or own theme ● little bit css ● a lot of preprocess ● close to default look Another way ● little bit of Sass (or Less) ● no preprocess ● different look
  29. 29. Bootstrap SASS github.com/twbs/bootstrap-sass gem install bootstrap-sass compass create MYTHEME -r bootstrap-sass --using bootstrap
  30. 30. Theme files template.php: /* disable cdn function MYTHEME_preprocess_html(&$variables) { ... } */
  31. 31. MYTHEME.info: stylesheets[all][] = css/styles.css scripts[] = js/bootstrap/collapse.js ...
  32. 32. styles.scss: // customize bootstrap variables here: @import "variables"; @import "bootstrap"; .links, .links li { list-style: none; padding: 0; } .links li a { @extend .btn; @extend .btn-info; }
  33. 33. Result
  34. 34. In sum
  35. 35. Actually only on themeforest, but there are: ● templatemonster.com ● templateshop.be ● dreamtemplate.com ● and many others
  36. 36. Bootstrap tools ● bootsnipp.com/resources ● d7.to/bs-tools ● d7.to/bs-tools4d
  37. 37. Thank You Questions?

×