Anthony Wilhelm awshout
hatefulcrawdad
/ foundation4-grid.html
Created
December 13, 2012 21:39
We've been going back and forth on how to best approach our grid for Foundation 4.0. We had a lot to consider since we're moving towards mobile-first with this release. After about 4 iterations, we wanted to post what we've got to get feedback from our beloved Scss community. This is the Scss version. From here we'll be building new semantic gri…
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>Foundation 4 Grid Test</title> | |
| <link rel="stylesheet" type="text/css" href="style.css"> | |
| </head> | |
| <body> | |
| <!-- Disregard these styles, they are for giving rows and columns a temporary BG color for better visibility --> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* Preview hover styles */ | |
| #theme_list ul li { | |
| position:relative; | |
| } | |
| .product-preview{ | |
| position:absolute; | |
| left:100%; | |
| top:-1px; | |
| margin-left:1px; | |
| background:#222; |
hatefulcrawdad
/ ie8-grid-foundation-4.css
Last active
September 9, 2021 18:47
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* The Grid ---------------------- */ | |
| .lt-ie9 .row { width: 940px; max-width: 100%; min-width: 768px; margin: 0 auto; } | |
| .lt-ie9 .row .row { width: auto; max-width: none; min-width: 0; margin: 0 -15px; } | |
| .lt-ie9 .row.large-collapse .column, | |
| .lt-ie9 .row.large-collapse .columns { padding: 0; } | |
| .lt-ie9 .row .row { width: auto; max-width: none; min-width: 0; margin: 0 -15px; } | |
| .lt-ie9 .row .row.large-collapse { margin: 0; } | |
| .lt-ie9 .column, .lt-ie9 .columns { float: left; min-height: 1px; padding: 0 15px; position: relative; } | |
| .lt-ie9 .column.large-centered, .columns.large-centered { float: none; margin: 0 auto; } |
hatefulcrawdad
/ foundation4-semantic-grid.html
Last active
October 18, 2023 13:27
Our mobile first grid mixins for Foundation 4.0. Comments welcome.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <meta name="viewport" content="width=device-width" /> | |
| <title>Foundation Semantic Grid Testing</title> | |
| <link rel="stylesheet" href="styles.css"> | |
| </head> | |
| <body> |