Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.

A Custom Drupal Theme in 40 Minutes

295 visualizaciones

Publicado el

Can a custom Drupal 8 Theme be created in 40 minutes? The results might not be pretty but we're going to create a theme from start to finish. In the process you'll get to see all the components that make up a theme and get acquainted with tools that get the job done.

Publicado en: Tecnología
  • Inicia sesión para ver los comentarios

  • Sé el primero en recomendar esto

A Custom Drupal Theme in 40 Minutes

  1. 1. A Custom Drupal Theme in 40 35 minutes DRUPALGOVCON 2016 Daniel Schiavone
  2. 2. Starting point Drupal 8 installed Debugging enabled Sample content Modules - Devel, Display Suite, Responsive Image
  3. 3. Development Environment Disable cache, Enable Twig debug Templates → /modules/system/templates settings.php and settings.local.php service.yml and development.services.yml
  4. 4. YAML --- # Employee record name: Joey job: Themer skills: - Music - Art languages: php: Elite javascript: Elite YAML is a human friendly data serialization standard for all programming languages. (but not tab friendly) http://www.yaml.org/
  5. 5. Twig Print something {{ name }} Run code {% set class = “something-something” %} Comment {# This is something #} http://twig.sensiolabs.org/doc/templates.html
  6. 6. Sass A CSS preprocessor that adds power and elegance to the basic language with use variables, nested rules, mixins, inline imports, and more. $font-stack: Helvetica, sans-serif; $primary-color: #333; body { font: 100% $font-stack; color: $primary-color; } http://sass-lang.com body { font: 100% Helvetica, sans-serif; color: #333; }
  7. 7. Options for Creating a Theme ● From scratch (by default themes use Stable as Base Theme) ● Contrib theme ● Subtheme ○ Core base themes ■ Classy - base theme for Bartik and Seven ■ Stable - bare minimum/style for things to work ○ Other base themes
  8. 8. Classy vs Stable <div class="field field--name-field-time- lord field--type-string field--label- above"> <div class="field__label">Time Lords</div> <div class='field__items'> <div class="field__item">The Doctor </div> <div class="field__item">River Song</div> </div> </div> <div> <div>Time Lords</div> <div> <div>The Doctor</div> <div>River Song</div> </div> </div>
  9. 9. Anatomy of a Theme mytheme.info.yml mytheme.libraries.yml mytheme.breakpoints.yml mytheme css scss styles.scss images templates js lib
  10. 10. Ready, set, go!
  11. 11. Resources - Development Environment ● Local environment - LAMP/MAMP, Acquia DevDesktop ● Browser extensions - Firebug, Livereload http://www.acquia.com/downloads http://getfirebug.com http://livereload.com/extensions ● Gulp → https://css-tricks.com/gulp-for-beginners
  12. 12. Resources - Drush & Gulp ● In order to use Drush with Drupal 8 you need composer ● Windows → https://modulesunraveled.com/drush/installing- drush-windows ● Mac → https://www.drupal.org/node/1674222 ● Linux → http://whaaat.com/installing-drush-8-using-composer https://www.drupal.org/node/1791676 ● Gulp → https://css-tricks.com/gulp-for-beginners
  13. 13. Resources - Development Acquia Dev Desktop → http://www.acquia.com/downloads Firebug → http://getfirebug.com Livereload → http://livereload.com/extensions
  14. 14. Resources - Learn @MortenDK’s Barcelona Session https://www.youtube.com/watch?v=1m6WR7e7qwU Watch and Learn YouTube Channel https://www.youtube. com/channel/UCXQC_GB5hG6PkzIhSMZ-hWA Notes from my Designing with Drupal 8 course http://www.SnakeHill.net/designingd8 Meetups, Camps and Cons
  15. 15. Questions Daniel Schiavone www.SnakeHill.net Daniel@SnakeHill.net @schiavo @Snake_Hill DDO: schiavone Community Drupal Global Training Day → Sept 9, 10, 2016 Baltimore DrupalCamp → Oct 7, 2016 DrupaCon Baltimore!!! → April 24 - 27, 2017 Baltimore Drupal Meetup → 2nd Wed @ Bertha’s meetup.com/Baltimore-Drupal-Meetup Baltimore / DC Drupal Co-working

×