📦 NEW: Replace Tailwind with Cherry Design System

Author: luangjokaj

CHANGELOG.md

@@ -1,5 +1,8 @@
 # Changelog
 
+**v0.2.9-24**
+- 📦 NEW: Replace Tailwind with [Cherry Design System](https://cherry.design).
+
 **v0.2.9-23**
 - 🚀 RELEASE: Update dependencies.
 

README.md

@@ -49,7 +49,7 @@ https://www.wordpressify.co/
 |💽| MariaDB Database |
 |🔥| Hot Reload & CSS Injection|
 |🎨| PostCSS & Next Generation CSS|
-|💨| Tailwind CSS|
+|🍒| [Cherry Design System](https://cherry.design)|
 |⚙| Babel 7 - ES6 JavaScript|
 |✂️| Source Maps|
 |🎒| Code Minification|
@@ -269,9 +269,9 @@ Tags: responsive, clean, minimal, modern, documentation
 */
 ```
 
-**TAILWIND CSS**
+**CHERRY DESIGN SYSTEM**
 
-[Tailwind CSS](https://tailwindcss.com/) is a utility-first CSS framework packed with classes like `flex`, `pt-4`, `text-center` and `rotate-90` that can be composed to build any design, directly in your markup. Tailwind comes pre-installed with WordPressify.
+[Cherry](https://cherry.design/) is a minimal CSS framework that helps you organize your work from design to implementation.
 
 ## Sass
 WordPressify is super flexible. You can install Sass and use it as the main CSS preprocessor:

gulpfile.js

@@ -37,7 +37,6 @@ PostCSS Plugins
 -------------------------------------------------------------------------------------------------- */
 const pluginsListDev = [
 	partialimport,
-	postCSSMixins,
 	postcssPresetEnv({
 		stage: 0,
 		features: {
@@ -46,7 +45,7 @@ const pluginsListDev = [
 			'custom-media': true,
 		},
 	}),
-	tailwindcss,
+	postCSSMixins,
 ];
 
 const pluginsListProd = [

installer/modules/run.js

@@ -39,7 +39,6 @@ module.exports = async () => {
 		`${upstreamUrl}/LICENSE`,
 		`${upstreamUrl}/README.md`,
 		`${upstreamUrl}/gulpfile.js`,
-		`${upstreamUrl}/tailwind.config.js`,
 		`${upstreamUrl}/docker-compose.yml`,
 		`${upstreamUrl}/Dockerfile.in`,
 		`${upstreamUrl}/installer/package.json`,

installer/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "wordpressify",
-	"version": "0.2.9-23",
+	"version": "0.2.9-24",
 	"description": "A build system designed to automate your WordPress development workflow.",
 	"keywords": [
 		"babel",
@@ -43,8 +43,10 @@
 	"dependencies": {
 		"@babel/core": "^7.12.10",
 		"@babel/preset-env": "^7.12.11",
-		"beeper": "^2.0.0",
+		"autoprefixer": "^10.2.1",
+		"beeper": "^2.1.0",
 		"browser-sync": "^2.26.13",
+		"cherry-postcss": "^0.0.1-7",
 		"cssnano": "^4.1.10",
 		"del": "^6.0.0",
 		"dotenv": "^8.2.0",
@@ -59,11 +61,10 @@
 		"gulp-uglify": "^3.0.2",
 		"gulp-vinyl-zip": "^2.2.1",
 		"jquery": "^3.5.1",
-		"postcss": "^8.2.1",
+		"postcss": "^8.2.4",
 		"postcss-easy-import": "^3.0.0",
 		"postcss-mixins": "^7.0.2",
 		"postcss-preset-env": "^6.7.0",
-		"stylelint": "^13.8.0",
-		"tailwindcss": "^2.0.2"
+		"stylelint": "^13.8.0"
 	}
 }

package-lock.json

@@ -1,6 +1,6 @@
 {
 	"name": "wordpressify",
-	"version": "0.2.9-23",
+	"version": "0.2.9-24",
 	"description": "A build system designed to automate your WordPress development workflow.",
 	"keywords": [
 		"babel",
@@ -34,7 +34,7 @@
 		"commander": "^6.2.1",
 		"download": "^8.0.0",
 		"execa": "^5.0.0",
-		"ora": "^5.1.0",
+		"ora": "^5.2.0",
 		"prompts": "^2.4.0"
 	}
 }

package.json

@@ -8,10 +8,7 @@ Description: WordPressify default theme.
 Version: 1.0
 Tags: responsive, clean, minimal, modern, wordpressify
 */
-@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap');
 
-@import 'tailwindcss/base';
-@import 'tailwindcss/components';
-@import 'tailwindcss/utilities';
+@import "cherry-postcss/src/cherry.css";
 
-@import './wordpressify';
+@import "./wordpressify";

src/assets/css/style.css

@@ -1,29 +1,89 @@
-@import './variables';
+.header {
+	border-bottom: solid 1px var(--color-gray-light);
+	display: flex;
+	padding-top: 30px;
+	padding-bottom: 30px;
 
-.widget-title {
-	@apply font-bold py-2 rounded;
+	& img {
+		display: flex;
+	}
 }
 
-#searchsubmit,
-.post-edit-link,
-.button {
-	@apply appearance-none inline-block bg-transparent border-2 rounded-lg py-2 px-5 text-blue-600 font-medium outline-none cursor-pointer transition-all hover:border-gray-300 hover:text-red-500;
+.main-content {
+	@media (--screen-lg) {
+		border-right: solid 1px var(--color-gray-light);
+	}
 }
 
-.button {
-	@apply mb-5;
+.site-content,
+.page {
+	padding: 20px 0;
 }
 
+.page {
+	& .item:not(:last-of-type) {
+		padding-bottom: 20px;
+	}
+}
 
-.post-edit-link {
-	@apply fixed bottom-4 right-4;
+.excerpt {
+	padding-top: 20px;
+}
+
+ul {
+	@mixin reset-list;
 }
 
+p a,
 a {
-	@apply text-blue-600 transition-all hover:text-red-500;
+	color: var(--color-secondary);
+
+	@media (hover: hover) {
+		&:hover {
+			color: var(--color-secondary-dark);
+		}
+	}
+}
+
+p:empty {
+	display: none;
+}
+
+.widget-title {
+	font-size: var(--size-lead-mobile);
+	line-height: var(--lineheight-lead-mobile);
+	font-weight: 700;
+
+	@media (--screen-lg) {
+		font-size: var(--size-lead-desktop);
+		line-height: var(--lineheight-lead-desktop);
+	}
+}
+
+.widget-item {
+	margin: 20px 0;
+
+	&:first-of-type {
+		margin-top: 10px;
+
+		@media (--screen-lg) {
+			margin: 30px 0;
+		}
+	}
+
+	@media (--screen-lg) {
+		margin: 30px 0;
+	}
+}
+
+.post-edit-link {
+	position: fixed;
+	bottom: 20px;
+	right: 20px;
 }
 
-.page-title,
-.single-title {
-	@apply text-5xl pb-5 font-bold;
+.footer {
+	border-top: solid 1px var(--color-gray-light);
+	padding-top: 10px;
+	padding-bottom: 10px;
 }