Date post: | 15-Feb-2017 |
Category: |
Internet |
Upload: | snake-hill-web-agency |
View: | 241 times |
Download: | 0 times |
Designing with Drupal 8DRUPALCAMP NJ 2016
Daniel Schiavone
What’s different about Drupal 8?
P.I.E. Proudly Invented Elsewhere
● Symfony2
● Symfony CMF
● Zend Feed
● Guzzle
● EasyRDF
● Twig
● PHPUnit
● Zend Diactoros
● Backbone.js
● Underscore.js
So we need to know...
Basic stuff
● html
● css
● Php
New stuff
● YAML
● Twig
● Sass
YAML
---# Employee recordname: Joeyjob: Themerskills: - Music - Artlanguages: php: Elite javascript: Elite
YAML is a human friendly data
serialization standard for all
programming languages.
http://www.yaml.org/
Twig
Print something
{{ name }}Run code
{% set class = “something-something” %}Comment
{# This is something #}
http://twig.sensiolabs.org/doc/templates.html
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;}
Before we begin
Preparing environment
● Local environment - LAMP/MAMP, Acquia DevDesktop
● Browser extensions - Firebug, Livereload
http://www.acquia.com/downloads
http://getfirebug.com
http://livereload.com/extensions
Before we begin
● Install Drupal 8
● Drush (windows, mac,
linux)
● Devel module
Directory structurecore/ ← don’t hack!modules/node_modules/profiles/sites/themes/vendor/
Before we begin
Install Drupal 8
● Download from https://www.drupal.org/project/drupal
● Drush dl drupal
Before we begin
Install Drush (Fortunately you are using Acquia’s DevDesktop)
● 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
●
1. 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
1. Creating a Theme
mytheme.info.yml
core: 8.xtype: themebase theme: classy
name: Eightdescription: This is a eight sub theme of Classy
1. Creating a Theme
mytheme.libraries.yml
# eight.libraries.ymlglobal-styling: css: theme: css/styles.css: {}global-scripts: js: theme: js/main.js: {}
2. Disable cache, Enable Twig debug
Templates → /modules/system/templates
settings.php and settings.local.php
service.yml and development.services.yml
3. Gulp
Automates repetitive tasks
Detects changes to files and…
Compiles Sass
Reloads browser with Livereload
More info → https://css-tricks.com/gulp-for-beginners
3. Gulp
1. Install nodejs → https://nodejs.org/en/download2. Download gulpfile.js from http://www.snakehill.net/designingd8
Edit gulpfile.js - replace <mytheme> with your theme name
3. Install gulp
npm install
or
npm install gulp-livereload gulp-uglifyjs gulp-sass gulp-autoprefixer gulp-sourcemaps gulp-imagemin imagemin-pngquant es6-promise
5. Blocks and Regions
1. Blocks → admin/structure/block
2. page.html.twig
3. Defining regions in mytheme.info.yml
4. Creating a block
5. Placing a block in a Region
6. Templates
● Modifying a template
● Template suggestions
● Starters → core/themes/stable
7. Menus
1. Add content
2. Add content to a menu
3. Create a new region in mytheme.info.yml
4. Add region to template
5. Add menu to region
8. Intro to Views
● Devel module
● Generate content
● Modules
● Edit filter
● Teaser vs fields
10. Content types and fields
● add content type
● add fields
● create view
● create menu item
11. Displaying fields
● Changing field layout with templates
● Changing layout with Display Suite
Questions
Daniel Schiavone
www.SnakeHill.net
@schiavo
@Snake_Hill
DDO: schiavone
Community
Baltimore Drupal Meetup
meetup.com/Baltimore-Drupal-Meetup
Baltimore / DC Drupal Co-working
References and Resources
@MortenDK’s Barcelona Session
https://www.youtube.com/watch?v=1m6WR7e7qwU
Watch and Learn YouTube Channel https://www.youtube.
com/channel/UCXQC_GB5hG6PkzIhSMZ-hWA
More at
http://www.SnakeHill.net/designingd8