Ff7 Tailwindcss

FF7 Tailwind CSS

What is this? This is FF7 TailwindCSS - a set of components and default stylings built on top of TailwindCSS. Landing page: https://suspicious-goldstine-a7759a.netlify.app/

How do I use it?

1. First, install tailwindCSS (https://tailwindcss.com/docs/installation) on your project, then
2. copy the content from the src/styles.css folder into your own src/styles.css file
3. ???
4. Profit!!!

• Bootstrap and other CSS frameworks are all about giving you more default styling so you can quickly set up your sites.
  • What if you wanted to encourage people to make sites that looked like FFVII?

FF7 TailwindCSS contains these features and components:

• Color:

  • ✔️ The opening screen of FF7 is mostly black and smoggy, with a flash of light-turqoise
    • I.e., black, charcoal gray, turqoise, white... default card-bg is radial darkish blue to navy blue
  • Might add cards w/ blue bg, white text

• Typography:

  • ✔️ Look through Google fonts for a free font that resembles the header and subtext of ✔️ opening screen ✔️ default text

• Spacing:

  • ✔️ Opening scene header has much space
  • ✔️ Opening scene subtext seems to have uniform spacing

• Imagery:

  • Lots of lossy JPG...?

• Required components:

  • Header
    • ✔️ black text with white outline
  • ✔️ Footer
    • status/equipment screen (full-width blue to black)
    • e.g. https://youtu.be/UIIq1hSj0GY?t=1551
  • ✔️ Anchor tag / Link styling
    • Preceded by pointing-hand icon
    • e.g. https://youtu.be/TImnKC8v41c?t=499
  • ✔️ Buttons (we recommend a few different styles
    • Card with overlapping pointer-hand icon
    • e.g. https://youtu.be/TImnKC8v41c?t=604
  • ✔️ Cards
    • Card with no overlapping pointer-hand icon
    • https://youtu.be/TImnKC8v41c?t=571
  • ✔️ Plain text styling (a few different styles
    • opening screen header
    • opening screen subtext
    • card text
  • ✔️ h1/h2/h3/h4/h5/h6 tag styling
    • hmm... having some trouble thinking of how to incorporate this...
    • I think a variety of header-sizes would compromise the theme...
      • should try it out anyways...
  • ✔️ Image
    • pointer-hand
    • logo of meteor
  • ✔️ Ordered & unordered lists
    • unordered: https://youtu.be/TImnKC8v41c?t=600
    • ordered: same as unordered, preceded by number with period ... is this how they did it? 🤔 maybe I should look into it... I feel like if I'm wrong, no one will ever notice, though... unless they read this note-to-self... 😬🤣
  • ✔️ Sections
    • width of the sections...
      • neither centered or full-width sections will feel like FF7...
      • cramming lots of stuff into a small place in style then, so it should probably be centered
      • https://youtu.be/TImnKC8v41c?t=648

• The next step:

  • Landing page
    • Has a beautiful & clearly worded home page that explains what your project is all about.
    • Has a section that documents all your components. See https://material.io/components/date-pickers
    • Has 3 different sample pages, with different layouts that use your design system
    • Links back to your project on Mintbean