Add 'Taking Flight with Tailwind CSS' slides
This commit is contained in:
parent
6cf5e862ad
commit
c78138b63d
65 changed files with 1208 additions and 0 deletions
62
taking-flight-with-tailwind-css/sections/components.rst
Normal file
62
taking-flight-with-tailwind-css/sections/components.rst
Normal file
|
|
@ -0,0 +1,62 @@
|
|||
|
||||
.. page:: titlePage
|
||||
|
||||
.. class:: centredtitle
|
||||
|
||||
How I deal with repetition?
|
||||
|
||||
.. page::
|
||||
|
||||
.. class:: centredtitle
|
||||
|
||||
Avoid repetition by extracting components
|
||||
|
||||
.. page::
|
||||
|
||||
.. class:: centredtitle
|
||||
|
||||
Does something justify becoming a component?
|
||||
|
||||
.. page::
|
||||
|
||||
.. class:: centredtitle
|
||||
|
||||
Could the duplication be moved elsewhere?
|
||||
|
||||
.. raw:: pdf
|
||||
|
||||
TextAnnotation "Twig partials, Vue components, WordPress template parts."
|
||||
|
||||
.. page:: standardPage
|
||||
|
||||
Loops
|
||||
=====
|
||||
|
||||
.. code-block:: twig
|
||||
:include: code/20-loops.txt
|
||||
:linenos:
|
||||
|
||||
Includes
|
||||
========
|
||||
|
||||
.. code-block:: twig
|
||||
:include: code/21-includes.txt
|
||||
:linenos:
|
||||
|
||||
.. raw:: pdf
|
||||
|
||||
TextAnnotation "Move the duplicate markup into a partial, so there's only one version. Pass data in."
|
||||
|
||||
Extracting CSS components
|
||||
=========================
|
||||
|
||||
.. code-block:: css
|
||||
:include: code/css-apply-before.txt
|
||||
:linenos:
|
||||
|
||||
Extracting CSS components
|
||||
=========================
|
||||
|
||||
.. code-block:: css
|
||||
:include: code/css-apply-after.txt
|
||||
:linenos:
|
||||
58
taking-flight-with-tailwind-css/sections/customising.rst
Normal file
58
taking-flight-with-tailwind-css/sections/customising.rst
Normal file
|
|
@ -0,0 +1,58 @@
|
|||
.. page:: titlePage
|
||||
|
||||
.. class:: centredtitle
|
||||
|
||||
Customising Tailwind
|
||||
|
||||
.. page::
|
||||
|
||||
.. class:: centredtitle
|
||||
|
||||
``npx tailwind init``
|
||||
|
||||
.. page:: standardPage
|
||||
|
||||
tailwind.config.js
|
||||
==================
|
||||
|
||||
.. code-block:: javascript
|
||||
:include: code/tailwind-basic-config.txt
|
||||
:linenos:
|
||||
|
||||
Overriding configuration
|
||||
========================
|
||||
|
||||
.. code-block:: javascript
|
||||
:include: code/override-colours.txt
|
||||
:hl_lines: 5 6 7
|
||||
:linenos:
|
||||
|
||||
.. raw:: pdf
|
||||
|
||||
TextAnnotation "Overrides all colours."
|
||||
|
||||
Extending configuration
|
||||
=======================
|
||||
|
||||
.. code-block:: javascript
|
||||
:include: code/extending-colours.txt
|
||||
:hl_lines: 5 6 7 8 9
|
||||
:linenos:
|
||||
|
||||
.. raw:: pdf
|
||||
|
||||
TextAnnotation "Extends Tailwind's default colours."
|
||||
|
||||
Additional options
|
||||
==================
|
||||
|
||||
.. code-block:: javascript
|
||||
:include: code/additional-config-options.txt
|
||||
:hl_lines: 2 3 4
|
||||
:linenos:
|
||||
|
||||
.. page:: titlePage
|
||||
|
||||
.. class:: centredtitle
|
||||
|
||||
``npx tailwind init --full``
|
||||
80
taking-flight-with-tailwind-css/sections/file-size.rst
Normal file
80
taking-flight-with-tailwind-css/sections/file-size.rst
Normal file
|
|
@ -0,0 +1,80 @@
|
|||
.. page:: titlePage
|
||||
|
||||
.. class:: centredtitle
|
||||
|
||||
Keeping Things Small: Controlling the File size
|
||||
|
||||
.. page:: titlePage
|
||||
|
||||
.. class:: centredtitle
|
||||
|
||||
Disabling unused variants and core plugins
|
||||
|
||||
.. page:: standardPage
|
||||
|
||||
Default variants
|
||||
================
|
||||
|
||||
.. code-block:: javascript
|
||||
:include: code/15-variants-before.txt
|
||||
:linenos:
|
||||
|
||||
Updated variants
|
||||
================
|
||||
|
||||
.. code-block:: diff
|
||||
:include: code/16-variants-after.txt
|
||||
|
||||
.. page:: titlePage
|
||||
|
||||
.. class:: centredtitle
|
||||
|
||||
Manually removing unused or unwanted classes
|
||||
|
||||
.. page:: standardPage
|
||||
|
||||
.. code-block:: javascript
|
||||
:include: code/17-config-before.txt
|
||||
|
||||
.. page::
|
||||
|
||||
.. code-block:: diff
|
||||
:include: code/18-config-after.txt
|
||||
|
||||
.. raw:: pdf
|
||||
|
||||
TextAnnotation "Needs to be done manually"
|
||||
|
||||
.. page:: titlePage
|
||||
|
||||
.. class:: centredtitle
|
||||
|
||||
Automatically removing unused classes
|
||||
|
||||
.. page::
|
||||
|
||||
.. class:: centredtitle
|
||||
|
||||
Tailwind + PurgeCSS
|
||||
|
||||
.. page:: standardPage
|
||||
|
||||
PurgeCSS configuration
|
||||
======================
|
||||
|
||||
.. code-block:: javascript
|
||||
:include: code/19-purge-config.txt
|
||||
:linenos:
|
||||
|
||||
.. page:: titlePage
|
||||
|
||||
.. class:: centredtitle
|
||||
|
||||
``npx encore dev``
|
||||
|
||||
.. page::
|
||||
|
||||
.. class:: centredtitle
|
||||
|
||||
``NODE_ENV=production
|
||||
npx encore prod``
|
||||
154
taking-flight-with-tailwind-css/sections/installation.rst
Normal file
154
taking-flight-with-tailwind-css/sections/installation.rst
Normal file
|
|
@ -0,0 +1,154 @@
|
|||
.. page:: titlePage
|
||||
|
||||
.. class:: centredtitle
|
||||
|
||||
How do I install Tailwind?
|
||||
|
||||
.. page::
|
||||
|
||||
.. class:: centredtitle
|
||||
|
||||
1\. Use the CDN
|
||||
|
||||
|
|
||||
|
||||
https://unpkg.com/tailwindcss/dist/tailwind.min.css
|
||||
|
||||
.. page:: titlePage
|
||||
|
||||
.. class:: centredtitle
|
||||
|
||||
To get the most out of Tailwind, you really should install it via npm
|
||||
|
||||
.. raw:: pdf
|
||||
|
||||
TextAnnotation "You can't customize Tailwind's default theme."
|
||||
TextAnnotation "You can't use any directives like @apply, @variants, etc.."
|
||||
TextAnnotation "You can't enable features like group-hover."
|
||||
TextAnnotation "You can't install third-party plugins."
|
||||
|
||||
.. page::
|
||||
|
||||
.. class:: centredtitle
|
||||
|
||||
2\. Installing Tailwind via NPM
|
||||
|
||||
.. page::
|
||||
|
||||
.. class:: centredtitle
|
||||
|
||||
``npm install --save-dev
|
||||
tailwindcss``
|
||||
|
||||
.. class:: centredtitle
|
||||
|
||||
``yarn add -D tailwindcss``
|
||||
|
||||
.. raw:: pdf
|
||||
|
||||
TextAnnotation "Adds it as a dependency to your package.json file"
|
||||
|
||||
.. page::
|
||||
|
||||
.. class:: centredtitle
|
||||
|
||||
Adding Tailwind to your CSS
|
||||
|
||||
.. page:: standardPage
|
||||
|
||||
Including Tailwind
|
||||
==================
|
||||
|
||||
.. code-block:: css
|
||||
:include: code/1-adding-tailwind-directives.txt
|
||||
:linenos:
|
||||
|
||||
Adding your own classes
|
||||
=======================
|
||||
|
||||
.. code-block:: css
|
||||
:include: code/2-adding-custom-classes.txt
|
||||
:linenos:
|
||||
|
||||
Adding your own classes (with layers)
|
||||
=====================================
|
||||
|
||||
.. code-block:: css
|
||||
:include: code/3-layers.txt
|
||||
:linenos:
|
||||
|
||||
.. raw:: pdf
|
||||
|
||||
TextAnnotation "Automatically places your code in the right position."
|
||||
TextAnnotation "Can be purged if needed."
|
||||
|
||||
.. page:: titlePage
|
||||
|
||||
.. class:: centredtitle
|
||||
|
||||
Processing your CSS with the build command
|
||||
|
||||
.. raw:: pdf
|
||||
|
||||
TextAnnotation "Compile the generated CSS Pass through PostCSS and Tailwind."
|
||||
|
||||
.. page:: titlePage
|
||||
|
||||
.. class:: centredtitle
|
||||
|
||||
``npx tailwind build
|
||||
src/css/tailwind.pcss
|
||||
-o dist/app.css``
|
||||
|
||||
.. page:: standardPage
|
||||
|
||||
.. code-block:: css
|
||||
:include: code/4-sample-output.txt
|
||||
:linenos:
|
||||
|
||||
.. raw:: pdf
|
||||
|
||||
TextAnnotation "Small, low-level, re-usable utility classes."
|
||||
|
||||
.. page:: titlePage
|
||||
|
||||
.. class:: centredtitle
|
||||
|
||||
Processing your CSS with Webpack Encore
|
||||
|
||||
.. page::
|
||||
|
||||
.. class:: centredtitle
|
||||
|
||||
``npm install --save-dev
|
||||
@symfony/webpack-encore``
|
||||
|
||||
.. page:: standardPage
|
||||
|
||||
webpack.config.js
|
||||
=================
|
||||
|
||||
.. code-block:: javascript
|
||||
:include: code/5-webpack-config.txt
|
||||
|
||||
.. raw:: pdf
|
||||
|
||||
TextAnnotation "PostCSS - useful if you're including other PostCSS plugins like PostCSS Nested"
|
||||
|
||||
postcss.config.js
|
||||
=================
|
||||
|
||||
.. code-block:: javascript
|
||||
:include: code/6-postcss-config.txt
|
||||
|
||||
Running Webpack
|
||||
===============
|
||||
|
||||
.. code-block::
|
||||
:include: code/7-webpack-output.txt
|
||||
|
||||
Adding Tailwind to HTML
|
||||
=======================
|
||||
|
||||
.. code-block:: html
|
||||
:include: code/8-html.txt
|
||||
|
|
@ -0,0 +1,57 @@
|
|||
.. page:: titlePage
|
||||
|
||||
.. class:: centredtitle
|
||||
|
||||
Interaction states
|
||||
|
||||
hover, focus, active, disabled, visited,
|
||||
group-hover, focus-within,
|
||||
first-child, last-child...
|
||||
|
||||
.. page::
|
||||
|
||||
.. class:: centredtitle
|
||||
|
||||
``[state][separator][class]``
|
||||
|
||||
.. raw:: pdf
|
||||
|
||||
TextAnnotation "State = hover, focus, group focus, focus within."
|
||||
TextAnnotation "Separator = configurable"
|
||||
TextAnnotation "Colon by default"
|
||||
TextAnnotation "Class = the same utility class that you would have used normally"
|
||||
|
||||
.. page::
|
||||
|
||||
.. class:: centredtitle
|
||||
|
||||
``hover:text-red-500``
|
||||
|
||||
|
|
||||
|
||||
.. class:: centredtitle
|
||||
|
||||
``focus:text-red-500``
|
||||
|
||||
.. page:: standardPage
|
||||
|
||||
Interaction states in CSS
|
||||
=========================
|
||||
|
||||
.. code-block:: css
|
||||
:include: code/9-hover-classes.txt
|
||||
:linenos:
|
||||
|
||||
Interaction states in HTML
|
||||
==========================
|
||||
|
||||
.. code-block:: html
|
||||
:include: code/10-hover-class-example.txt
|
||||
:linenos:
|
||||
|
||||
Default variants
|
||||
================
|
||||
|
||||
.. code-block:: javascript
|
||||
:include: code/11-default-variants.txt
|
||||
:linenos:
|
||||
92
taking-flight-with-tailwind-css/sections/intro.rst
Normal file
92
taking-flight-with-tailwind-css/sections/intro.rst
Normal file
|
|
@ -0,0 +1,92 @@
|
|||
.. page:: titlePage
|
||||
|
||||
.. class:: centredtitle
|
||||
|
||||
What is Tailwind CSS?
|
||||
|
||||
.. page::
|
||||
|
||||
.. class:: centredtitle
|
||||
|
||||
A utility-first CSS framework for rapidly building custom designs
|
||||
|
||||
.. raw:: pdf
|
||||
|
||||
TextAnnotation "CSS utility class generator."
|
||||
TextAnnotation "PostCSS plugin."
|
||||
TextAnnotation "Make different looking sites using the same class names."
|
||||
TextAnnotation "No 'Tailwind looking site' like there is with Bootstrap."
|
||||
|
||||
.. page::
|
||||
|
||||
.. class:: centredtitle
|
||||
|
||||
Tailwind CSS is a highly customizable, low-level CSS framework
|
||||
|
||||
.. raw:: pdf
|
||||
|
||||
TextAnnotation "No components like Bootstrap or Bulma."
|
||||
TextAnnotation "Configure it per project."
|
||||
TextAnnotation "Extendable if needed via additional plugins."
|
||||
TextAnnotation "Avoids the need to name things prematurely."
|
||||
TextAnnotation "Can extract components if needed (reusability)."
|
||||
|
||||
.. page::
|
||||
|
||||
.. class:: centredtitle
|
||||
|
||||
Tailwind is more than a CSS framework, it's an engine for creating design systems
|
||||
|
||||
.. raw:: pdf
|
||||
|
||||
TextAnnotation "Good default values provided - colours, fonts, padding, widths"
|
||||
TextAnnotation "Designing with constraints."
|
||||
TextAnnotation "Using inline styles, every value is a magic number."
|
||||
TextAnnotation "With utilities, you're choosing styles from a predefined design system, which makes it much easier to build visually consistent UIs."
|
||||
|
||||
.. page:: standardPage
|
||||
|
||||
- Text/border/background colours
|
||||
- Font size/family/weight
|
||||
- Alignment
|
||||
- Padding/margin/negative margin
|
||||
- Flexbox
|
||||
- Positioning
|
||||
- Lists
|
||||
- z-index
|
||||
- Opacity
|
||||
|
||||
.. raw:: pdf
|
||||
|
||||
TextAnnotation "Some of the 'original' things that Tailwind would generate classes for."
|
||||
|
||||
.. page::
|
||||
|
||||
- Screenreader visibility
|
||||
- Placeholder colour
|
||||
- first-child, last-child, nth-child
|
||||
- CSS Grid
|
||||
- Transition
|
||||
- Transform
|
||||
- Spacing / Divide
|
||||
- Focus ring
|
||||
- Text clamping
|
||||
|
||||
.. raw:: pdf
|
||||
|
||||
TextAnnotation "All generated from a single, customisable configuration file."
|
||||
|
||||
.. page:: imagePage
|
||||
|
||||
.. image:: images/screenshot-laravel-nova.png
|
||||
:width: 23cm
|
||||
|
||||
.. page::
|
||||
|
||||
.. image:: images/screenshot-send-firefox.png
|
||||
:width: 23cm
|
||||
|
||||
.. page::
|
||||
|
||||
.. image:: images/screenshot-rebuilding-bartik.png
|
||||
:width: 23cm
|
||||
35
taking-flight-with-tailwind-css/sections/plugins.rst
Normal file
35
taking-flight-with-tailwind-css/sections/plugins.rst
Normal file
|
|
@ -0,0 +1,35 @@
|
|||
.. page:: titlePage
|
||||
|
||||
.. class:: centredtitle
|
||||
|
||||
Extending Tailwind CSS with Plugins
|
||||
|
||||
.. page::
|
||||
|
||||
.. class:: centredtitle
|
||||
|
||||
``npm install --save-dev
|
||||
tailwindcss-list-reset``
|
||||
|
||||
.. page:: standardPage
|
||||
|
||||
Adding a plugin
|
||||
===============
|
||||
|
||||
.. code-block:: javascript
|
||||
:include: code/plugins-add-plugin.txt
|
||||
:linenos:
|
||||
|
||||
Generated CSS
|
||||
=============
|
||||
|
||||
.. code-block:: css
|
||||
:include: code/plugins-generated-css.txt
|
||||
:linenos:
|
||||
|
||||
Writing a plugin
|
||||
================
|
||||
|
||||
.. code-block:: javascript
|
||||
:include: code/plugins-plugin-source.txt
|
||||
:linenos:
|
||||
50
taking-flight-with-tailwind-css/sections/responsive.rst
Normal file
50
taking-flight-with-tailwind-css/sections/responsive.rst
Normal file
|
|
@ -0,0 +1,50 @@
|
|||
.. page:: titlePage
|
||||
|
||||
.. class:: centredtitle
|
||||
|
||||
Responsive
|
||||
|
||||
.. raw:: pdf
|
||||
|
||||
TextAnnotation "Mobile first by default"
|
||||
|
||||
.. page::
|
||||
|
||||
.. class:: centredtitle
|
||||
|
||||
``[screen][separator][class]``
|
||||
|
||||
.. page:: standardPage
|
||||
|
||||
Screens (aka breakpoints)
|
||||
=========================
|
||||
|
||||
.. code-block:: javascript
|
||||
:include: code/12-default-screens.txt
|
||||
:linenos:
|
||||
|
||||
.. page:: titlePage
|
||||
|
||||
.. class:: centredtitle
|
||||
|
||||
``md:flex``
|
||||
|
||||
|
|
||||
|
||||
.. class:: centredtitle
|
||||
|
||||
``md:hover:bg-red-500``
|
||||
|
||||
.. page:: standardPage
|
||||
|
||||
Responsive classes in CSS
|
||||
=========================
|
||||
|
||||
.. code-block:: css
|
||||
:include: code/13-responsive-classes.txt
|
||||
|
||||
Responsive classes in HTML
|
||||
==========================
|
||||
|
||||
.. code-block:: html
|
||||
:include: code/14-responsive-class-example.txt
|
||||
108
taking-flight-with-tailwind-css/sections/usage.rst
Normal file
108
taking-flight-with-tailwind-css/sections/usage.rst
Normal file
|
|
@ -0,0 +1,108 @@
|
|||
.. page:: titlePage
|
||||
|
||||
.. class:: centredtitle
|
||||
|
||||
How do I use Tailwind?
|
||||
|
||||
.. page::
|
||||
|
||||
.. class:: centredtitle
|
||||
|
||||
Style elements by applying pre-existing classes directly in your HTML
|
||||
|
||||
.. page::
|
||||
|
||||
.. class:: centredtitle
|
||||
|
||||
Using utility classes to build custom designs without writing CSS
|
||||
|
||||
.. page:: standardPage
|
||||
|
||||
Benefits
|
||||
========
|
||||
|
||||
- You aren't wasting time and energy inventing class names
|
||||
- Your CSS stops growing
|
||||
- Making changes feels safer
|
||||
|
||||
.. raw:: pdf
|
||||
|
||||
TextAnnotation "No more adding silly class names like sidebar-inner-wrapper just to be able to style something, and no more agonizing over the perfect abstract name for something that's really just a flex container."
|
||||
TextAnnotation "Using a traditional approach, your CSS files get bigger every time you add a new feature. With utilities, everything is reusable so you rarely need to write new CSS."
|
||||
TextAnnotation "CSS is global and you never know what you're breaking when you make a change."
|
||||
TextAnnotation "Classes in your HTML are local, so you can change them without worrying about something else breaking."
|
||||
|
||||
.. page:: imagePage
|
||||
|
||||
.. image:: images/example/0.png
|
||||
:width: 18cm
|
||||
|
||||
.. page::
|
||||
|
||||
.. image:: images/example/1.png
|
||||
:width: 18cm
|
||||
|
||||
.. page::
|
||||
|
||||
.. image:: images/example/2.png
|
||||
:width: 18cm
|
||||
|
||||
.. page::
|
||||
|
||||
.. image:: images/example/3.png
|
||||
:width: 18cm
|
||||
|
||||
.. page::
|
||||
|
||||
.. image:: images/example/4.png
|
||||
:width: 18cm
|
||||
|
||||
.. page::
|
||||
|
||||
.. image:: images/example/5.png
|
||||
:width: 18cm
|
||||
|
||||
.. page::
|
||||
|
||||
.. image:: images/example/6.png
|
||||
:width: 18cm
|
||||
|
||||
.. page::
|
||||
|
||||
.. image:: images/example/7.png
|
||||
:width: 18cm
|
||||
|
||||
.. page::
|
||||
|
||||
.. image:: images/example/8.png
|
||||
:width: 18cm
|
||||
|
||||
.. page::
|
||||
|
||||
.. image:: images/example/9.png
|
||||
:width: 18cm
|
||||
|
||||
.. page::
|
||||
|
||||
.. image:: images/example/10.png
|
||||
:width: 18cm
|
||||
|
||||
.. page::
|
||||
|
||||
.. image:: images/example/11.png
|
||||
:width: 18cm
|
||||
|
||||
.. page::
|
||||
|
||||
.. image:: images/example/12.png
|
||||
:width: 18cm
|
||||
|
||||
.. page::
|
||||
|
||||
.. image:: images/example/13.png
|
||||
:width: 18cm
|
||||
|
||||
.. page::
|
||||
|
||||
.. image:: images/example/14.png
|
||||
:width: 18cm
|
||||
Loading…
Add table
Add a link
Reference in a new issue