diff --git a/workshop-tailwind-css/.gitignore b/workshop-tailwind-css/.gitignore new file mode 100644 index 0000000..1a79f1f --- /dev/null +++ b/workshop-tailwind-css/.gitignore @@ -0,0 +1,2 @@ +!/.gitignore +!/FLDC 2021 Presenter Slides.pdf diff --git a/workshop-tailwind-css/FLDC 2021 Presenter Slides.pdf b/workshop-tailwind-css/FLDC 2021 Presenter Slides.pdf new file mode 100644 index 0000000..a3404f3 Binary files /dev/null and b/workshop-tailwind-css/FLDC 2021 Presenter Slides.pdf differ diff --git a/workshop-tailwind-css/code/adding-tailwind.txt b/workshop-tailwind-css/code/adding-tailwind.txt new file mode 100644 index 0000000..430ab18 --- /dev/null +++ b/workshop-tailwind-css/code/adding-tailwind.txt @@ -0,0 +1,25 @@ +# Add Tailwind, PostCSS, Autoprefixer, PostCSS CLI +yarn add cross-env \ + tailwindcss@latest \ + postcss@latest \ + autoprefixer@latest \ + postcss-cli + +# Generate Tailwind and PostCSS configuration files +npx tailwindcss init -p + +-- adding tailwind +/* assets/css/tailwind.pcss */ +@tailwind base; +@tailwind components; +@tailwind utilities; + +-- adding scripts +"scripts": { + "dev": "cross-env NODE_ENV=development postcss assets/css/tailwind.pcss -o public/build/tailwind.css", + "prod": "cross-env NODE_ENV=production postcss assets/css/tailwind.pcss -o public/build/tailwind.css", + "watch": "cross-env NODE_ENV=development postcss assets/css/tailwind.pcss -o public/build/tailwind.css --watch" +} + +-- adding the stylesheet + diff --git a/workshop-tailwind-css/code/config-1.txt b/workshop-tailwind-css/code/config-1.txt new file mode 100644 index 0000000..b0e3e64 --- /dev/null +++ b/workshop-tailwind-css/code/config-1.txt @@ -0,0 +1,27 @@ +module.exports = { + // ... + + theme: { + fontFamily: { + display: ['Bebas Neue', 'Arial Narrow', 'Arial', 'sans-serif'], + sans: ['Helvetica', 'Arial', 'sans-serif'], + }, + colors: { + blue: { + DEFAULT: '#56a9db', + dark: '#1772ae', + }, + gray: { + dark: '#333333', + }, + orange: '#fcb040', + white: '#ffffff', + }, + extend: { + fontSize: { + '2xl': '1.5625rem', // 25px + '3xl': '1.6875rem', // 27px + }, + }, + }, +} \ No newline at end of file diff --git a/workshop-tailwind-css/code/config-2.txt b/workshop-tailwind-css/code/config-2.txt new file mode 100644 index 0000000..065b241 --- /dev/null +++ b/workshop-tailwind-css/code/config-2.txt @@ -0,0 +1,8 @@ +{# templates/html.html.twig #} + +{% block title %}Tailwind CSS workshop{% endblock %} + + + + +{% block stylesheets %}{% endblock %} diff --git a/workshop-tailwind-css/code/config-3.txt b/workshop-tailwind-css/code/config-3.txt new file mode 100644 index 0000000..1fcc99c --- /dev/null +++ b/workshop-tailwind-css/code/config-3.txt @@ -0,0 +1,13 @@ +-
++
+ +-

++

+ +- \ No newline at end of file diff --git a/workshop-tailwind-css/code/config-4.txt b/workshop-tailwind-css/code/config-4.txt new file mode 100644 index 0000000..c9d9553 --- /dev/null +++ b/workshop-tailwind-css/code/config-4.txt @@ -0,0 +1,7 @@ +{# templates/includes/navbar.html.twig #} + +- + +

+

Florida DrupalCamp is an annual conference that brings + together web developers from all over the world to learn, + network and discuss web development and the Drupal content + management system.

+ + Learn more +
diff --git a/workshop-tailwind-css/code/intro-text-2.txt b/workshop-tailwind-css/code/intro-text-2.txt new file mode 100644 index 0000000..7f614af --- /dev/null +++ b/workshop-tailwind-css/code/intro-text-2.txt @@ -0,0 +1,10 @@ + + +
+

Florida DrupalCamp is an annual conference that brings + together web developers from all over the world to learn, + network and discuss web development and the Drupal content + management system.

+ + Learn more +
diff --git a/workshop-tailwind-css/code/intro-text-3.txt b/workshop-tailwind-css/code/intro-text-3.txt new file mode 100644 index 0000000..4ad6676 --- /dev/null +++ b/workshop-tailwind-css/code/intro-text-3.txt @@ -0,0 +1,11 @@ + + +
+

+ Florida DrupalCamp is an annual conference that brings + together web developers from all over the world to learn, + network and discuss web development and the Drupal content + management system.

+ + Learn more +
diff --git a/workshop-tailwind-css/code/intro-text-4.txt b/workshop-tailwind-css/code/intro-text-4.txt new file mode 100644 index 0000000..9e0c379 --- /dev/null +++ b/workshop-tailwind-css/code/intro-text-4.txt @@ -0,0 +1,14 @@ + + +
+

+ Florida DrupalCamp is an annual conference that brings + together web developers from all over the world to learn, + network and discuss web development and the Drupal content + management system.

+ + Learn more +
\ No newline at end of file diff --git a/workshop-tailwind-css/code/loops-1.txt b/workshop-tailwind-css/code/loops-1.txt new file mode 100644 index 0000000..faa3915 --- /dev/null +++ b/workshop-tailwind-css/code/loops-1.txt @@ -0,0 +1,11 @@ +Community + +FAQ + +Register \ No newline at end of file diff --git a/workshop-tailwind-css/code/loops-2.txt b/workshop-tailwind-css/code/loops-2.txt new file mode 100644 index 0000000..4171d83 --- /dev/null +++ b/workshop-tailwind-css/code/loops-2.txt @@ -0,0 +1,16 @@ +{% for menu_item in menu_items.findAll() %} + + {% set linkClasses = [ + 'block px-2 py-3 text-2xl uppercase duration-200 ease-out transition-color font-display + text-blue-dark hover:bg-orange focus:bg-orange hover:text-gray-dark focus:text-gray-dark', + + menu_item.is_active ? 'text-white bg-blue' + ] %} + +
  • + + {{ menu_item.title }} + +
    • + +{% endfor %} \ No newline at end of file diff --git a/workshop-tailwind-css/code/navbar-1.txt b/workshop-tailwind-css/code/navbar-1.txt new file mode 100644 index 0000000..e190463 --- /dev/null +++ b/workshop-tailwind-css/code/navbar-1.txt @@ -0,0 +1,20 @@ + + +
    +
    +
    + + + +
    +
    + +
    +
    +
    diff --git a/workshop-tailwind-css/code/navbar-2.txt b/workshop-tailwind-css/code/navbar-2.txt new file mode 100644 index 0000000..c138e21 --- /dev/null +++ b/workshop-tailwind-css/code/navbar-2.txt @@ -0,0 +1,20 @@ + + +
    +
    +
    + + + +
    +
    + +
    +
    +
    diff --git a/workshop-tailwind-css/code/navbar-3.txt b/workshop-tailwind-css/code/navbar-3.txt new file mode 100644 index 0000000..5237985 --- /dev/null +++ b/workshop-tailwind-css/code/navbar-3.txt @@ -0,0 +1,21 @@ + + +
    +
    +
    + + + +
    +
    + +
    +
    +
    diff --git a/workshop-tailwind-css/code/responsive-1.txt b/workshop-tailwind-css/code/responsive-1.txt new file mode 100644 index 0000000..19fd12d --- /dev/null +++ b/workshop-tailwind-css/code/responsive-1.txt @@ -0,0 +1,11 @@ +{# templates/includes/home/intro-text.html.twig #} + +-

    ++

    + +- Learn more \ No newline at end of file diff --git a/workshop-tailwind-css/code/responsive-2.txt b/workshop-tailwind-css/code/responsive-2.txt new file mode 100644 index 0000000..4a2c6e7 --- /dev/null +++ b/workshop-tailwind-css/code/responsive-2.txt @@ -0,0 +1,17 @@ +{# templates/includes/navbar.html.twig #} + +- ++

    ++ ++ +-
      ++