From 8a9a7e0b52bb89be96b08cdbe8d53a693a4376f5 Mon Sep 17 00:00:00 2001 From: Adam Piontek Date: Fri, 2 Jul 2021 12:51:45 -0400 Subject: [PATCH] replace tailwind with bootstrap: initial webpack config for development --- README.md | 10 +-- TODO.md | 6 +- assets/css/app.scss | 12 --- assets/css/conditional/article.css | 41 --------- assets/css/conditional/conditional.css | 2 - assets/css/conditional/header.css | 12 --- assets/css/whitelist/buttons.css | 55 ------------ assets/css/whitelist/forms.css | 44 ---------- assets/css/whitelist/icons.css | 17 ---- assets/css/whitelist/navigation.css | 113 ------------------------- assets/css/whitelist/transitions.css | 13 --- assets/css/whitelist/type.css | 111 ------------------------ assets/css/whitelist/whitelist.css | 7 -- assets/css/whitelist/wordpress.css | 28 ------ package.json | 1 - webpack.config.js | 5 -- 16 files changed, 9 insertions(+), 468 deletions(-) delete mode 100644 assets/css/conditional/article.css delete mode 100644 assets/css/conditional/conditional.css delete mode 100644 assets/css/conditional/header.css delete mode 100644 assets/css/whitelist/buttons.css delete mode 100644 assets/css/whitelist/forms.css delete mode 100644 assets/css/whitelist/icons.css delete mode 100644 assets/css/whitelist/navigation.css delete mode 100644 assets/css/whitelist/transitions.css delete mode 100644 assets/css/whitelist/type.css delete mode 100644 assets/css/whitelist/whitelist.css delete mode 100644 assets/css/whitelist/wordpress.css diff --git a/README.md b/README.md index 8f909e5..b3a653d 100644 --- a/README.md +++ b/README.md @@ -1,5 +1,5 @@ -# WordPress Tailwind Starter Theme -A minimalistic WordPress starter theme, based on Tailwind and PurgeCSS. +# 73k WordPress Bootstrap 5/PurgeCSS Theme +The WordPress theme for 73k.us, based on Bootstrap 5 and PurgeCSS. ## Requirements - [NodeJS](https://nodejs.org) @@ -25,8 +25,8 @@ npm run build ``` This will run both a production and development set of webpack tasks. The enqueue hook will load the correct version of the JS file, based on whether your development/staging server's `SCRIPT_DEBUG` constant is set to `true`. -## Tailwind -Using the `tailwind.js` file, you can customize Tailwind's default styles before things get compiled. For more information on configuration, [see detailed documentation on Tailwind](https://tailwindcss.com/). +## Bootstrap +You can customize Bootstrap SCSS & JavaScript imports in the `assets/css/app.scss` and `assets/js/main.js` files. ## PurgeCSS -*WP Tailwind* uses PurgeCSS to remove unused styles from the production build. It scans your project directory for strings that match SCSS declarations. You can modify the directories to search for in the `webpack.config.js` file. **Always check your production build to make sure styles you were developing with compiled correctly.** +*WP 73k* uses PurgeCSS to remove unused styles from the production build. It scans your project directory for strings that match SCSS declarations. You can modify the directories to search for in the `webpack.config.js` file. **Always check your production build to make sure styles you were developing with compiled correctly.** diff --git a/TODO.md b/TODO.md index d9fc24e..bc4a5ad 100644 --- a/TODO.md +++ b/TODO.md @@ -4,8 +4,10 @@ - [X] ~~*rebrand*~~ [2021-07-02] - [X] ~~*initial updating of node modules/webpack*~~ [2021-07-02] - [ ] replace tailwind with bootstrap -- [ ] reconfigure purgecss/postcss to ensure it's working -- [ ] confirm node modules / webpack config + - [ ] initial webpack config for development + - [ ] pore through template files to update theming + - [ ] purgecss/webpack config for production +- [ ] double-check npm run build output to ensure it's all working - [ ] add font handling if possible - [ ] add svg sprite handling if possible - [ ] ... diff --git a/assets/css/app.scss b/assets/css/app.scss index 03aaf7d..ec913c0 100644 --- a/assets/css/app.scss +++ b/assets/css/app.scss @@ -1,13 +1 @@ -// @import "tailwindcss/base"; -// @import "tailwindcss/components"; -// @import "tailwindcss/utilities"; -// @import "whitelist/whitelist.css"; -// @import "conditional/conditional.css"; - -// /* Fonts */ -// @import "fonts"; - -// /* Load Bootstrap v5 and customizations */ -// @import "bs-load"; - @import "../../node_modules/bootstrap/scss/bootstrap.scss" \ No newline at end of file diff --git a/assets/css/conditional/article.css b/assets/css/conditional/article.css deleted file mode 100644 index de0b99d..0000000 --- a/assets/css/conditional/article.css +++ /dev/null @@ -1,41 +0,0 @@ -.post-title { - @apply text-4xl mb-0; - - @screen lg { - @apply text-5xl; - } -} - -.article { - @apply mt-8; - - > p:first-of-type { - @apply text-lg; - } - - h2, - h3, - h4, - h5, - h6 { - @apply font-bold; - } - - h4, - h5, - h6 { - text-transform: uppercase; - } - - @screen lg { - p, - ul, - ol { - @apply mt-4 mb-8 leading-normal; - } - - p.text-sm { - @apply text-sm; - } - } -} diff --git a/assets/css/conditional/conditional.css b/assets/css/conditional/conditional.css deleted file mode 100644 index b065f2f..0000000 --- a/assets/css/conditional/conditional.css +++ /dev/null @@ -1,2 +0,0 @@ -@import "header"; -@import "article"; \ No newline at end of file diff --git a/assets/css/conditional/header.css b/assets/css/conditional/header.css deleted file mode 100644 index d6955c1..0000000 --- a/assets/css/conditional/header.css +++ /dev/null @@ -1,12 +0,0 @@ -.header { - @apply py-2 z-10 bg-gray-100; - - @screen lg { - @apply py-6; - } - - .container { - @apply flex justify-between items-center; - } -} - diff --git a/assets/css/whitelist/buttons.css b/assets/css/whitelist/buttons.css deleted file mode 100644 index 5c26d6e..0000000 --- a/assets/css/whitelist/buttons.css +++ /dev/null @@ -1,55 +0,0 @@ -.button { - @apply font-sans not-italic font-light rounded bg-gray-800 border-2 border-gray-800 leading-normal inline-block no-underline text-gray-200 px-6 py-4 shadow-lg text-center; - transform: translateY(0); - - @screen lg { - @apply px-12 py-4; - } - - &:focus, - &:hover { - @apply text-white border-gray-800 bg-gray-800 no-underline shadow; - transform: translate3d(1px, 2px, 0); - cursor: pointer; - } -} - -.button-white { - @extend .button; - @apply bg-gray-100 text-gray-800; - - &:focus, - &:hover { - @apply bg-white text-gray-600; - } -} - -.button-primary { - @extend .button; - @apply bg-primary-100 text-white border-none; - - &:focus, - &:hover { - @apply border-primary-100 bg-primary-100 text-white bg-primary-200; - } -} - -.button-link { - @apply font-bold font-serif not-italic; -} - -.highlight { - @apply font-bold font-sans not-italic text-primary-100; -} - -.button-sm { - @apply px-4 py-2 text-sm; -} - -.button-lg { - @apply px-12 py-4; - - @screen lg { - @apply py-6; - } -} \ No newline at end of file diff --git a/assets/css/whitelist/forms.css b/assets/css/whitelist/forms.css deleted file mode 100644 index f35a753..0000000 --- a/assets/css/whitelist/forms.css +++ /dev/null @@ -1,44 +0,0 @@ -label { - @apply text-sm font-sans uppercase font-bold; -} - -input, -textarea, -select { - @apply border-2 bg-gray-100 leading-normal rounded w-full py-3 px-4 mb-2 italic text-base w-full border-gray-300; - @extend .transition; - - &[aria-invalid="true"] { - @apply border-primary-100; - } - - &:focus { - @apply shadow-lg bg-gray-100 border-gray-200; - transform: translate3d(-1px, -1px, 0); - outline: 0; - } -} - -input, -textarea { - &:focus { - @apply border-gray-800; - } -} - -textarea { - @apply h-24; -} - -select { - @apply h-12 bg-gray-100; - - option { - @apply bg-white; - } - - &:focus { - @apply shadow-none border-gray-300; - transform: none; - } -} \ No newline at end of file diff --git a/assets/css/whitelist/icons.css b/assets/css/whitelist/icons.css deleted file mode 100644 index 94a0626..0000000 --- a/assets/css/whitelist/icons.css +++ /dev/null @@ -1,17 +0,0 @@ -.svg-icon { - width: 1em; - height: 1em; - - path, - polygon, - rect { - @apply fill-current; - } - - circle { - @apply stroke-current; - stroke-width: 1; - } -} - - diff --git a/assets/css/whitelist/navigation.css b/assets/css/whitelist/navigation.css deleted file mode 100644 index f187d48..0000000 --- a/assets/css/whitelist/navigation.css +++ /dev/null @@ -1,113 +0,0 @@ -.nav-primary { - @apply hidden; - - a { - @apply text-gray-800 italic no-underline font-normal; - - &:focus, - &:hover { - @apply underline; - } - } - - li { - @apply leading-tight; - } - - .highlight { - @apply text-primary-100 not-italic font-bold; - } - - .button { - @apply text-white; - } - - .current-menu-item a { - @apply font-bold not-italic; - } - - @screen md { - @apply block; - - .dark-header & { - transform: none; - } - - li { - @apply mb-0; - - &:last-child a { - @apply mr-0; - } - } - - a { - @apply mx-4; - } - - .button { - @extend .button-sm; - } - - .sub-menu { - @apply hidden absolute bg-white shadow-lg; - @extend .list-reset; - - a { - @apply text-gray-200; - } - } - - .menu-item-has-children { - @apply relative; - - &:hover { - .sub-menu { - @apply block; - } - } - } - } -} - -.nav-mobile { - @extend .nav-primary, .transition; - @apply fixed left-0 top-0 h-full bg-white p-4 z-50 w-full overflow-scroll block z-50 text-center; - transform: translate3d(-100%, 0, 0); - - &.active { - transform: translate3d(0, 0, 0); - } - - a { - @apply block w-full text-2xl; - } - - @screen md { - @apply hidden; - } - - .admin-bar & { - top: 46px; - - @screen md { - top: 32px; - } - } -} - - -@screen md { - .toggle { - @apply hidden; - } -} - -.footer-menu { - @apply pl-0 ml-0; - @extend .list-reset; - - a { - @apply text-white not-italic; - } -} \ No newline at end of file diff --git a/assets/css/whitelist/transitions.css b/assets/css/whitelist/transitions.css deleted file mode 100644 index 4b77595..0000000 --- a/assets/css/whitelist/transitions.css +++ /dev/null @@ -1,13 +0,0 @@ -.transition { - transition: all .25s cubic-bezier(0.165, 0.84, 0.44, 1); -} - -a, -.button, -.button-large, -.button-lg, -.button-primary, -.button-bg-primary-200, -.button-bg-primary-200 .icon { - @extend .transition; -} \ No newline at end of file diff --git a/assets/css/whitelist/type.css b/assets/css/whitelist/type.css deleted file mode 100644 index 9d74566..0000000 --- a/assets/css/whitelist/type.css +++ /dev/null @@ -1,111 +0,0 @@ -html { - font-size: 18px; -} - -body { - @apply bg-gray-100 font-serif text-base font-light leading-normal antialiased; -} - -strong, -b { - @apply font-bold; -} - -p { - @apply mt-2 mb-4; -} - -a { - @apply text-primary-100 underline font-bold; - - &:focus, - &:hover { - @apply text-gray-600; - } -} - -h1, -h2, -h3, -h4, -h5, -h6 { - @apply mt-8 mb-4 font-sans font-light; - - @screen lg { - @apply mt-12; - } -} - -h1, -h2, -h3 { - @apply leading-tight; -} - -h4, -h5, -h6 { - @apply leading-normal; -} - -h1 { - @apply text-5xl; -} - -h2 { - @apply text-4xl; -} - -h3 { - @apply text-3xl; -} - -h4 { - @apply text-2xl; -} - -h5 { - @apply text-xl; -} - -h6 { - @apply text-xl tracking-wide; -} - -ul, -ol { - @apply mt-4 mb-10 ml-2; - - @screen lg { - @apply ml-8; - } -} - -li { - @apply mb-2; - - .sidebar &, - .article & { - list-style-type: disc; - } -} - -blockquote { - @apply text-center italic m-10; - - @screen lg { - @apply m-16 text-lg; - } -} - -.list-reset { - display: inline-block; - list-style: none; - margin: 0; - padding: 0; -} - -::selection { - @apply bg-primary-100 text-gray-200; -} \ No newline at end of file diff --git a/assets/css/whitelist/whitelist.css b/assets/css/whitelist/whitelist.css deleted file mode 100644 index a35168a..0000000 --- a/assets/css/whitelist/whitelist.css +++ /dev/null @@ -1,7 +0,0 @@ -@import "type.css"; -@import "navigation.css"; -@import "buttons.css"; -@import "transitions.css"; -@import "icons.css"; -@import "forms.css"; -@import "wordpress.css"; \ No newline at end of file diff --git a/assets/css/whitelist/wordpress.css b/assets/css/whitelist/wordpress.css deleted file mode 100644 index ad0757d..0000000 --- a/assets/css/whitelist/wordpress.css +++ /dev/null @@ -1,28 +0,0 @@ -.alignright { - @apply float-right ml-4 mb-4; -} - -.alignleft { - @apply float-left mr-4 mb-4; -} - -.aligncenter { - @apply mx-auto; -} - -img { - @apply rounded; -} - -.screen-reader-text { - border: 0; - clip: rect(1px, 1px, 1px, 1px); - clip-path: inset(50%); - height: 1px; - margin: -1px; - overflow: hidden; - padding: 0; - position: absolute; - width: 1px; - word-wrap: normal !important; -} \ No newline at end of file diff --git a/package.json b/package.json index 8984774..df0cbaa 100644 --- a/package.json +++ b/package.json @@ -45,7 +45,6 @@ "postcss-scss": "^3.0.4", "sass": "^1.x", "sass-loader": "^12.x", - "tailwindcss": "^1.5.2", "webpack": "^5.x", "webpack-cli": "^4.x" }, diff --git a/webpack.config.js b/webpack.config.js index a8560e2..2296114 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -13,7 +13,6 @@ let prefix = isProduction ? '.min' : ''; // Set the PostCSS Plugins. const post_css_plugins = [ require('postcss-import'), - require('tailwindcss')('./tailwind.js'), require('postcss-nested'), require('postcss-custom-properties'), require('autoprefixer') @@ -28,12 +27,8 @@ if ( isProduction ) { './src/**/*.php', './page-templates/*.php', './assets/images/**/*.svg', - './assets/scss/whitelist/*.css', './../../mu-plugins/app/src/components/**/*.php', ], - // css: [ - // './node_modules/tailwindcss/dist/base.css' - // ], // Use Extractor configuration from Tailwind Docs // https://tailwindcss.com/docs/controlling-file-size#setting-up-purge-css-manually defaultExtractor: content => {