Merge pull request OrlandoDevs#24 from jonkurtis/style-guide

feat: Add Visual Style guide
chrisdecrypted · Feb 18, 2022 · e15508e · e15508e
2 parents bcb75b3 + dc0b9b2
commit e15508e
Show file tree

Hide file tree

Showing 14 changed files with 164 additions and 21 deletions.
diff --git a/README.md b/README.md
@@ -11,6 +11,96 @@ Once packages are installed run the Netlfiy dev stack:
 `netlify dev`
 
 ---
-# Live Demo
----
+## Live Demo
+
 https://odevs.netlify.app/
+
+## Style Guide
+
+To maintain styling consistency we are using [daisy UI](https://daisyui.com/), a themeable Tailwind CSS Component framework. 
+
+### Colors
+
+Daisy UI introduces a color system with semantic color utility classes that are set in [tailwind.config.js](tailwind.config.js) and based on CSS variables.
+
+Some daisyUI components come with variants and you can use them by name.  
+Like `<button class="btn btn-primary">Button</button>`  
+or `<input type="checkbox" class="checkbox checkbox-secondary">`
+
+You can also use color names in utility classes just like Tailwind's color names.  
+These are default utility classes that use color names:
+
+```css
+bg-{COLOR_NAME}
+to-{COLOR_NAME}
+via-{COLOR_NAME}
+from-{COLOR_NAME}
+text-{COLOR_NAME}
+ring-{COLOR_NAME}
+fill-{COLOR_NAME}
+caret-{COLOR_NAME}
+stroke-{COLOR_NAME}
+border-{COLOR_NAME}
+divide-{COLOR_NAME}
+accent-{COLOR_NAME}
+shadow-{COLOR_NAME}
+outline-{COLOR_NAME}
+decoration-{COLOR_NAME}
+placeholder-{COLOR_NAME}
+ring-offset-{COLOR_NAME}
+```
+
+So you can use `bg-primary`, `border-secondary`, etc...
+
+### Components
+
+[daisy UI](https://daisyui.com), provides pure CSS and semantic HTML components for common use cases such as Buttons, Cards, Dropdowns, Carousels, Modals, etc. For a full list of CSS based components please see the [Components Docs](https://daisyui.com/components/).
+
+To maintain consistency, contributors should use available components when possible. 
+
+daisyUI components comes with many variants necessary for design systems and you won't usually need to customize anything  
+But you can still customize components in many ways.
+
+- Let's say, you want to customize a button:
+
+```html
+<button class="btn">Button</button>
+```
+
+1. You can use daisyUI utility classes:
+
+```html
+<button class="btn btn-primary">Three</button>
+<button class="btn btn-secondary">Two</button>
+<button class="btn btn-accent btn-outline">Three</button>
+```
+
+2. You can use Tailwind's utility classes:
+
+```html
+<button class="btn rounded-full">One</button>
+<button class="btn rounded-none px-16">Two</button>
+```
+
+3. You can customize components on your CSS file, using Tailwind's @apply directive.
+
+```css
+.btn {
+  @apply rounded-full;
+}
+```
+
+4. You can also modify the theme directly in [tailwind.config.js](tailwind.config.js) to make site wide customizations.
+
+## Layout
+
+Layout, sizing, grids, spacing, etc... all will be handled by Tailwind CSS's utility classes
+
+Read more about:
+
+- [Layout](https://tailwindcss.com/docs/container)
+- [Sizing](https://tailwindcss.com/docs/width)
+- [Flexbox](https://tailwindcss.com/docs/flex)
+- [Grid](https://tailwindcss.com/docs/grid-template-columns)
+- [Box alignment](https://tailwindcss.com/docs/justify-content)
+- [Spacing](https://tailwindcss.com/docs/padding)
diff --git a/package.json b/package.json
@@ -27,6 +27,8 @@
   },
   "dependencies": {
     "browsersync": "^0.0.1-security",
+    "daisyui": "^1.25.4",
+    "postcss": "^8.3.6",
     "tailwind": "^4.0.0"
   }
 }
diff --git a/src/_includes/about.html b/src/_includes/about.html
@@ -2,9 +2,9 @@
 title: Who Are The ODevs?
 layout: default
 ---
-<div class="bg-tPalette1">
+<div class="bg-base-300">
 
-<div class="bg-tPalette5 border rounded-md shadow-sm my-4 mx-10">
+<div class="bg-base-100 container border rounded-md shadow-sm my-4 mx-auto px-6">
     <h1 class="bg-clip-text text-transparent bg-gradient-to-br from-tPalette2 to-tPalette4 mt-6">{{title}}</h1>
 
     {{ content | safe }}

diff --git a/src/_includes/default.html b/src/_includes/default.html
@@ -16,9 +16,11 @@
       <link rel="stylesheet" type="text/css" href="/static/css/prism-tomorrow.css">
     {% endif %}
   </head>
-  <body class="flex flex-col min-h-screen bg-tPalette5">
+  <body class="bg-base-300 flex flex-col min-h-screen">
     {% include "./partials/navbar.html" %}
-    {{ content | safe }}
+    <div class="container my-6 mx-auto">
+      {{ content | safe }}
+    </div>
     {% include "./partials/footer.html" %}
      <script src="/static/js/alpine.js"></script>
 

diff --git a/src/_includes/events.html b/src/_includes/events.html
@@ -6,8 +6,8 @@
 <div class="m-8">
 <h1 class="text-left font-extralight">{{desc}}</h1>
 <br><br>
-<div class="bg-white rounded-xl p-6 shadow-md">
-    <div class="inline-block border rounded-md py-2 px-8 mx-4 text-white bg-tPalette4 shadow-sm font-Poppins text-center w-24" >
+<div class="bg-base-100 rounded-xl p-6 shadow-md">
+    <div class="inline-block border rounded-md py-2 px-8 mx-4 text-base-100 bg-secondary shadow-sm font-Poppins text-center w-24" >
                {{date | readableDate}}
                 </div>
                 <h1 class="inline-flex">{{title}}</h1>

diff --git a/src/_includes/jobs.html b/src/_includes/jobs.html
@@ -5,7 +5,7 @@
 <div class="m-8">
 <h1 class="text-left font-extralight">{{desc}}</h1>
 <br><br>
-<div class="bg-white rounded-xl p-6 shadow-md">
+<div class="bg-base-100 rounded-xl p-6 shadow-md">
     <img src="{{logo}}" alt="company logo" class="w-80">
     <br>
     <br>

diff --git a/src/_includes/partials/content.html b/src/_includes/partials/content.html
@@ -1,11 +1,11 @@
-<div class="relative md:flex flex-1 lg:flex-cols-4 md:grid-col-4 px-2 py-2 lg:mx-0 overflow-auto justify-center items-center text-center">
+<div class="relative md:flex flex-1 lg:flex-cols-4 md:grid-col-4 px-2 py-2 lg:mx-0 overflow-auto justify-center items-center text-center mb-6">
 
     {% if quicklinks.links %}
 
         {% for item in quicklinks.links %}
 
             <a href="{{item.url}}" target="_blank" class="justify-center transition duration-300 ease-in-out transform hover:-translate-y-1 hover:shadow-md hover:scale-105 text-center md:p-6 md:border-2 rounded-md border-gray-200 hover:border-tPalette5 hover:bg-tPalette2 md:hover:text-tPalette5 mx-6 md:shadow-sm">
-                <img src="{{item.logo}}" class="h-12 mx-auto">
+                <img src="{{item.logo}}" class="h-12 mx-auto mb-3">
                 <h4><strong>{{item.title}}
                     </strong></h4>
                     <small>{{item.desc}}</small>
@@ -15,8 +15,7 @@ <h4><strong>{{item.title}}
     {% endif %}
 
 </div>
-<div class="">
-</div>
+
 <div class="md:flex md:flex-1">
 <a href="https://bluewaverp.com/" class="flex flex-col space-y-0"><img src="/static/img/bluewave-logo.png" class="sponsor-logos"><small class="text-center">Sponsor</small>
 </a>

diff --git a/src/_includes/posts.html b/src/_includes/posts.html
@@ -3,7 +3,7 @@
 prism: true
 ---
 
-<div class="flex min-h-100vh flex-col md:pt-6">
+<div class="bg-base-100 flex min-h-100vh flex-col md:pt-6">
     <div class="pb-5 mb-5 border-b border-gray-100">
         <h1 class="font-bold text-5xl">{{title}}</h1>
         <p class="text-center text-base leading-6 font-medium text-gray-500">

diff --git a/src/about/index.html b/src/about/index.html
@@ -12,7 +12,6 @@
 </div>
 <img src="/static/img/bg.jpg" class="justify-items-end  w-1/4 rounded-lg"/>
 </div>
-<hr>
 <div class="mx-10 px-4 mt-10">
 <ul class=""><h3>Orlando Devs Board of Directors</h3>
 <li>

diff --git a/src/blog/index.html b/src/blog/index.html
@@ -7,7 +7,7 @@
     {% set postslist = collections.post %}
 
     {% for post in postslist | reverse %}
-        <article class="transition duration-500 ease-in-out my-8 border rounded-md border-tPalette5 shadow-sm transform hover:-translate-y-1 hover:scale-105 hover:shadow-xl">
+        <article class="bg-base-100 py-4 transition duration-500 ease-in-out my-8 border rounded-md border-tPalette5 shadow-sm transform hover:-translate-y-1 hover:scale-105 hover:shadow-xl">
             <h2 class="justify-end text-right mx-5 py-4 font-bold text-3xl bg-clip-text text-transparent bg-gradient-to-br from-tPalette2 to-tPalette4">
                 <a href="{{ post.url | url }}">
                     {% if post.data.title %}

diff --git a/src/index.html b/src/index.html
@@ -11,9 +11,7 @@ <h1>
     </strong>
   </h1>
 
-  <p>
-    <abbr title="Quicklinks" class="flex md:py-4 font-Poppins">This is a community built of developers in Orlando and the central Florida Area</abbr>
-  </p>
+    <p class="flex md:py-4 font-Poppins">This is a community built of developers in Orlando and the Central Florida Area</p>
 
   {% include "./_includes/partials/content.html" %}
 <div class="mx-8">

diff --git a/src/slack/index.html b/src/slack/index.html
@@ -15,7 +15,7 @@ <h3>How to get in?</h3>
 </div>
 </div>
 
-<div class="pt-6 px-28 space-y-6 px-16">
+<div class="pt-6 px-28 space-y-6">
 
 <h2>The Rules</h2>
 <p>First and foremost, we take our Code of Conduct very seriously for the safety of our community. Here's a quick summary plus some additional rules relevant to our ongoing online chat:</p>

diff --git a/src/static/css/tailwind.css b/src/static/css/tailwind.css
@@ -4,6 +4,22 @@
 
 /*Your Custom CSS Goes here*/
 
+/* Daisy UI default variable overrides */
+:root {
+  --rounded-box: 1rem;        /* border-radius for cards and other big elements */
+  --rounded-btn: 0.5rem;      /* border-radius for buttons and similar elements */
+  --rounded-badge: 1.9rem;    /* border-radius for badge and other small elements */
+
+  --animation-btn: 0.25s;     /* bounce animation time for button */
+  --animation-input: 0.2s;     /* bounce animation time for checkbox, toggle, etc */
+
+  --padding-card: 2rem;       /* default card-body padding */
+
+  --btn-text-case: uppercase; /* default text case for buttons */
+  --navbar-padding: 0.5rem;    /* default padding for navbar */
+  --border-btn: 2px;          /* default border size for button */
+}
+
 h1 {
   @apply text-4xl tracking-tighter mb-3 text-center lg:text-7xl;
 }

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -35,5 +35,42 @@ module.exports = {
   variants: {
   },
   plugins:
-    [require("@tailwindcss/typography")],
+    [
+      require("@tailwindcss/typography"),
+      require('daisyui'),
+
+    ],
+  daisyui: {
+    themes: [
+      {
+        'odevs': {                          /* your theme name */
+            'primary' : '#0b3b59',           /* Primary color */
+            'primary-focus' : '#08293e',     /* Primary color - focused */
+            'primary-content' : '#ffffff',   /* Foreground content color to use on primary color */
+
+            'secondary' : '#7eadbf',         /* Secondary color */
+            'secondary-focus' : '#658a99',   /* Secondary color - focused */
+            'secondary-content' : '#ffffff', /* Foreground content color to use on secondary color */
+
+            'accent' : '#06b6d4',            /* Accent color */
+            'accent-focus' : '#0891b2',      /* Accent color - focused */
+            'accent-content' : '#ffffff',    /* Foreground content color to use on accent color */
+
+            'neutral' : '#3d4451',           /* Neutral color */
+            'neutral-focus' : '#2a2e37',     /* Neutral color - focused */
+            'neutral-content' : '#ffffff',   /* Foreground content color to use on neutral color */
+
+            'base-100' : '#f9fafb',          /* Base color of page, used for blank backgrounds */
+            'base-200' : '#f2f2f2',          /* Base color, a little darker */
+            'base-300' : '#f5f5f5',          /* Base color, even more darker */
+            'base-content' : '#1f2937',      /* Foreground content color to use on base color */
+
+            'info' : '#2094f3',              /* Info */
+            'success' : '#009485',           /* Success */
+            'warning' : '#ff9900',           /* Warning */
+            'error' : '#dc2626',             /* Error */
+        },
+      },
+    ],
+  },
 };
-Original file line number
+Diff line change
@@ Expand Up / @@ -12,7 +12,6 @@ @@
     </div>
     <img src="/static/img/bg.jpg" class="justify-items-end  w-1/4 rounded-lg"/>
     </div>
-    <hr>
     <div class="mx-10 px-4 mt-10">
     <ul class=""><h3>Orlando Devs Board of Directors</h3>
     <li>
@@ Expand Down @@