Genesis 2.0 / HTML 5 – CSS tips please!

Community Forums Forums General Discussion Genesis 2.0 / HTML 5 – CSS tips please!

This topic is: resolved

Tagged: , ,

This topic contains 4 replies, has 3 voices, and was last updated by  cdils 9 months, 4 weeks ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #68441

    jhguynn
    Participant
    Post count: 216

    I’m using Executive Pro and discovered that I needed to modify the following CSS code to get my intended result:

    .home-top { /* note: this is the child theme’s original css code, before my edit */
    background-color: #fff;
    clear: both;
    overflow: hidden;
    padding: 60px 30px 0;
    padding: 6rem 3rem 0;
    }

    I have some questions:

    (1) why is padding articulated in terms of both both ‘px’ and ‘rem’? And is rem always px times 10?
    (2) I’m accustomed to expressing padding amounts as a quartet: top, right, bottom, left. When there are only 3 variables, what is the logic here? What about when only two digits are provided?
    (3) Overflow: hidden … what does this accomplish?

    Thanks for the help!

    #68454

    cdils
    Participant
    Post count: 421

    Hi there,

    Good questions.

    1) As of Genesis 2.0, all font and other height/width dimensions are set in both pixels and rems (pixels are there for fallback support on browsers that might not support rem). And yes, the math is always px times 10. :) In the case of fonts, you’ll see this is your stylesheet as the baseline:

    html {
    	font-size: 62.5%; /* 10px browser default */
    }

    2) You’re right about padding and margins (and borders and other elements the have TOP RIGHT BOTTOM LEFT) specs. You can shorthand CSS on these by specifying just TR (in which BL just inherits the others, respectively). In the case of TRB, it’s assumed that L will pick up the same definition as R.

    3) Overflow hidden is used in the event that a container’s content “overflows” the space designated. If overflow is hidden it just means that you can bank on that container’s size.

    Those might be terrible explanations. Feel free to ask followup questions if I didn’t explain it well.

    Cheers,
    Carrie


    Have you been helped in this forum? Pay it forward and answer someone else’s question. I bet you’ll know the answer to at least one question. :)

    I host a weekly Genesis-focused podcast called Genesis Office Hours. I tweet @cdils.

    #68462

    jhguynn
    Participant
    Post count: 216

    Carrie: Spectacular answers to my questions. Very helpful. Thanks!

    #68563

    Gary Jones
    Moderator
    Post count: 686

    Alternative / further explanations:

    1) It’s not specifically “As of Genesis 2.0…” – the technique of using 62.5% base font size has been around for years – commonly to make setting font sizes in em‘s easier. While it makes the maths easier, there’s some discussion about it, since it means having to set a font-size on elements where you’d previously let the browser default be used instead, meaning more code to maintain. rem (root em) units are newer, and instead of relating to the current font size inherited from the parent, it relates to the root element (html), so that nesting elements with 1.2em and then 1.5em doesn’t end up with 1.8em etc. Since IE8 and below doesn’t support rem units, a fallback of px is also given, for now. You could of course consider just putting the px fallback values into an ie-style.css and referencing that with conditional comments, to keep style.css cleaner.

    2) There’s also the shorthand with a single digit of course, where all values use the same value.
    TRB = TRBR
    TR = TRTR
    T = TTTT

    3) While Carries explanantion is correct, the pragmatic answer here is that it ensures the containing element does visually wrap around it’s floated contents.


    Changes in Genesis 2.1 – the ultimate guide to every single change in Genesis Framework 2.1 and 2.1.1 (all 88 of them!) | @GaryJ

    #68613

    cdils
    Participant
    Post count: 421

    Gary – my comment about “As of Genesis 2.0″ referred to the use of 62.5% base font size in Genesis themes, not the web in general. :)

    Thanks for the added detail!

    Cheers,
    Carrie


    Have you been helped in this forum? Pay it forward and answer someone else’s question. I bet you’ll know the answer to at least one question. :)

    I host a weekly Genesis-focused podcast called Genesis Office Hours. I tweet @cdils.

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.