Add Tailwind workshop slides

workshop-tailwind-css/sections/intro.rst

@@ -0,0 +1,113 @@
+.. page:: standardPage
+
+Prerequisites
+-------------
+
+* Git
+* PHP
+* Composer
+* npm/yarn
+
+Before we start
+---------------
+
+.. code-block::
+    :include: code/task-1-before.txt
+
+.. page:: imagePage
+
+.. image:: images/1-start.png
+    :width: 22cm
+
+.. 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 customisable, 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: 22cm
+
+.. page::
+
+.. image:: images/screenshot-send-firefox.png
+    :width: 22cm
+
+.. page::
+
+.. image:: images/screenshot-rebuilding-bartik.png
+    :width: 22cm

workshop-tailwind-css/sections/task-1-add-tailwind-css.rst

@@ -0,0 +1,44 @@
+.. page:: titlePage
+
+.. class:: centredtitle
+
+Task 1: Adding Tailwind CSS
+
+.. page:: standardPage
+
+.. code-block:: bash
+    :include: code/adding-tailwind.txt
+    :end-before: -- adding tailwind
+
+.. page::
+
+Create the source file:
+
+|
+
+.. code-block:: css
+    :include: code/adding-tailwind.txt
+    :start-after: -- adding tailwind
+    :end-before: -- adding scripts
+
+.. page::
+
+Add to ``package.json``:
+
+.. code-block:: js
+    :include: code/adding-tailwind.txt
+    :start-after: -- adding scripts
+    :end-before: -- adding the stylesheet
+
+|
+
+Add to ``templates/html.html.twig``:
+
+.. code-block:: html
+    :include: code/adding-tailwind.txt
+    :start-after: -- adding the stylesheet
+
+.. page:: imagePage
+
+.. image:: images/1-end.png
+    :width: 22cm

workshop-tailwind-css/sections/task-2-intro-text.rst

@@ -0,0 +1,54 @@
+.. page:: titlePage
+
+.. class:: centredtitle
+
+Task 2: Add text styling
+
+.. page:: standardPage
+
+Before we start
+---------------
+
+.. code-block::
+    :include: code/task-2-before.txt
+
+.. page::
+
+Adding intro text
+-----------------
+
+.. code-block:: html
+    :include: code/intro-text-1.txt
+
+.. page:: imagePage
+
+.. image:: images/intro-text-1.png
+    :width: 22cm
+
+.. page:: standardPage
+
+.. code-block:: html
+    :include: code/intro-text-2.txt
+    :hl_lines: 3
+
+.. page:: imagePage
+
+.. image:: images/intro-text-2.png
+    :width: 22cm
+
+.. page:: standardPage
+
+.. code-block:: html
+    :include: code/intro-text-3.txt
+    :hl_lines: 4 8
+
+.. page::
+
+.. code-block:: html
+    :include: code/intro-text-4.txt
+    :hl_lines: 10 13 
+
+.. page:: imagePage
+
+.. image:: images/intro-text-4.png
+    :width: 22cm

workshop-tailwind-css/sections/task-3-navbar.rst

@@ -0,0 +1,45 @@
+.. page:: titlePage
+
+.. class:: centredtitle
+
+Task 3: Add a navbar component
+
+.. page:: standardPage
+
+Before we start
+---------------
+
+.. code-block::
+    :include: code/task-3-before.txt
+
+.. page:: standardPage
+
+.. code-block:: html
+    :include: code/navbar-1.txt
+
+.. page:: imagePage
+
+.. image:: images/navbar-1.png
+    :width: 22cm
+
+.. page:: standardPage
+
+.. code-block:: html
+    :include: code/navbar-2.txt
+    :hl_lines: 3 4
+
+.. page:: imagePage
+
+.. image:: images/navbar-2.png
+    :width: 22cm
+
+.. page:: standardPage
+
+.. code-block:: html
+    :include: code/navbar-3.txt
+    :hl_lines: 11 12 13 14 15 16 17 18
+
+.. page:: imagePage
+
+.. image:: images/navbar-3.png
+    :width: 22cm

workshop-tailwind-css/sections/task-4-config.rst

@@ -0,0 +1,47 @@
+.. page:: titlePage
+
+.. class:: centredtitle
+
+Task 4: Change the default configuration
+
+.. page:: standardPage
+
+Before we start
+---------------
+
+.. code-block::
+    :include: code/task-4-before.txt
+
+.. page::
+
+tailwind.config.js
+------------------
+
+.. code-block:: js
+    :include: code/config-1.txt
+    :linenos:
+
+Adding the Bebas font
+---------------------
+
+.. code-block:: html
+    :include: code/config-2.txt
+    :hl_lines: 5 6
+
+Updating existing classes
+-------------------------
+
+.. code-block:: diff
+    :include: code/config-3.txt
+
+
+Updating existing classes
+-------------------------
+
+.. code-block:: diff
+    :include: code/config-4.txt
+
+.. page:: imagePage
+
+.. image:: images/after-config.png
+    :width: 22cm

workshop-tailwind-css/sections/task-5-loops.rst

@@ -0,0 +1,25 @@
+.. page:: titlePage
+
+.. class:: centredtitle
+
+Task 5: Refactor - avoid duplication using loops
+
+.. page:: standardPage
+
+Before we start
+---------------
+
+.. code-block::
+    :include: code/task-5-before.txt
+
+Using a loop
+------------
+
+.. code-block:: html 
+    :include: code/loops-1.txt
+
+Using a loop
+------------
+
+.. code-block:: twig 
+    :include: code/loops-2.txt

workshop-tailwind-css/sections/task-6-video.rst

@@ -0,0 +1,80 @@
+.. page:: titlePage
+
+.. class:: centredtitle
+
+Task 6: Add the video component
+
+.. page:: standardPage
+
+Before we start
+---------------
+
+.. code-block::
+    :include: code/task-6-before.txt
+
+.. page::
+
+.. code-block:: html
+    :include: code/video-1.txt
+
+.. page:: imagePage
+
+.. image:: images/video-1.png
+    :width: 22cm
+
+.. page:: standardPage
+
+.. code-block:: diff
+    :include: code/video-2.txt
+
+.. page:: imagePage
+
+.. image:: images/video-2.png
+    :width: 22cm
+
+.. page:: standardPage
+
+Adding the logo
+---------------
+
+.. code-block:: html 
+    :include: code/video-3.txt
+    :hl_lines: 13 14
+
+.. page:: imagePage
+
+.. image:: images/video-3.png
+    :width: 22cm
+
+.. page:: standardPage
+
+Positioning the logo
+--------------------
+
+.. code-block:: diff
+    :include: code/video-4.txt
+
+.. page:: imagePage
+
+.. image:: images/video-4.png
+    :width: 22cm
+
+.. page:: standardPage
+
+Adding stars
+------------
+
+.. code-block:: html
+    :include: code/video-5.txt
+    :hl_lines: 6 7 8
+
+Positioning the stars
+---------------------
+
+.. code-block:: diff
+    :include: code/video-6.txt
+
+.. page:: imagePage
+
+.. image:: images/video-6.png
+    :width: 22cm

workshop-tailwind-css/sections/task-7-sponsors.rst

@@ -0,0 +1,40 @@
+.. page:: titlePage
+
+.. class:: centredtitle
+
+Task 7: Add the sponsors component
+
+.. page:: standardPage
+
+.. code-block::
+    :include: code/task-7-before.txt
+
+.. page::
+
+.. code-block:: twig
+    :include: code/sponsors-1.txt
+
+.. page::
+
+.. code-block:: twig
+    :include: code/sponsors-2.txt
+
+.. page:: imagePage
+
+.. image:: images/sponsors-1.png
+    :width: 22cm
+
+.. page:: standardPage
+
+.. code-block:: twig 
+    :include: code/sponsors-3.txt
+
+.. page::
+
+.. code-block:: html 
+    :include: code/sponsors-4.txt
+
+.. page:: imagePage
+
+.. image:: images/sponsors-2.png
+    :width: 22cm

workshop-tailwind-css/sections/task-8-responsive.rst

@@ -0,0 +1,28 @@
+.. page:: titlePage
+
+.. class:: centredtitle
+
+Task 8: Make it responsive
+
+.. page:: standardPage
+
+Before we start
+---------------
+
+.. code-block::
+    :include: code/task-8-before.txt
+
+.. page::
+
+.. code-block:: diff
+    :include: code/responsive-1.txt
+
+.. page::
+
+.. code-block:: diff
+    :include: code/responsive-2.txt
+
+.. page::
+
+.. code-block:: diff
+    :include: code/responsive-3.txt

workshop-tailwind-css/sections/task-9-purgecss.rst

@@ -0,0 +1,28 @@
+.. page:: titlePage
+
+.. class:: centredtitle
+
+Task 9: Configure PurgeCSS
+
+.. page:: standardPage
+
+.. code-block::
+    :include: code/yarn-output-before-purge.txt
+    :end-before: # yarn prod
+
+.. page::
+
+.. code-block::
+    :include: code/yarn-output-before-purge.txt
+    :start-at: # yarn prod
+
+Configuring PurgeCSS
+--------------------
+
+.. code-block:: diff 
+    :include: code/configuring-purgecss.txt
+
+.. page::
+
+.. code-block::
+    :include: code/yarn-output-after-purge.txt