Add 'Taking Flight with Tailwind CSS' slides

taking-flight-with-tailwind-css/sections/intro.rst

@@ -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