-
Notifications
You must be signed in to change notification settings - Fork 41
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
14 changed files
with
324 additions
and
75 deletions.
There are no files selected for viewing
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1 +1 @@ | ||
| version: 5 | ||
| version: 6 |
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,9 @@ | ||
| {% if site.safe == true %} | ||
| <script async src="https://www.googletagmanager.com/gtag/js?id=UA-105091131-1"></script> | ||
| <script> | ||
| window.dataLayer = window.dataLayer || []; | ||
| function gtag(){dataLayer.push(arguments);} | ||
| gtag('js', new Date()); | ||
| gtag('config', 'UA-105091131-1'); | ||
| </script> | ||
| {% endif %} |
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
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
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
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,206 @@ | ||
| --- | ||
| layout: none | ||
| --- | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="utf-8"> | ||
| <title>Raster grid examples</title> | ||
| <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1"> | ||
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | ||
| <link rel="stylesheet" href="../raster.css?v={{site.data.info.version}}"> | ||
| <style> | ||
|
|
||
| :root { | ||
| --fontSize: calc(100vh / 94); | ||
| --margin: 5rem; | ||
| } | ||
| @media only screen and (max-width: 1000px) { :root { | ||
| --fontSize: calc(100vmin / 70); | ||
| }} | ||
|
|
||
| html { | ||
| background: #111; | ||
| background-image: linear-gradient(4deg, #111111, #141414); | ||
| background-size: 100%; | ||
| background-attachment: fixed; | ||
| color: rgba(252,252,252,0.99); | ||
| } | ||
| @media print { | ||
| html { background: white } | ||
| } | ||
| body { padding: 0 0 3rem 0 } | ||
|
|
||
| footer { margin: var(--margin) } | ||
|
|
||
| .flex-h { flex-wrap: wrap; justify-content: center } | ||
| .black { color: black; } | ||
|
|
||
| .noise { | ||
| background-image: url(noise512.png); | ||
| background-size: 256px; | ||
| opacity: 0.02; | ||
| pointer-events: none; | ||
| position: fixed; | ||
| top:0; | ||
| left:0; | ||
| right:0; | ||
| bottom:0; | ||
| } | ||
| @media print { | ||
| .noise { display:none; } | ||
| } | ||
|
|
||
| .poster { | ||
| width: 60rem; | ||
| height: 84rem; | ||
| background: #555; | ||
| margin: var(--margin); | ||
| box-sizing: border-box; | ||
| flex: 0 0 auto; | ||
| box-shadow: 0px 2px 8px black; | ||
| } | ||
| @media print { | ||
| .poster { | ||
| box-shadow: none; | ||
| page-break-before: always; | ||
| page-break-after: always; | ||
| page-break-inside: avoid; | ||
| break-before: always; | ||
| break-after: always; | ||
| break-inside: avoid-page; | ||
| } | ||
| } | ||
|
|
||
| .poster1 { | ||
| background: #FEED01; | ||
| background-image: linear-gradient(175deg, #FEED01, #F9E010); | ||
| color: rgba(0,0,0,0.9); | ||
| } | ||
|
|
||
| .poster2 { | ||
| background: #555; | ||
| background-image: | ||
| linear-gradient(20deg, rgba(255, 0, 0, 0.02), rgba(0, 255, 0, 0.03)), | ||
| linear-gradient(175deg, #555, #555960); | ||
| } | ||
|
|
||
| </style> | ||
| </head> | ||
| <body> | ||
| <div class=noise></div> | ||
| <div class="flex-h"> | ||
|
|
||
|
|
||
| <grid columns=8 class="poster poster1 padding1"> | ||
| <c span=row><br></c> | ||
| <c span=1-4> | ||
| <h1 class="large right" style="font-weight:500;padding-right:4rem"> | ||
| International<br> | ||
| Typographic | ||
| </h1> | ||
| </c> | ||
| <c span=5-7> | ||
| <h1 class=large style="font-weight:500"> | ||
| <br> | ||
| Style | ||
| </h1> | ||
| </c> | ||
|
|
||
| <c span=3+2 class="h5 right" style="padding-right:4rem"> | ||
| Aka Swiss Style | ||
| </c> | ||
|
|
||
| <c span=5-7> | ||
| <p> | ||
| The International Typographic Style, also known as the Swiss Style, is a graphic design style that emerged in Russia, the Netherlands, and Germany in the 1920s and was developed by designers in Switzerland during the 1950s. | ||
| </p> | ||
| <p> | ||
| The International Typographic Style has had profound influence on graphic design as a part of the modernist movement, impacting many design-related fields including architecture and art. It emphasizes cleanness, readability, and objectivity. | ||
| </p> | ||
| </c> | ||
|
|
||
| <c span=5.. style="font-size:4rem;font-weight:200;margin-left:-0.2em"> | ||
| ↓ | ||
| </c> | ||
|
|
||
| <c span=1-4> | ||
| <h1 class=xxxlarge style="font-weight:800;line-height:0.9"> | ||
| 1920<br> | ||
| 1959 | ||
| <!-- <span style="font-weight:300;letter-spacing:0.3rem">1959</span> --> | ||
| </h1> | ||
| </c> | ||
| <c span=2 class=h3 style="line-height:1.5;padding-top:0.7rem;font-weight:500"> | ||
| the solution to the design problem should emerge from its content | ||
| </c> | ||
|
|
||
| <c span=1-2 class=xsmall style="height:2rem"> | ||
| Akzidenz Grotesk<br> | ||
| Univers<br> | ||
| Neue Haas Grotesk<br> | ||
| Helvetica | ||
| </c> | ||
| <c span=2 class=xsmall style="height:2rem"> | ||
| Basel School of Design<br> | ||
| Kunstgewerbeschule Zürich<br> | ||
| McGraw-Hill<br> | ||
| MIT | ||
| </c> | ||
| <c span=2 class=xsmall style="height:2rem"> | ||
| Ernst Keller<br> | ||
| Josef Müller-Brockmann<br> | ||
| Rudolph de Harak<br> | ||
| Jacqueline Casey | ||
| </c> | ||
| <c span=2 class=xsmall style="height:2rem"> | ||
| Universal form of graphic expression through objective<br> | ||
| and impersonal presentation. | ||
| </c> | ||
|
|
||
| </grid> | ||
|
|
||
|
|
||
| <grid columns=4 class="poster poster2 padding1"> | ||
| <c span=3-3> | ||
| Raster<br> | ||
| Grid system | ||
| </c> | ||
| <c span=4-4> | ||
| Poster 001<br> | ||
| February 2019 | ||
| </c> | ||
| <c span=row> | ||
| <h1 class=large> | ||
| <hr> | ||
| Raster<br> | ||
| <hr> | ||
| Grid System<br> | ||
| </h1> | ||
| </c> | ||
| <c span=3-3> | ||
| Minimal and straight-forward CSS grid system utilizing | ||
| descriptive HTML rather than semantic CSS. | ||
| </c> | ||
| <c span=4-4> | ||
| Grids lend themselves really well to device-size responsive design. The span-s attribute defines alternate layout when your design is presented on a small screen. This makes designing for large and small screens really easy. | ||
| </c> | ||
| <c span=3+1 class="bottom"> | ||
| 4 column grid | ||
| </c> | ||
| <c class="bottom"> | ||
| HTML | ||
| </c> | ||
| </grid> | ||
|
|
||
|
|
||
|
|
||
| </div> | ||
|
|
||
| <footer> | ||
| <a href="./" style="margin-left:-0.15rem">← Back to examples</a> | ||
| </footer> | ||
|
|
||
| {% include analytics.html %} | ||
| </body> | ||
| </html> |
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
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
Oops, something went wrong.