Uncommitted changes

taking-flight-with-tailwind-css/2018-07-31-php-south-wales/slides.md

@@ -1,33 +1,85 @@
+theme: poster, 8
 autoscale: true
 build-lists: true
-theme: Fira, 1
+header-emphasis: #53B0EB
+header: alignment(left)
+text: alignment(left)
+text-emphasis: #53B0EB
+code: Monaco, line-height(1.2)
 
 [.hide-footer]
+[.header: alignment(center)]
 
-# [fit] _**Taking Flight with**<br>Tailwind CSS_
+## _Taking Flight with_<br>Tailwind CSS
 
 ---
 
+[.background-color: #FFFFFF]
 [.build-lists: false]
+[.header: #111111]
+[.text: #111111, alignment(left)]
 
-- Full Stack Web Developer
-- Acquia certified Drupal specialist
+![right 800%](../../images/me-phpnw.png)
+
+- Full Stack Web Developer & System Administrator
+- Senior Developer at Microserve
+- Part-time freelancer
+- Acquia certified Drupal 8 Grand Master
+- Drupal 7 & 8 core contributor
+- Symfony, Laravel, ~~Silex,~~ Sculpin
 - @opdavies
-- oliverdavies.uk
+- www.oliverdavies.uk
+
+^ Work at Microserve.
+Maintain Drupal modules, PHP CLI tools and libraries
+Blog on my website
 
 ---
 
-> A Utility-First CSS Framework for Rapid UI Development
+[.background-color: #FFFFFF]
+[.build-lists: false]
+[.text: #111111, alignment(left)]
+
+![right 100%](../../images/microserve-light.png)
+
+- https://microserve.io
+- https://www.drupal.org/microserve
+- https://github.com/microserve-io
+- https://twitter.com/microserveltd
+- https://www.linkedin.com/company/microserve-ltd
+
+---
+
+[.header: alignment(center)]
+
+## A _Utility-First CSS Framework_ for Rapid UI Development
 
 ^ What is Tailwind?
 
 ---
 
+[.header: alignment(center)]
+
+
+## A CSS framework <br>_with no CSS_
+
+---
+
+
+
+[.header: alignment(center)]
+
+
+## _A different way_ <br>to write CSS
+
+---
+
 [.build-lists: false]
 
+- Developed by Adam Wathan and others
 - Utility CSS class generator
 - PostCSS
-- Configurable
+- Configured with JavaScript
 - Some preprocessor features
 - Can be used in addition to preprocessors
 - Open source
@@ -55,8 +107,8 @@ Can use features like variables if using plain CSS.
     font-size: 1.5rem;
 }
 
-.bg-blue {
-    background-color: #3490DC;
+.bg-red {
+    background-color: #93140B;
 }
 
 .text-white {
@@ -67,8 +119,8 @@ Can use features like variables if using plain CSS.
 ---
 
 ```html
-<div class="text-2xl bg-blue-dark text-white p-8">
-    <p>Hello, Drupal Bristol!</p>
+<div class="text-2xl bg-red text-white p-8">
+    <p>Hello, PHP South Wales!</p>
 </div>
 ```
 
@@ -78,11 +130,15 @@ Can use features like variables if using plain CSS.
 
 ---
 
-## __Installation__
+[.header: alignment(center)]
+
+# Installation
 
 ---
 
-## Option 1
+[.header: #53B0EB]
+
+# Option 1
 
 ```
 https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css
@@ -90,12 +146,16 @@ https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css
 
 ---
 
-## Option 2
+[.header: #53B0EB]
+
+# Option 2
 
 ```bash
-yarn add postcss tailwindcss --save
+npm install tailwindcss --save-dev
 
-yarn run tailwind init
+yarn add tailwindcss --dev
+
+./node_modules/.bin/tailwind init [filename]
 ```
 
 ^ Install with npm or Yarn
@@ -123,27 +183,27 @@ var colors = {
 
 ---
 
-```js
-// postcss.config.js
+```less
+// app.css
 
-module.exports = {
-  plugins: [
-    require('tailwindcss')('./tailwind.js'),
-    require('autoprefixer'),
-  ]
-}
+@tailwind preflight;
+
+@tailwind components;
+
+@tailwind utilities;
 ```
 
 ---
 
-```less
-// main.less
+```js
+// webpack.mix.js
 
-@tailwind preflight;
+let mix = require('laravel-mix');
 
-// Any custom styles.
+require('laravel-mix-tailwind');
 
-@tailwind utilities;
+mix.postCss('build', 'assets/css/app.css')
+   .tailwind();
 ```
 
 ---
@@ -152,15 +212,10 @@ module.exports = {
 // webpack.config.js
 
 Encore
-    ...
-    .enableLessLoader()
-    .addStyleEntry('site', './less/main.less')
-    .enablePostCssLoader(function(options) {
-        options.config = {
-            path: 'postcss.config.js'
-        };
-    })
-    ...
+    .setOutputPath('public/build/')
+    .setPublicPath('/build')
+    .addStyleEntry('app', './assets/css/app.css')
+    .enablePostCssLoader()
 ;
 ```
 
@@ -168,16 +223,28 @@ Encore
 
 ---
 
+```js
+// postcss.config.js
+
+module.exports = {
+  plugins: [
+    require('tailwindcss')('./tailwind.js'),
+  ]
+}
+```
+
+---
+
 ```html
 <head>
     <title>Hello, World!</title>
-    <link rel="stylesheet" href="/build/site.css">
+    <link rel="stylesheet" href="/build/app.css">
 ...
 ```
 
 ---
 
-```
+```css
 .text-left {
     text-align: left;
 }
@@ -193,19 +260,27 @@ Encore
 .text-justify {
     text-align: justify;
 }
+
+...
 ```
 
 ---
 
 ```html
-<div class="text-bold text-red bg-blue">
-    Hello, world!
+<div class="text-2xl bg-red text-white p-8">
+    <p>Hello, PHP South Wales!</p>
 </div>
 ```
 
 ---
 
-## __Configuration__
+![](images/1.png)
+
+---
+
+[.header: alignment(center)]
+
+# Configuration
 
 ---
 
@@ -329,9 +404,10 @@ options: {
 
 ---
 
-## __States__
+[.header: alignment(center)]
 
-### Hover, Focus, Active
+# States
+### _Hover, Focus, Active, Group hover_
 
 ---
 
@@ -347,9 +423,30 @@ options: {
 </a>
 ```
 
+^ Hover, focus
+
 ---
 
-## __Responsive__
+```twig
+<a class="group">
+    <img
+        class="border-white group-hover:border-grey"
+        src="{{ speaker.photoUrl }}"
+    >
+
+    <div class="no-underline group-hover:underline">
+        {{ speaker.name }}
+    </div>
+</a>
+```
+
+^ Group hover
+
+---
+
+[.header: alignment(center)]
+
+# Responsive
 
 ---
 
@@ -360,14 +457,23 @@ options: {
 ---
 
 ```html
-<div class="block sm:inline-block md:flex lg:block">
+<div class="w-full md:w-1/2 lg:w-1/4">
     <p>Hello, World!</p>
 </div>
 ```
 
 ---
 
-## __Extracting <br>Components__
+[.header: alignment(center)]
+
+# Extracting <br>Components
+
+---
+
+[.header: alignment(center)]
+
+
+## _Do you need to_ extract <br>a component?
 
 ---
 
@@ -379,6 +485,29 @@ options: {
 {% endfor %}
 ```
 
+^ Use a loop
+
+---
+
+```twig
+<h2>Adults</h2>
+
+{% include 'class-list' with {
+    classes: page.classes,
+    type: 'adults',
+} %}
+
+<h2>Kids</h2>
+
+{% include 'class-list' with {
+    classes: page.classes,
+    type: 'kids',
+} %}
+```
+
+^ Move the duplicate markup into a partial, so there's only one version
+Pass data in.
+
 ---
 
 ```html
@@ -393,21 +522,6 @@ options: {
 
 ---
 
-```less
-// main.less
-
-.button {
-    .inline-block;
-    .rounded;
-    .text-sm;
-    .py-2;
-    .px-3;
-    .text-white;
-}
-```
-
----
-
 ```css
 # main.css
 
@@ -467,13 +581,17 @@ options: {
 
 ---
 
-## Advantages
+[.header: #53B0EB]
+
+# Advantages
 
 - Quick to prototype and make changes
 - Write less CSS
 - More consistency
 - Easy to customise, promote to components
 - Mix and match with normal CSS
+- Easy to write reusable plugins
+- Use PurgeCSS to remove unused classes
 
 ^ Do more with browser dev tools
 Only picking from pre-defined colours, widths. No magic numbers.
@@ -482,7 +600,9 @@ Same classes, but no visual similarities like with other frameworks like Bootstr
 
 ---
 
-## Disadvantages
+[.header: #53B0EB]
+
+# Disadvantages
 
 - Extra build tools and steps
 - Lots of classes in markup
@@ -490,19 +610,29 @@ Same classes, but no visual similarities like with other frameworks like Bootstr
 
 ^ - Need a build tool (Gulp, Grunt, Webpack) to build CSS
 
+---
+
+![inline](images/refactoring-ui.png)
 
 ---
 
-## For Drupal
-
-- Add a prefix to avoid clashing
-- Enable `important` setting to override existing styles
-- Add classes in templates where possible
-- Use `@apply` to limit the number of templates, to avoid adding classes in PHP code or config (e.g. Views), to style hard-to-reach elements
+![inline](images/laravel-nova.png)
 
 ---
 
-## Resources
+
+![inline](images/spatie.png)
+
+---
+
+![inline](images/php-south-wales.png)
+
+---
+
+[.build-lists: false]
+[.header: #53B0EB]
+
+# Resources
 
 - tailwindcss.com
 - tailwindcomponents.com
@@ -513,6 +643,9 @@ Same classes, but no visual similarities like with other frameworks like Bootstr
 
 ---
 
-## __Thank you__
+[.header: alignment(center)]
+
+# Thanks!
+### _@opdavies_
+### _oliverdavies.uk_
 
-### @opdavies

taking-flight-with-tailwind-css/abstract.md

@@ -1,10 +0,0 @@
-# Taking Flight with Tailwind CSS
-
-An introduction to utility class and component based styling, and how to soar with Tailwind CSS.
-
-Things we’ll cover:
-
-- Advantages and disadvantages to utility based styling and Tailwind.
-- How to install Tailwind and add it to your build process.
-- How to customise Tailwind.
-- How to promote repeating classes into re-usable components.-