Skip to content

Instantly share code, notes, and snippets.

@saltnpixels

saltnpixels/base-layout.css

Last active April 28, 2021 16:29
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save saltnpixels/59e0efd5382f4b7dbc2d4b5a2dd0cbdc to your computer and use it in GitHub Desktop.
Save saltnpixels/59e0efd5382f4b7dbc2d4b5a2dd0cbdc to your computer and use it in GitHub Desktop.
Download ZIP
CSS Base Layout
Raw
base-layout.css
html {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
font-size: 62.5%;
}
body {
font-size: 1.6rem;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
/* stylelint-disable-next-line */
font-smoothing: antialiased;
}
/* stylelint-disable */
*,
*::before,
*::after {
/* Inherit box-sizing to make it easier to change the property for components that leverage other behavior; see http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
-moz-box-sizing: inherit;
-webkit-box-sizing: inherit;
box-sizing: inherit;
}
.site {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.site-content {
flex: 1 0 auto;
overflow: hidden;
}
/*--------------------------------------------------------------
# Accessibility
--------------------------------------------------------------*/
.screen-reader-skip-to-here {
clip: rect(1px, 1px, 1px, 1px);
height: 0;
overflow: hidden;
width: 0;
}
.screen-reader-text {
background-color: black;
clip: rect(1px, 1px, 1px, 1px);
color: white;
height: 1px;
overflow: hidden;
position: absolute !important;
width: 1px;
word-wrap: normal !important; /* Many screen reader and browser combinations announce broken words as they would appear visually. */
}
.screen-reader-text:focus {
background-color: #f1f1f1;
-webkit-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
clip: auto !important;
color: #21759b;
display: block;
font-size: 1.4rem;
font-weight: 700;
height: auto;
left: 5px;
line-height: normal;
padding: 15px 23px 14px;
text-decoration: none;
top: 5px;
width: auto;
z-index: 100000; /* Above WP toolbar. */
}
/*--------------------------------------------------------------
# Image responsive
--------------------------------------------------------------*/
img, svg {
height: auto;
max-width: 100%;
}
.icon {
height: 1em;
position: relative;
width: 1em;
& path {
fill: currentColor;
}
}
@saltnpixels
Copy link
Author

Fast and easy set up of the web page.
Expects normalize.css to be added already.

This expects a page markup of:

<body>
  <div class="site">
    <div class="site-top">
      <nav></nav>
      ....
    </div>

    <div class="site-content">
      ... Main site stuff ...
    </div>

    <div class="site-footer">
    </div>
   
  </div>
<body>

What this does:

  • Make sure everything is inside a div inside body so no weird things happen on ios safari.
  • sticky footer auto configured at bottom of screen even when there is very little content
  • Adds screen-reader
  • sets box sizing
  • sets up responsive images and svg and icons

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment