fixed overflow so it is a utility

saltnpixels · Feb 8, 2022 · 75e30eb · 75e30eb
1 parent e128bc4
commit 75e30eb
Show file tree

Hide file tree

Showing 4 changed files with 51 additions and 19 deletions.
diff --git a/README.md b/README.md
@@ -25,15 +25,13 @@ However, there still are a few issues. Unlike javascript, CSS still cannot be us
 
 4. Font-family CSS variable for easy changing of default body font. Change `--font-primary` to your chosen font.
 
-5. Sticky Footer. We use this [elegant solution](https://css-tricks.com/a-clever-sticky-footer-technique/) to make sure your footer is always at the bottom of the site, even when you have very little content on the page. This expects your footer to be directly in the body. If you need your footer inside a div and not directly in the body, you can view and implement these [other solutions](https://css-tricks.com/couple-takes-sticky-footer/).
+5. Sticky Footer. We use this [elegant solution](https://css-tricks.com/a-clever-sticky-footer-technique/) to make sure your footer is always at the bottom of the site, even when you have very little content on the page. This expects your footer to be directly in the body, or directly inside a `.page-wrap` element. If you need a different setup with sticky footer, you can view and implement these [other solutions](https://css-tricks.com/couple-takes-sticky-footer/).
 
-6. Setting overflow-x so there is no horizontal scrolling. We've all been there... This can happen if an item is absolute and off to the side, even if its hidden. We fix it so that it works nicely even on iOS, where the page sometimes can lose its "springiness".
-
-7. Images are responsive. All images will shrink to fit in their containers by default.
+6. Images are responsive. All images will shrink to fit in their containers by default.
 
 ## Utilities
 
-Ok, so maybe a few utilities could be helpful. Only a few! Based on most websites out there, we created 8 utility classes that can be added in optionally by including the utilities file. These provide some basic and nifty layout classes to get you started, and to get any complexity out of the way. Sizing can be changed through the variables listed down below.
+Ok, so maybe a few utilities could be helpful. Only a few! Based on most websites out there, we created **9** utility classes that can be added in optionally by including the utilities file. These provide some basic and nifty layout classes to get you started, and to get any complexity out of the way. Sizing can be changed through the variables listed down below.
 
 #### `.container-fluid`
 
@@ -59,23 +57,41 @@ Important! For elements that will be read out loud on a screen reader device, bu
 
 Very helpful for articles. Makes all items inside magically have good vertical rhythm. For some items, like headings, you may want to add styles to get those having more spacing with margins. Pairs well with container-content.
 
+#### `.page-wrap`
+
+The page wrap is a special element when dealing with overflow-x. It's useful when you have absolute items positioned off the screen, but don't want horizontal scrolling, like a hidden mobile menu. This class fixes it, so that it works nicely even on iOS, where things can get wonky. You can implement it directly on the body element, or on a div that is a direct child of body.
+
+```HTML
+<body class="page-wrap">
+		Everything....
+</body>
+
+OR
+
+<body>
+	<div class="page-wrap">
+		Everything....
+	</div>
+</body>
+```
+
 #### `.card-grid`
 
 The perfect grid of cards! Using CSS Grid can be a bit scary, so we created a grid of cards that reflow nicely and can have a min and max size, changeable through CSS variables. It's cleaner than using flexbox for grids.
 
 How to use:
 
 ```HTML
-<div class="card-grid my-elements">...</div>
+<div class="card-grid custom-class">...</div>
 ```
 
-Then in your CSS, you can override the card-grids sizing. The defaults are:
+Then in your CSS, you can override the card-grids sizing, using a custom class. The defaults are:
 
 ```CSS
-.my-elements{
+.custom-class{
   --card-min: 250px;
   --card-max: 1fr;
-  --card-stretch: auto-fill; /* can be auto-fit too */
+  --card-stretch: auto-fill; /* can also be auto-fit */
 }
 ```
 
@@ -95,7 +111,7 @@ Thats where `.container-content` makes this easy. You surround the article with
 
 ## CSS Variables
 
-There are variables found at the bottom of Crucial.CSS and utilities. You can override them in your project, or change them directly. Remember, you can also override variables inside classes and media queries. Here are all the variables:
+There are variables found at the bottom of Crucial.CSS and utilities. You can override them in your project, or change them directly. Remember, you can also override variables inside classes and media queries, which is super helpful. Here are all the variables:
 
 ```CSS
 :root {
@@ -130,6 +146,7 @@ There are variables found at the bottom of Crucial.CSS and utilities. You can ov
 - Latest Chrome
 - Latest Firefox
 - Latest Safari
+- Latest Edge
 
 ## Install With NPM
 

diff --git a/curcial.css b/curcial.css
@@ -16,6 +16,7 @@ html {
   line-height: 1.5; /* 3 */
   -webkit-text-size-adjust: 100%;
   text-size-adjust: 100%;
+  overflow-x: hidden;
 }
 
 *,
@@ -28,17 +29,16 @@ html {
    ========================================================================== */
 
 /** 
- * 1.Sticky Footer requires html and body have 100% height, so the footer stays at the bottom even when there is little content 
- * 2. overflow-x is needed on both elements to hide offscreen items.
+ * Sticky Footer requires html and body have 100% height, so the footer stays at the bottom even when there is little content 
 */
 html,
 body {
   height: 100%;
-  overflow-x: hidden;
-  transform: translate3d(0, 0, 0);
 }
 
-body > footer {
+/* .page is for if the utility is used, the footer might be inside there */
+body > footer,
+.page-wrap > footer {
   position: sticky;
   top: 100vh;
 }
@@ -47,7 +47,6 @@ body > footer {
  * 1. Remove the body margin in all browsers. 
  * 2. Add fonts 
  * 3. Add font size
- * 4. Fixes strange behavior in iOS when we set body to overflow-x hidden
  */
 
 body {

diff --git a/demo.html b/demo.html
@@ -67,15 +67,14 @@
 
       .element {
         position: absolute;
-        right: -100px;
+        right: -90px;
         width: 100px;
         height: 100%;
         background: blue;
       }
     </style>
   </head>
-  <body class="page">
-    <div class="element">hello</div>
+  <body class="page-wrap">
     <header>
       <div class="box"><p>I am a box</p></div>
     </header>

diff --git a/utilities.css b/utilities.css
@@ -21,6 +21,23 @@
   word-wrap: normal !important; /* Many screen reader and browser combinations announce broken words as they would appear visually. */
 }
 
+/* 
+Special div to fix overflow-x on absolute items.
+ This should be at the top level item inside body
+ */
+.page-wrap {
+  overflow-x: hidden;
+}
+
+div.page-wrap {
+  position: relative;
+  min-height: 100%;
+}
+
+body.page-wrap {
+  transform: translate3d(0, 0, 0);
+}
+
 /* basic padded container, centered with a max-width */
 .container {
   width: 100%;