1
\$\begingroup\$

I 'm trying to create a universal CSS template for global styles. I can not find unambiguous recommendations. After inspecting various sites, I have compiled the following template . I ask your advice . Thank you!

*,
*:after,
*:before {
    box-sizing: border-box;
}

html,
body {
    overflow-x: hidden;
    overflow-y: hidden;
    width: 100%;
    height: 100%;
}

html {
    font-size: 62.5%;
    // background-color: x;
}

body {
    position: relative;
    z-index: 0;
    min-height: 100%;
    color: x;
    background-color: x;
    font-family: x;
    font-size: 1.6rem;
    font-weight: x;
    font-style: normal;
    line-height: x;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
}

.wrapper {
    margin: 0 auto;
    min-width: 320px;
    padding: x;
}
\$\endgroup\$
4
  • 2
    \$\begingroup\$ What do you want to get from such universal CSS template? Have you seen normalize.css or similar ones? \$\endgroup\$
    – fracz
    Jun 12, 2016 at 8:46
  • \$\begingroup\$ Yes, I use normalize.css. Do you think that it contains everything you need to start ? Can I ask you what styles for html and body you normally use in your projects ? \$\endgroup\$
    – Ishimura
    Jun 12, 2016 at 9:02
  • \$\begingroup\$ It's bootstrap typically. Not only it normalizes the CSS but also provides you with tons of predefined nicely looking styles and components. \$\endgroup\$
    – fracz
    Jun 12, 2016 at 9:04
  • \$\begingroup\$ I try to avoid using css frameworks , but thanks for the advice \$\endgroup\$
    – Ishimura
    Jun 12, 2016 at 9:36

1 Answer 1

1
\$\begingroup\$

I can not find unambiguous recommendations. After inspecting various sites, I have compiled the following template

The canonical example domain exists for such a purpose. Here is its style declaration:

body {
    background-color: #f0f0f2;
    margin: 0;
    padding: 0;
    font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;

}
div {
    width: 600px;
    margin: 5em auto;
    padding: 50px;
    background-color: #fff;
    border-radius: 1em;
}
a:link, a:visited {
    color: #38488f;
    text-decoration: none;
}
@media (max-width: 700px) {
    body {
        background-color: #fff;
    }
    div {
        width: auto;
        margin: 0 auto;
        border-radius: 0;
        padding: 1em;
    }
}
\$\endgroup\$
2
  • \$\begingroup\$ You have presented an alternative solution, but haven't reviewed the code. Please edit to show what aspects of the question code prompted you to write this version, and in what ways it's an improvement over the original. It may be worth (re-)reading How to Answer. \$\endgroup\$ Feb 7, 2019 at 15:02
  • 1
    \$\begingroup\$ And I'm pretty sure that's not the purpose of example.org, example.com and friends - any stylesheet served by their HTTP server is purely incidental rather than pedagogic. \$\endgroup\$ Feb 7, 2019 at 15:03

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.