Oliver Davies
4de38d0276
Replace instances of `.. page::` with:
```rst
.. raw:: pdf
PageBreak
```
This reduces my usage on the `preprocess` functionality I'd like to
remove.
This was done by executing this command:
```
find src -type f -name '*.rst' \
-exec sed -Ei 's/.. page::$/.. raw:: pdf\n\n PageBreak/g' {} \;
```
125 lines
2.4 KiB
ReStructuredText
125 lines
2.4 KiB
ReStructuredText
.. 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?
|
|
|
|
.. raw:: pdf
|
|
|
|
PageBreak
|
|
|
|
.. 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."
|
|
|
|
.. raw:: pdf
|
|
|
|
PageBreak
|
|
|
|
.. 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)."
|
|
|
|
.. raw:: pdf
|
|
|
|
PageBreak
|
|
|
|
.. 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."
|
|
|
|
.. raw:: pdf
|
|
|
|
PageBreak
|
|
|
|
- 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
|
|
|
|
.. raw:: pdf
|
|
|
|
PageBreak
|
|
|
|
.. image:: images/screenshot-send-firefox.png
|
|
:width: 22cm
|
|
|
|
.. raw:: pdf
|
|
|
|
PageBreak
|
|
|
|
.. image:: images/screenshot-rebuilding-bartik.png
|
|
:width: 22cm
|