make_css_less_painful.md

What is this??

This is about writing clean CSS for group projects.

Since we're gonna work as a team, it's important to have consistent base styles that everyone will use. So our UI will look the same regardless of who wrote the CSS code. There will not be differences between Student A's button and Student B's button. They will share common class names and CSS values.

One student writes all these values based on the design at the start of the project, pushes to Github. Others always use these CSS variables and utitlity classes for their JSX components.

Create VARIABLES for the following:

border-radius (in px)
card-spacing (in px or rem)
purple-900
purple-700
purple-300
red-900
red-700
green-900
green-700
gray-700
gray-500
gray-300
gray-100
white
black

(we can add more stuff as we go)

Create utility CLASSES for the following:

(add styling to these classes based on the Figma design. Some ideas are given here)

btn (background removed, base border removed, proper padding added + font: inherit)
btn-primary (different background/hover effects, colors from CSS variables)
btn-secondary (different background/hover effects, colors from CSS variables)
btn-outline (border, color from CSS variables)
btn-danger (different background, color from CSS variables)
btn-icon (square)
input (font: inherit, proper padding, focus styles and a border - every color/border values comes from CSS variables)
card (padding and a border + border-radius, all read from CSS variables)
container (will use card-spacing for padding, have max-width and center content with auto margins)
badge (small paddings, smaller font-size)

Some useful resets

a tag should be displayed inline-block
img tag should be displayed block, and max-width must be limited to 100%
Remove margin from body
Add line-height: 1.4 for more readable text
For inputs, set width to 100%
Font-family on body should be sans-serif

Also very very important

Always start the main CSS file with this code block * { box-sizing: border-box; }
For every repeated value, only use CSS variables, always reference already created CSS variables
For consistency, always use hsl color format for colors
Always use rem units for font size (we can use sass functions to convert px value to rem. But general formula is rem_value = px_value / 16. So if I want text to be sized 30px, I will write font-size: 1.875rem)
Never write: outline: none on any element

Some values to be added in CSS variables

Keep adding more CSS variables as you need them

--border-radius: 5px;
--card-spacing: 16px;

--purple-900: hsl(271, 81%, 46%);
--purple-700: hsl(271, 81%, 56%);
--purple-300: hsl(271, 81%, 86%);

--red-900: hsl(0, 84%, 40%);
--red-700: hsl(0, 84%, 60%);

--green-900: hsl(142, 76%, 26%);
--green-700: hsl(142, 76%, 36%);

--gray-700: hsl(0, 0%, 20%);
--gray-500: hsl(0, 0%, 50%);
--gray-300: hsl(0, 0%, 85%);
--gray-100: hsl(210, 40%, 96%);
--gray-50: hsl(0, 0%, 97%);

--white: hsl(0, 0%, 100%);
--black: hsl(0, 0%, 0%);

What's next?

Before you create feature branches for your tasks, we need to make sure this design system is done properly. In HomePage.jsx, start adding HTML elements like button, input, label, div (for a card), span (for badges) and give them appropriate class names (that you created above). Put everything in .container div.

The idea is to just display all the components on the home page. This is just the setup phase and we want to see if all of them look similar to the design.

So your HomePage.jsx code should look like this:

function HomePage() {
  return (
    <div className="container">
      <h1>Home</h1>
      <div className="card">
        <button className="btn btn-primary">Click Me</button>
        <button className="btn btn-outline">Click Me</button>
        <button className="btn btn-secondary">Click Me</button>
      </div>

      <br />
      <div className="card">
        <div>
          <label htmlFor="username">Username</label>
          <input type="text" id="username" />
        </div>

        <br />

        <div>
          <label htmlFor="story">Story</label>
          <textarea rows={5} id="story"></textarea>
        </div>
      </div>

      <br />
      <span className="badge badge-danger">TRUE</span>
      <span className="badge badge-success">FALSE</span>
    </div>
  )
}

And when run locally, we should see similar result:

Only once we know all the components look good and consistent, we can start working on individual tasks.

font: https://fonts.google.com/specimen/Geist

ixtk/make_css_less_painful.md