More work on basic blocks

gulpfile.js

@@ -201,7 +201,7 @@ function reloadJS(done) {
 
 gulp.task("tailwind-postcss", function (done) {
   return gulp
-    .src("./source/css/style.css")
+    .src("./source/css/style.pcss")
     .pipe(
       postcss([
         require("postcss-import"),
@@ -260,7 +260,7 @@ function rebuild(done) {
   return gulp.series(build, reload, () => done());
 }
 
-function watch() {
+function watch () {
   const jsPaths = [
     resolvePath(paths().source.js) + "/*.js",
     resolvePath(paths().source.js) + "/**/*.js",
@@ -273,12 +273,14 @@ function watch() {
   // Detect JS changes
   gulp.watch(
     jsPaths,
+    {useFsEvents: false},
     gulp.series("pl-copy:js", reloadJS)
   );
 
   // Detect postcss file changes
   gulp.watch(
     postcssPaths,
+    {useFsEvents: false},
     gulp.series("tailwind-postcss")
   );
 
@@ -287,6 +289,7 @@ function watch() {
   // Detect updated css bundle change
   gulp.watch(
     resolvePath(paths().source.root) + "/dist/style.pkgd.css",
+    {useFsEvents: false},
     gulp.series("pl-copy:css", reloadCSS)
   );
 
@@ -296,6 +299,7 @@ function watch() {
       resolvePath(paths().source.styleguide) + "/*.*",
       resolvePath(paths().source.styleguide) + "/**/*.*",
     ],
+    {useFsEvents: false},
     gulp.series("pl-copy:styleguide", "pl-copy:styleguide-css", reloadCSS)
   );
 
@@ -311,7 +315,7 @@ function watch() {
 
   console.log("Watching following Pattern Lab files:", patternWatches);
 
-  gulp.watch(patternWatches, gulp.series(build, reload));
+  gulp.watch(patternWatches, {useFsEvents: false}, gulp.series(build, reload));
 }
 
 gulp.task(

package.json

@@ -10,12 +10,8 @@
     "lodash.template": "^4.5.0",
     "minimist": "^1.2.3",
     "patternlab-node": "^2.12.0",
-    "postcss-clean": "^1.1.0",
-    "postcss-custom-properties": "^9.1.1",
     "styleguidekit-assets-default": "^3.0.0",
-    "styleguidekit-mustache-default": "^3.0.0",
-    "tailwind-css-variables": "^2.0.3",
-    "tailwindcss-typography": "^3.1.0"
+    "styleguidekit-mustache-default": "^3.0.0"
   },
   "resolutions": {
     "lodash": "^4.17.12"
@@ -45,12 +41,17 @@
   },
   "devDependencies": {
     "@fullhuman/postcss-purgecss": "^1.3.0",
+    "autoprefixer": "^9.5.1",
     "gulp-postcss": "^8.0.0",
     "gulp-rename": "^2.0.0",
     "postcss-assets": "^5.0.0",
+    "postcss-clean": "^1.1.0",
+    "postcss-custom-properties": "^9.1.1",
     "postcss-import": "^12.0.1",
     "postcss-nested": "^4.2.1",
     "postcss-preset-env": "^6.7.0",
-    "tailwindcss": "1.2.0"
+    "tailwind-css-variables": "^2.0.3",
+    "tailwindcss": "^1.4.6",
+    "tailwindcss-typography": "^3.1.0"
   }
 }

source/_data/data.json

-{
-  "key": "value",
-  "key2": "use this for variables you want to load globally",
-  "title": "Nullizzle shizznit velizzle, hizzle, suscipit own yo', gravida vizzle, arcu.",
-  "img": {
-    "avatar": {
-      "src": "http://placeimg.com/100/100/people",
-      "alt": "Avatar"
-    },
-    "square": {
-      "src": "http://placeimg.com/300/300/nature",
-      "alt": "Square"
-    },
-    "rectangle": {
-      "src": "http://placeimg.com/400/300/tech",
-      "alt": "Rectangle"
-    },
-    "landscape-4x3": {
-      "src": "http://placeimg.com/400/300/tech",
-      "alt": "4x3 Image"
-    },
-    "landscape-16x9": {
-      "src": "http://placeimg.com/640/360/tech",
-      "alt": "16x9 Image"
-    }
-  },
-  "headline": {
-    "short": "Lorizzle pimpin' dolizzle sit amet I",
-    "medium": "Rizzle adipiscing elizzle. Nullam sapien velizzle, shit volutpizzle, my"
-  },
-  "excerpt": {
-    "short": "Shizz fo shizzle mah nizzle fo rizzle, mah home g-dizzle, gravida vizzle, arcu. Pellentesque crunk tortizzle. Sed erizzle. Black izzle sheezy telliv.",
-    "medium": "Izzle crazy tempizzle sizzle. We gonna chung gangsta get down get down fo shizzle turpizzle. Away break it down black. Pellentesque bling bling rhoncus fo shizzle. In hac the bizzle platea dictumst. Black dapibizzle. Crackalackin.",
-    "long": "Curabitizzle fo shizzle diam quizzle nisi nizzle mollizzle. Suspendisse boofron. Morbi odio. Sure pizzle. Crazy orci. Shut the shizzle up maurizzle get down get down, check out this a, go to hizzle sit amizzle, malesuada izzle, pede. Pellentesque gravida. Vestibulizzle check it out mi, volutpat izzle, shiz sed, shiznit sempizzle, da bomb. Funky fresh in ipsum. Da bomb volutpat felis vizzle daahng dawg. Crizzle quis dope izzle fo shizzle my ni."
-  },
-  "description": "Fizzle crazy tortor. Sed rizzle. Ass pimpin' dolor dapibizzle turpis tempizzle fo shizzle my nizzle. Maurizzle pellentesque its fo rizzle izzle turpis. Get down get down we gonna chung nizzle. Shizzlin dizzle eleifend rhoncizzle break it down. In yo ghetto platea dictumst. Bling bling dapibizzle. Curabitur break yo neck, yall fo, pretizzle eu, go to hizzle dope, own yo' vitae, nunc. Bizzle suscipizzle. Ass semper velit sizzle fo.",
-  "url": "http://lorizzle.nl/",
-  "name": {
-    "first": "Junius",
-    "firsti": "J",
-    "middle": "Marius",
-    "middlei": "M",
-    "last": "Koolen",
-    "lasti": "K"
-  },
-  "year": {
-    "long": "2013",
-    "short": "13"
-  },
-  "month": {
-    "long": "January",
-    "short": "Jan",
-    "digit": "01"
-  },
-  "dayofweek": {
-    "long": "Sunday",
-    "short": "Sun"
-  },
-  "day": {
-    "long": "01",
-    "short": "1",
-    "ordinal": "st"
-  },
-  "hour": {
-    "long": "06",
-    "short": "6",
-    "military": "06",
-    "ampm": "am"
-  },
-  "minute": {
-    "long": "20",
-    "short": "20"
-  },
-  "seconds": "31"
-}
+{
+  "key": "value",
+  "key2": "use this for variables you want to load globally",
+  "title": "Nullizzle shizznit velizzle, hizzle, suscipit own yo', gravida vizzle, arcu.",
+  "img": {
+    "avatar": {
+      "src": "http://placeimg.com/100/100/people",
+      "alt": "Avatar"
+    },
+    "square": {
+      "src": "http://placeimg.com/300/300/nature",
+      "alt": "Square"
+    },
+    "rectangle": {
+      "src": "http://placeimg.com/400/300/tech",
+      "alt": "Rectangle"
+    },
+    "landscape-4x3": {
+      "src": "http://placeimg.com/400/300/tech",
+      "alt": "4x3 Image"
+    },
+    "landscape-16x9": {
+      "src": "http://placeimg.com/640/360/tech",
+      "alt": "16x9 Image"
+    }
+  },
+  "headline": {
+    "short": "Lorizzle pimpin' dolizzle sit amet I",
+    "medium": "Rizzle adipiscing elizzle. Nullam sapien velizzle, shit volutpizzle, my"
+  },
+  "excerpt": {
+    "short": "Shizz fo shizzle mah nizzle fo rizzle, mah home g-dizzle, gravida vizzle, arcu. Pellentesque crunk tortizzle. Sed erizzle. Black izzle sheezy telliv.",
+    "medium": "Izzle crazy tempizzle sizzle. We gonna chung gangsta get down get down fo shizzle turpizzle. Away break it down black. Pellentesque bling bling rhoncus fo shizzle. In hac the bizzle platea dictumst. Black dapibizzle. Crackalackin.",
+    "long": "Curabitizzle fo shizzle diam quizzle nisi nizzle mollizzle. Suspendisse boofron. Morbi odio. Sure pizzle. Crazy orci. Shut the shizzle up maurizzle get down get down, check out this a, go to hizzle sit amizzle, malesuada izzle, pede. Pellentesque gravida. Vestibulizzle check it out mi, volutpat izzle, shiz sed, shiznit sempizzle, da bomb. Funky fresh in ipsum. Da bomb volutpat felis vizzle daahng dawg. Crizzle quis dope izzle fo shizzle my ni."
+  },
+  "cta": "Call to action",
+  "icon": "fas fa-skull-crossbones",
+  "description": "Fizzle crazy tortor. Sed rizzle. Ass pimpin' dolor dapibizzle turpis tempizzle fo shizzle my nizzle. Maurizzle pellentesque its fo rizzle izzle turpis. Get down get down we gonna chung nizzle. Shizzlin dizzle eleifend rhoncizzle break it down. In yo ghetto platea dictumst. Bling bling dapibizzle. Curabitur break yo neck, yall fo, pretizzle eu, go to hizzle dope, own yo' vitae, nunc. Bizzle suscipizzle. Ass semper velit sizzle fo.",
+  "url": "http://lorizzle.nl/",
+  "name": {
+    "first": "Junius",
+    "firsti": "J",
+    "middle": "Marius",
+    "middlei": "M",
+    "last": "Koolen",
+    "lasti": "K"
+  },
+  "year": {
+    "long": "2013",
+    "short": "13"
+  },
+  "month": {
+    "long": "January",
+    "short": "Jan",
+    "digit": "01"
+  },
+  "dayofweek": {
+    "long": "Sunday",
+    "short": "Sun"
+  },
+  "day": {
+    "long": "01",
+    "short": "1",
+    "ordinal": "st"
+  },
+  "hour": {
+    "long": "06",
+    "short": "6",
+    "military": "06",
+    "ampm": "am"
+  },
+  "minute": {
+    "long": "20",
+    "short": "20"
+  },
+  "seconds": "31"
+}

source/_patterns/00-atoms/00-global/00-brand-colors.mustache

 <ul class="sg-colors">
 	<li>
 		<span class="sg-swatch bg-black"></span>
-		<span class="sg-label">--color-black<br>#00000;</span>
+		<span class="sg-label">Black<br>#00000;</span>
 	</li>
 	<li>
 		<span class="sg-swatch bg-white"></span>
-		<span class="sg-label">--color-white<br>#ffffff</span>
+		<span class="sg-label">White<br>#ffffff</span>
 	</li>
 	<li>
 		<span class="sg-swatch bg-green-100"></span>
-		<span class="sg-label">--color-green-100<br>#29bc51</span>
+		<span class="sg-label">Green 100<br>#29bc51</span>
 	</li>
 	<li>
 		<span class="sg-swatch bg-green-200"></span>
-		<span class="sg-label">--color-green-200<br>#1c8c3b</span>
+		<span class="sg-label">Green 200<br>#1c8c3b</span>
 	</li>
 </ul>

source/_patterns/00-atoms/00-global/01-neutral-colors.mustache

 <ul class="sg-colors">
 	<li>
 		<span class="sg-swatch bg-grey-100"></span>
-		<span class="sg-label">--color-grey-100<br>#f3f3f3</span>
+		<span class="sg-label">Grey 100<br>#f3f3f3</span>
 	</li>
 	<li>
 		<span class="sg-swatch bg-grey-200"></span>
-		<span class="sg-label">--color-grey-200<br>#adadad</span>
+		<span class="sg-label">Grey 200<br>#adadad</span>
 	</li>
 	<li>
 		<span class="sg-swatch bg-grey-300"></span>
-		<span class="sg-label">--color-grey-300<br>#4c4c4c</span>
+		<span class="sg-label">Grey 300<br>#4c4c4c</span>
 	</li>
 	<li>
 		<span class="sg-swatch bg-grey-400"></span>
-		<span class="sg-label">--color-grey-400<br>#343434</span>
+		<span class="sg-label">Grey 400<br>#343434</span>
 	</li>
 	<li>
 		<span class="sg-swatch bg-grey-500"></span>
-		<span class="sg-label">--color-grey-500<br>#202020</span>
+		<span class="sg-label">Grey 500<br>#202020</span>
 	</li>
 </ul>

source/_patterns/00-atoms/00-global/02-utility-colors.mustache

 <ul class="sg-colors">
 	<li>
 		<span class="sg-swatch bg-red"></span>
-		<span class="sg-label">--color-red<br>#d6151b</span>
-	</li>
-	<li>
-		<span class="sg-swatch bg-facebook-blue"></span>
-		<span class="sg-label">--color-facebook-blue<br>#067ceb</span>
+		<span class="sg-label">Red<br>#d6151b</span>
 	</li>
 </ul>

source/_patterns/00-atoms/00-global/03-3rd-brand-colors.mustache

+<ul class="sg-colors">
+	<li>
+		<span class="sg-swatch bg-brands-facebook"></span>
+		<span class="sg-label">Facebook blue<br>#067ceb</span>
+	</li>
+	<li>
+		<span class="sg-swatch bg-brands-twitter"></span>
+		<span class="sg-label">Twitter blue<br>#00c9ff</span>
+	</li>
+	<li>
+		<span class="sg-swatch bg-brands-gmail"></span>
+		<span class="sg-label">Gmail red<br>#ec230e</span>
+	</li>
+	<li>
+		<span class="sg-swatch bg-brands-linkedin"></span>
+		<span class="sg-label">LinkedIn blue<br>#0066a9</span>
+	</li>
+</ul>

source/_patterns/00-atoms/01-text/headings.mustache

-<h1 class="h-xl">Largest headline</h1>
-<h1 class="h-lg">Large headline</h1>
-<h1 class="h-md">Medium headline</h1>
-<h1 class="h-base">Base headline</h1>
-<h1 class="h-base-heavy">Base headline heavy variant</h1>
-<h1 class="h-sm">Small headline</h1>
-<h1 class="h-sm-heavy">Small headline heavy variant</h1>
-<h1 class="h-xs">Extra small headline</h1>
-<h1 class="h-xs-allcaps">Extra small headline allcaps</h1>
+<h1 class="head-xl">Largest headline</h1>
+<h1 class="head-lg">Large headline</h1>
+<h1 class="head-md">Medium headline</h1>
+<h1 class="head-base">Base headline</h1>
+<h1 class="head-base-heavy">Base headline heavy variant</h1>
+<h1 class="head-sm">Small headline</h1>
+<h1 class="head-sm-heavy">Small headline heavy variant</h1>
+<h1 class="head-xs">Extra small headline</h1>
+<h1 class="head-xs-allcaps">Extra small headline allcaps</h1>

source/_patterns/00-atoms/02-contact-lines/basic-contact-line.mustache

+<a href="mailto:example@example.com" class="contact-line {{ classes }}">
+  <i class="{{ icon }}"></i>{{ caption }}{{^caption}}example@example.com{{/caption}}
+</a>

source/_patterns/00-atoms/03-buttons/autowidth-button.mustache

+<button class="btn is-auto {{ classes }}">
+  <div class="btn-body">{{ cta }}</div>
+</button>

source/_patterns/00-atoms/03-buttons/basic-button.mustache

+<button class="btn {{ classes }}">
+  <div class="btn-body">{{ cta }}</div>
+</button>

source/_patterns/00-atoms/03-buttons/button-colors.mustache

+<button class="btn">
+  <div class="btn-body">{{ cta }}</div>
+</button>
+
+<button class="btn is-green">
+  <div class="btn-body">{{ cta }}</div>
+</button>
+
+<button class="btn is-inverted">
+  <div class="btn-body">{{ cta }}</div>
+</button>
+
+<button class="btn is-inverted to-faded">
+  <div class="btn-body">{{ cta }}</div>
+</button>

source/_patterns/00-atoms/03-buttons/button-sizes.mustache

+<button class="btn">
+  <div class="btn-body">{{ cta }}</div>
+</button>
+
+<button class="btn is-lg">
+  <div class="btn-body">{{ cta }}</div>
+</button>

source/_patterns/00-atoms/03-buttons/default.mustache

-<button class="btn">
-  <div class="btn-body">A button</div>
-</button>

source/_patterns/00-atoms/03-buttons/fullwidth-button.mustache

+<button class="btn is-fullwidth {{ classes }}">
+  <div class="btn-body">{{ cta }}</div>
+</button>

source/_patterns/00-atoms/03-buttons/green.mustache

-<button class="btn is-green">
-  <div class="btn-body">
-    A green button
-  </div>
- </button>
-<button class="btn is-green is-lg">
-  <div class="btn-body">
-    A green button
-  </div>
- </button>

source/_patterns/00-atoms/03-buttons/icon-button.mustache

+<button class="btn has-icon {{ classes }}">
+  <div class="btn-body-wrap">
+    <div class="btn-body">{{ cta }}</div>
+    <div class="btn-icon">
+      <i class="{{ icon }}"></i>
+    </div>
+  </div>
+</button>

source/_patterns/00-atoms/03-buttons/inverted.mustache

-<button class="btn is-inverted">
-  <div class="btn-body">
-    An inverted button
-  </div>
- </button>
-
- <button class="btn is-inverted to-faded">
-  <div class="btn-body">
-    An inverted button that doesn't go fully black
-  </div>
- </button>