A Custom Drupal Theme in 40 Minutes
0 likes•420 views
The document outlines a presentation by Daniel Schiavone on creating a custom Drupal theme in Drupal 8, focusing on development environment setup and tools like Drush and Gulp. It covers the use of YAML for configuration, Twig for templating, and Sass for styling, alongside examples of theme structure and anatomy. Additionally, it provides resources for further learning and upcoming Drupal community events.
A Custom Drupal Theme in 40 Minutes
- 1. A Custom Drupal Theme in 40 35 minutes DRUPALGOVCON 2016 Daniel Schiavone
- 2. Starting point Drupal 8 installed Debugging enabled Sample content Modules - Devel, Display Suite, Responsive Image
- 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. 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. Twig Print something {{ name }} Run code {% set class = “something-something” %} Comment {# This is something #} http://twig.sensiolabs.org/doc/templates.html
- 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. 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. 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. Anatomy of a Theme mytheme.info.yml mytheme.libraries.yml mytheme.breakpoints.yml mytheme css scss styles.scss images templates js lib
- 10. Ready, set, go!
- 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. 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. Resources - Development Acquia Dev Desktop → http://www.acquia.com/downloads Firebug → http://getfirebug.com Livereload → http://livereload.com/extensions
- 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. Questions Daniel Schiavone www.SnakeHill.net [email protected] @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