diff --git a/taking-flight-with-tailwind-css/2018-01-17-drupal-bristol/1.png b/taking-flight-with-tailwind-css/2018-01-17-drupal-bristol/1.png new file mode 100644 index 0000000..d371250 Binary files /dev/null and b/taking-flight-with-tailwind-css/2018-01-17-drupal-bristol/1.png differ diff --git a/taking-flight-with-tailwind-css/2018-01-17-drupal-bristol/images/1.png b/taking-flight-with-tailwind-css/2018-01-17-drupal-bristol/images/1.png new file mode 100644 index 0000000..afbb8ca Binary files /dev/null and b/taking-flight-with-tailwind-css/2018-01-17-drupal-bristol/images/1.png differ diff --git a/taking-flight-with-tailwind-css/2018-01-17-drupal-bristol/slides.md b/taking-flight-with-tailwind-css/2018-01-17-drupal-bristol/slides.md new file mode 100644 index 0000000..9b45f2f --- /dev/null +++ b/taking-flight-with-tailwind-css/2018-01-17-drupal-bristol/slides.md @@ -0,0 +1,518 @@ +autoscale: true +build-lists: true +theme: Fira, 1 + +[.hide-footer] + +# [fit] _**Taking Flight with**
Tailwind CSS_ + +--- + +[.build-lists: false] + +- Full Stack Web Developer +- Acquia certified Drupal specialist +- @opdavies +- oliverdavies.uk + +--- + +> A Utility-First CSS Framework for Rapid UI Development + +^ What is Tailwind? + +--- + +[.build-lists: false] + +- Utility CSS class generator +- PostCSS +- Configurable +- Some preprocessor features +- Can be used in addition to preprocessors +- Open source + +^ Works with plain CSS or any preprocessor +Can be configured to enable/disable modules, configure colours etc. +Can use features like variables if using plain CSS. + +--- + +```css +.title { + background-color: #3490DC; + color: #FFF; + display: block; + font-size: 1.5rem; + padding: 2rem; +} +``` + +--- + +```css +.text-2xl { + font-size: 1.5rem; +} + +.bg-blue { + background-color: #3490DC; +} + +.text-white { + color: #FFF; +} +``` + +--- + +```html +
+

Hello, Drupal Bristol!

+
+``` + +--- + +![fit](images/1.png) + +--- + +## __Installation__ + +--- + +## Option 1 + +``` +https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css +``` + +--- + +## Option 2 + +```bash +yarn add postcss tailwindcss --save + +yarn run tailwind init +``` + +^ Install with npm or Yarn +Run "tailwind init" to generate a default tailwind.js file + +--- + +```js +// tailwind.js + +var colors = { + 'transparent': 'transparent', + + 'black': '#222b2f', + 'grey-darkest': '#364349', + 'grey-darker': '#596a73', + 'grey-dark': '#70818a', + 'grey': '#9babb4', + 'grey-light': '#dae4e9', + 'grey-lighter': '#f2f2f2', + 'grey-lightest': '#fafcfc', + 'white': '#ffffff', + ... +``` + +--- + +```js +// postcss.config.js + +module.exports = { + plugins: [ + require('tailwindcss')('./tailwind.js'), + require('autoprefixer'), + ] +} +``` + +--- + +```less +// main.less + +@tailwind preflight; + +// Any custom styles. + +@tailwind utilities; +``` + +--- + +```js +// webpack.config.js + +Encore + ... + .enableLessLoader() + .addStyleEntry('site', './less/main.less') + .enablePostCssLoader(function(options) { + options.config = { + path: 'postcss.config.js' + }; + }) + ... +; +``` + +^ Using Webpack Encore + +--- + +```html + + Hello, World! + +... +``` + +--- + +``` +.text-left { + text-align: left; +} + +.text-center { + text-align: center; +} + +.text-right { + text-align: right; +} + +.text-justify { + text-align: justify; +} +``` + +--- + +```html +
+ Hello, world! +
+``` + +--- + +## __Configuration__ + +--- + +```javascript +// tailwind.js + +var colors = { + ... + + 'blue-darkest': '#05233b', + 'blue-darker': '#103d60', + 'blue-dark': '#2779bd', + 'blue': '#0678be', + 'blue-light': '#6cb2eb', + 'blue-lighter': '#bcdefa', + 'blue-lightest': '#eff8ff', + + ... +} +``` + +^ Add, change, remove values as needed + +--- + +```js +screens: { + 'sm': '576px', + 'md': '768px', + 'lg': '992px', + 'xl': '1200px', +} +``` + +--- + +```js +textSizes: { + 'xs': '.75rem', // 12px + 'sm': '.875rem', // 14px + 'base': '1rem', // 16px + 'lg': '1.125rem', // 18px + 'xl': '1.25rem', // 20px + '2xl': '1.5rem', // 24px + '3xl': '1.875rem', // 30px + '4xl': '2.25rem', // 36px + '5xl': '3rem', // 48px +} +``` + +--- + +```js +width: { + 'auto': 'auto', + 'px': '1px', + '1': '0.25rem', + '2': '0.5rem', + '3': '0.75rem', + '4': '1rem', + '6': '1.5rem', + '8': '2rem', + '10': '2.5rem', + '12': '3rem', + '16': '4rem', + '24': '6rem', + ... +} +``` + +--- + +```js +padding: { + 'px': '1px', + '0': '0', + '1': '0.25rem', + '2': '0.5rem', + '3': '0.75rem', + '4': '1rem', + '5': '1.25rem', + '6': '1.5rem', + '8': '2rem', + '16': '4rem', +} +``` + +--- + +```javascript +options: { + prefix: '', + important: false, + separator: ':', +} +``` + +^ - Drupal important config +- By adding a prefix, we don't clash with Drupal's core styles - e.g. ".block" + +--- + +[.build-lists: false] + +- Colours (text and background) +- Font family, size, weight +- Leading (line height), tracking (letter spacing) +- Border widths, colours, radius +- Width, height, min/max width/height + +--- + +[.build-lists: false] + +- Padding, margin (positive and negative) +- Shadows +- Z-index +- Opacity +- SVG fill, stroke +- Screen sizes (breakpoints) + +--- + +## __States__ + +### Hover, Focus, Active + +--- + +```css +.{state}{separator}{class} +``` + +--- + +```twig + + Home + +``` + +--- + +## __Responsive__ + +--- + +```less +.{screen}{separator}{class} +``` + +--- + +```html +
+

Hello, World!

+
+``` + +--- + +## __Extracting
Components__ + +--- + +```twig +{% for item in items %} + + {{ item.title }} + +{% endfor %} +``` + +--- + +```html + + Click me! + + + + Click me too! + +``` + +--- + +```less +// main.less + +.button { + .inline-block; + .rounded; + .text-sm; + .py-2; + .px-3; + .text-white; +} +``` + +--- + +```css +# main.css + +.button { + @apply .inline-block; + @apply .rounded; + @apply .text-sm; + @apply .py-2; + @apply .px-3; + @apply .text-white; +} +``` + +--- + +```html + + Click me! + + + + Click me too! + +``` + +--- + +```less +// table.less + +.table-responsive { + @apply .mb-4 .border .w-full; + overflow-x: auto; + overflow-y: hidden; +} + +.table-responsive table { + @apply .mb-0 .border-0 .whitespace-no-wrap; +} + +.table { + @apply .w-full .table-collapse; +} + +.table tr:nth-child(odd) { + @apply .bg-grey-lightest; +} + +.table tr th { + @apply .text-left .p-3 .bg-white; +} + +.table td { + @apply .px-3 .py-3 .border-t; +} +``` + +--- + +## Advantages + +- Quick to prototype and make changes +- Write less CSS +- More consistency +- Easy to customise, promote to components +- Mix and match with normal CSS + +^ Do more with browser dev tools +Only picking from pre-defined colours, widths. No magic numbers. +Less ramp-up time as using the same framework on different sites. +Same classes, but no visual similarities like with other frameworks like Bootstrap + +--- + +## Disadvantages + +- Extra build tools and steps +- Lots of classes in markup +- Large file size by default + +^ - Need a build tool (Gulp, Grunt, Webpack) to build CSS + + +--- + +## 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 + +--- + +## Resources + +- tailwindcss.com +- tailwindcomponents.com +- github.com/merchedhq/awesome-tailwindcss +- youtube.com/adamwathan +- github.com/opdavies/oliverdavies.uk +- github.com/phpsw/phpsw-ng + +--- + +## __Thank you__ + +### @opdavies diff --git a/taking-flight-with-tailwind-css/2018-01-17-drupal-bristol/slides.pdf b/taking-flight-with-tailwind-css/2018-01-17-drupal-bristol/slides.pdf new file mode 100644 index 0000000..404deb0 Binary files /dev/null and b/taking-flight-with-tailwind-css/2018-01-17-drupal-bristol/slides.pdf differ diff --git a/taking-flight-with-tailwind-css/abstract.md b/taking-flight-with-tailwind-css/abstract.md new file mode 100644 index 0000000..d0b6df6 --- /dev/null +++ b/taking-flight-with-tailwind-css/abstract.md @@ -0,0 +1,10 @@ +# 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.-