UI Foundations

A premium, beautifully designed React UI Kit for MUI that looks great out of the box, with SaaS components included.

By @gill_kyle

[Kyle Gill @gill_kyle]

Landing page available in @uifoundations Kit

- Hero
- Features
- Pricing
- FAQ

[UI Foundations @uifoundations]

See it here: https://t.co/REJJYnR6vn

[UI Foundations @uifoundations]

UI Foundations Kit v1.0.7 released · Marketing SaaS landing page

- Hero
- Pricing cards
- Features + Stats
- FAQ blocks

Check it out on the MUI store.

[UI Foundations @uifoundations]

Preview here: https://t.co/aFFvBNZsh9

[UI Foundations @uifoundations]

UI Foundations Kit v1.0.7 released · Marketing SaaS landing page

- Hero
- Pricing cards
- Features + Stats
- FAQ blocks

Check it out on the MUI store.

[Kyle Gill @gill_kyle]

📃 Landing page

@uifoundations x @MUI_hq

[UI Foundations @uifoundations]

UI Foundations Kit v1.0.5 released

- Checkout layout
- Auth layouts (side-by-side, sign-up, sign-in)
- Combobox examples

https://t.co/1OjHzVnWI0

[Kyle Gill @gill_kyle]

📣 UI Foundations Kit is live on the MUI Store!

Beautifully themed:
⋅ MUI Charts
⋅ Data Grids
⋅ Comboboxes
⋅ and just about anything else

Get everything pre-built as a dashboard starter template, or copy/paste from a library of dependency free components.

[Kyle Gill @gill_kyle]

Jumping back into @uifoundations after some busy months and decided to drop in a logo section on the landing page

[UI Foundations @uifoundations]

📣 Just Released: Color Module

Including lessons on:
📊 patterns in color systems like HSL
🔅 perceived brightness calculations
🎨 color scales and palettes

You can view it now in the dashboard on https://t.co/UbXq50Tmp0

[Kyle Gill @gill_kyle]

I took this concept and charted perceived brightness for every possible hue value, which results in a graph where you can see how the color wheel changes as you desaturate or lighten it.

Every possible color in the HSL space can be represented here! 🤩

[Kyle Gill @gill_kyle]

👁 We perceive a color's brightness differently depending on how much red, green, and blue light is in it.

I decided to make a perceived brightness calculator for @uifoundations to calculate how different colors appear to the eye!

Our eyes perceive blue light as the dimmest.

[Kyle Gill @gill_kyle]

🎨 There's a difference between a color scale and a color palette.

Both are important in a design system, and understanding the distinction will help you find better harmony in your app's colors.

A scale is a set of stepped colors from a base color:

#uifoundations

[Kyle Gill @gill_kyle]

💡UI Tip

Soften an interface with multiple shades and tints.

You should constrain the colors you use to a set of tokens, but you need more than 5 colors to build a full app. Help yourself by creating at least one shade (◾️) and tint (◽️) for each color.

#uifoundations

[Kyle Gill @gill_kyle]

💡 UI Tip

An easy trick to make things look cleaner: add whitespace.

If things just don't feel right, add more whitespace between items to give more breathing room.

[Kyle Gill @gill_kyle]

For the colors module of @uifoundations I built a functioning piano in the browser with React, it even plays chords! 😁

[Kyle Gill @gill_kyle]

💡UI Tip

Think of color palettes like musical scales, you can take any color on its own and use it, or combine colors in harmonious ways.

Combinations of color in a UI produce harmony just like chords do in a scale!

#uifoundations

[Kyle Gill @gill_kyle]

💡 UI Tip

HSL is a great choice as a developer for choosing colors. It's easier to see why when you line up similar colors in Hex or RGB against HSL.

Hex colors can't be understood at a glance like HSL can, which only require tweaking one value.

@uifoundations #uifoundations

[Kyle Gill @gill_kyle]

Been building individual color components for each of these definitions in the curriculum for @uifoundations that help explain color 🔧

Seeing colors update as you drag a slider is a lot clearer to me than reading how it might change as text.

[Jacky Efendi @jackyef__]

In the spirit of Christmas 🎅, I'm looking to give 2 people @uifoundations course as part of my giving back 🙂

Cukup like, retweet dan reply dengan alasan kamu mengapa kamu mau course ini.

Kalau kamu gak butuh ini, I'd still appreciate the RT for reach ☺️

More about this 👇

[Kyle Gill @gill_kyle]

Use up that education budget (@uifoundations) 👻
👇👇👇
https://t.co/iYXvBjpbEg

Almost done with module 3 and price will go up!