Skip to content
OverviewSolutions
11
Comments
2
Jeremy Ng
@lanechanger

All comments

  • Jeremy Ng•200
    @lanechangerSubmitted over 3 years ago

    Hi everyone,

    Thanks for checking my solution out.

    Had a question regarding the error message. I implemented it by having its visibility set to none and then just "turning it on" if needed. This way I can plan for the space that it takes when I do the layout around it. But was wondering if that's best practice or it's better to do it by display: none and adjusting the space as needed.

    Jeremy

    SMACSS'ish design with hidden error message

    3
    Jeremy Ng•200
    @lanechangerPosted over 3 years ago

    Oops request button is wrapping over to a new line for some reason, going to fix that and the reported issues first!

    Edit: ok, should be good now!

    0
  • Jeremy Ng•200
    @lanechangerSubmitted almost 4 years ago

    Update as of 1/31/2021:

    • 0386156 2021-01-31 | style: changed all px units to rem (HEAD -> master, origin/master)
    • 2dcb74f 2021-01-31 | refactor: shared style between cta and info headers
    • 80c529c 2021-01-31 | chore: added vendor prefixes
    • 761671e 2021-01-31 | style: sorted CSS properties by alphabetical order
    • 23a149c 2021-01-31 | style: removed unused variables
    • ec29072 2021-01-31 | refactor: removed the div wrapping around the main app and its associated styling and moved them back into .main-app
    • add34b1 2021-01-31 | style: changed all uppercase references of CTA to lowercase
    • ff33695 2021-01-31 | fix: removed hard coded height on the app so the app scales in height as new list items are added to Why Us section
    • 312cf0c 2021-01-31 | refactor: moved list-style-type: none from the <ul> to the <li> in Why Us section
    • 03ab619 2021-01-31 | fix: changed the why us section from a paragraph to a ul

    Original post as of 1/30/2021:

    1. I followed along using the Figma sketch file and it feels like cheating. They straight up have the CSS rules on the right side in Figma. It feels like cheating, is this how it's done on the job? Or have I been spending way more time than I should trying to figure out pixel perfect sizing and exact color values when that is really just sweating the small stuff and I am better off focusing on bigger concepts?

    2. How is my BEM naming style? Are there places that I should be looking to substitute with element naming instead? Am I abusing the element naming scheme too much?

    3. I didn't feel great about how I've centered my app using Flex as align-items: center didn't work so well when the app height > viewport height because then the top and bottom of the app got cut off. Any suggestions there?

    Practicing mobile-first SASS with BEM from Figma sketch v1.1

    2
    Jeremy Ng•200
    @lanechangerPosted almost 4 years ago

    Thank you so much for taking the time out to check out my newbie solution Matt! I will take a look at that article.

    That's a good point regarding the re-usable classes. I've been checking for it within each section but haven't checked for it across the different sections.

    And ha, for the vertical centering, I was trying to do height: min(100vh, 100%) and trying to make that work before settling on using media query but duh, I should have been using the min-height property!

    Thanks for the bonus advice about the listing, very good point. I will look out for those in the future!

    0