Quad Posts - Answer Overflow

Quad

Posts Comments

KPCKevin Powell - Community

•Created by Quad on 6/2/2024 in #ui-ux

Updating Portfolio Looking for some feedback on the format

47 replies

KPCKevin Powell - Community

•Created by Quad on 5/15/2024 in #ui-ux

Fast Food Tracker - Layout & Feature Ideas

Working on a fun portfolio project as well as learning React with this and experimenting a bit with how I build it. I ended up creating a fast food tracker where i'm currently only using a json & chart.js to import some data about price history and show for each category as well as do basic data values on it. Would like feedback or even cool ideas that you'd maybe want to see from a site like this. As its for fun and to learn. Things on the list - More charts & data visualization (e.g., comparing indexed values over chains & items or meats etc) - Other categories I've set up assets for a bunch like fish tenders w/e - Potential user submitted data when I figure out React a bit more. - Maybe learn more about mapping integration and turn it into Fastfood Waze :shrug:

56 replies

KPCKevin Powell - Community

•Created by Quad on 12/17/2023 in #front-end

How do you efficiently class text elements in CSS?

Summary: How do you generally go about grouping text elements in css? Hey, I'm working on my portfolio website and doing it with HTML/CSS to help differentiate as a Product Designer. I'm relatively new with CSS but one of the things that I was wondering is how to go about text and classes I initially started off with using a root font sizing and things of that sort so I can just edit the root on screen dimension changes.

    --root-font-size: 1rem;
    --small-font-size:calc(var(--root-font-size) * 0.75);
    --regular-font-size: var(--root-font-size);
    --accent-font-size:calc(var(--root-font-size)*1.25);
    --subhead-font-size: calc(var(--root-font-size) * 1.5);
    --header-font-size: calc(var(--root-font-size) * 2);

    --root-font-size: 1rem;
    --small-font-size:calc(var(--root-font-size) * 0.75);
    --regular-font-size: var(--root-font-size);
    --accent-font-size:calc(var(--root-font-size)*1.25);
    --subhead-font-size: calc(var(--root-font-size) * 1.5);
    --header-font-size: calc(var(--root-font-size) * 2);

After this I began creating relatively straightforward classes. As I was just following how Figma was going about this (since I created the mock).

.name-font  {
    font-size:var(--special-font-size);
    color: var(--text-color-heading);
    font-family: var(--special-font-family);
    font-weight:var(--font-weight-semibold);
}

.name-font  {
    font-size:var(--special-font-size);
    color: var(--text-color-heading);
    font-family: var(--special-font-family);
    font-weight:var(--font-weight-semibold);
}

Later on after I got a bit more comfortable I began playing around with styling of this sort, to try and deal with multiple classes. At this point instead of classing everything, I'm beginning to look for re-usability and trying to minimize the number of classes in the code.

.case-study-font {
    font-family: var(--regular-font-family);
    line-height: 1.5;
}

.case-study-font > h1 {
    color:var(--text-primary-clr);
    font-size:var(--accent-font-size);
    font-weight:var(--font-weight-semibold);
    letter-spacing: 0.9px;
}

.case-study-font > p {
    color: var(--text-tert-clr);
    font-size:var(--regular-font-size);
    font-weight: var(--font-weight-medium);
}

.case-study-font > ul {
    color: var(--text-tert-clr);
    font-size:var(--regular-font-size);
    font-weight: var(--font-weight-medium);
    padding-left: 40px;
    list-style-type: disc;
    padding: var(--space-S) var(--space-M);
}

.case-study-font {
    font-family: var(--regular-font-family);
    line-height: 1.5;
}

.case-study-font > h1 {
    color:var(--text-primary-clr);
    font-size:var(--accent-font-size);
    font-weight:var(--font-weight-semibold);
    letter-spacing: 0.9px;
}

.case-study-font > p {
    color: var(--text-tert-clr);
    font-size:var(--regular-font-size);
    font-weight: var(--font-weight-medium);
}

.case-study-font > ul {
    color: var(--text-tert-clr);
    font-size:var(--regular-font-size);
    font-weight: var(--font-weight-medium);
    padding-left: 40px;
    list-style-type: disc;
    padding: var(--space-S) var(--space-M);
}

Overall my question is how does an experienced dev go about grouping font classes and elements to be efficient. What are some of the things I should be doing like should I be passing colors via inherit and such?

11 replies

Gaming

Programming