Setting up a Frontend
Development Environment for Drupal 8
Kristin Bradham - kbradham@hook42.com
https://kristin-dev.github.io/frontend-dev-environment/index.html
TIP! .yml files require 2 (or multiple of 2) spaces to work!!!! Not a tab! Make sure your editor is set for this.
Find Your SSH
ls -al ~/.ssh
Generate SSH Keys
Pantheon
Kalabox (Don’t need MAMP / WAMP)
Acquia Dev Desktop (Don’t need MAMP / WAMP)
Change php.ini for Drupal 8 (especially for Twig debugging)
memory_limit = 1024M
$ chmod -R u+w [site-path]/sites
$ chmod -Rf 775 [site-path]/sites/default
$ alias cdp='chmod -R u+w [site-path]/sites'
(admin/people/permissions and /user)
Make sure you have admin access
and you are NOT user 1
Aliases are your friend!
alias cdhtdocs='cd /Applications/MAMP/htdocs;'
alias hdd='drush @pantheon.hook42d8.peer-review sql-dump > ~/Downloads/h42d8--peer-review.sql;'
alias gitperms='cd /Applications/MAMP/htdocs/client/sites/all/modules; git config core.fileMode false; chmod -R 775 custom;'
#Search Git
searchGit() {
git branch -a | grep $1
}
alias sgit=searchGit;
twig.debug;
debug: true
{{ dump(_context|keys) }}
{{ kint(title) }}
theme.libraries.yml
The new “way”
JQuery not automatically loaded anymore
load in theme.libraries.yml
global:
css:
theme:
css/style.css: {}
js:
js_min/script.js: {}
dependencies:
- core/jquery
- core/jquery.once
- core/drupal
$ drupal generate:theme [options]
$ gt
Cassian says you have to.
This is a huge framework - not just frontend, whole applications are written in NodeJS.
For us, we just need to install it so we can install node packages with npm.
Node Package Manager
A large repository of online NodeJS projects. We will use these to automate our frontend processes.
Installed as part of NodeJS.
npm install --save-dev gulp
npm install
$ npm install gulp-sass --save-dev
$ npm install
You need this so that different developers are using the same versions of npm and gulp tasks PER PROJECT.
So the same machine might have 2 different versions of NodeJS or plugins - and it uses the right one at the right time.
'use strict';
var gulp = require('gulp');
var sass = require('gulp-sass');
gulp.task('sass', function () {
return gulp.src('./sass/**/*.scss')
.pipe(gulp.dest('./css'));
});
gulp.task('watch', function () {
gulp.watch('./sass/**/*.scss', ['sass']);
});
(the old way)
Similar to Gulp
You might inherit this!
module.exports = function(grunt) {
grunt.initConfig({
jshint: {
files: ['Gruntfile.js', 'src/**/*.js', 'test/**/*.js'],
options: {
globals: {
jQuery: true
}
}
},
watch: {
files: ['<%= jshint.files %>'],
tasks: ['jshint']
}
});
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask('default', ['jshint']);
};
(another old way)
Install Ruby
RVM
Cleaner code with reusable pieces and variables
Saves you time
Easier to maintain code with snippets and libraries
Calculations and logic
More organized and easy to setup
SASS
(Unless Less is your thing...)
Classy setup is nicely organized
SASS is getting bigger and we’re trying to get organized!
/* Example Module */
.example { }
/* Callout Module */
.callout { }
/* Callout Module with State */
.callout.is-collapsed { }
/* Form field module */
.field { }
/* Inline layout */
.l-inline { }
.nav {}
.nav__list {}
.nav__list__item {}
.nav__link {}
.nav__link--active {}
.button { width: 200px; height: 50px;}
.box { width: 400px; overflow: hidden;}
.widget { width: 500px; min-height: 200px; overflow: auto;}
.skin { border: solid 1px #ccc; background: green; }
Pattern Lab is an ‘application’ that creates a very nifty style guide
It is based on Atomic Design principles
These live outside of a theme - they have their own file structures.
#drupalsprints - Friday, April 28, 2017
Locate this session at the
DrupalCon Baltimore website:
Take the survey!
https://www.surveymonkey.com/r/drupalconbaltimore