Skip to content

OrlandoDevs/odevs-web

Repository files navigation

Orlando Devs Web Site

Getting Started

The Orlando Devs website is built on top of https://www.netlify.com/Netlify. To get started you will need to install the Netlify CLI tool on your local environment.

Once packages are installed run the Netlfiy dev stack:

  • netlify dev
  • npx decap-server to run the local cms

Local Demo

Run tests


Live Demo

https://odevs.netlify.app/

Style Guide

To maintain styling consistency we are using daisy UI, 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 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:

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, 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.

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:
<button class="btn">Button</button>
  1. You can use daisyUI utility classes:
<button class="btn btn-primary">Three</button>
<button class="btn btn-secondary">Two</button>
<button class="btn btn-accent btn-outline">Three</button>
  1. You can use Tailwind's utility classes:
<button class="btn rounded-full">One</button>
<button class="btn rounded-none px-16">Two</button>
  1. You can customize components on your CSS file, using Tailwind's @apply directive.
.btn {
  @apply rounded-full;
}
  1. You can also modify the theme directly in 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:

Community Groups

Group information is populated in the odevs/src/_data/groups.yaml file. The standard fields are name and description. At a minimum, please include this data in a pull request to have your group's data populate in its community group page. Pages are automatically generated and served at /groups/your-group-name/. If you have a Meetup Link, be sure to include it under the meetup_url key.

About

Orlando Developers Website - Version 2

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Sponsor this project

Packages

No packages published