-
Notifications
You must be signed in to change notification settings - Fork 0
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
1 parent
308ee7b
commit 060a29d
Showing
1 changed file
with
206 additions
and
0 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 |
|---|---|---|
| @@ -0,0 +1,206 @@ | ||
| <!DOCTYPE html> | ||
| <html> | ||
|
|
||
| <head> | ||
| <meta charset="utf-8"> | ||
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | ||
| <title>Matt's CSS Boilerplate</title> | ||
| <meta name="description" content="A simple, modern CSS boilerplate"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1"> | ||
| <!-- | ||
| <link rel="stylesheet" href="src/_01-tokens.css"> | ||
| <link rel="stylesheet" href="src/_02-reset.css"> | ||
| <link rel="stylesheet" href="src/_03-core.css"> | ||
| <link rel="stylesheet" href="src/_04-forms.css"> | ||
| <link rel="stylesheet" href="src/_05-layout.css"> | ||
| <link rel="stylesheet" href="src/_06-animation.css"> | ||
| <link rel="stylesheet" href="src/_07-components.css"> | ||
| <link rel="stylesheet" href="src/_08-utilities.css"> | ||
| --> | ||
| <link rel="stylesheet" href="index.css"> | ||
| </head> | ||
|
|
||
| <style> | ||
| .local_top-header, | ||
| .local_footer { | ||
| background-color: var(--color_text--default); | ||
| color: var(--color_background--surface); | ||
| padding: var(--space_gutter); | ||
| text-align: center; | ||
| } | ||
|
|
||
| .local_hero { | ||
| background-color: var(--color_text--subtle); | ||
| color: white; | ||
| } | ||
|
|
||
| .local_element { | ||
| background-color: var(--color_background--element); | ||
| } | ||
|
|
||
| .local_chip { | ||
| background-color: var(--color_background--chip); | ||
| } | ||
|
|
||
| .local_accent { | ||
| background-color: var(--color_text--link); | ||
| } | ||
|
|
||
| .local_accent-alt { | ||
| background-color: var(--color_text--link-alt); | ||
| } | ||
|
|
||
| .local_divider { | ||
| border-bottom: 5px dotted var(--color_text--default); | ||
| } | ||
| </style> | ||
|
|
||
| <body> | ||
| <div> | ||
| <div class="layout--flow"> | ||
| <div class="page local_section"> | ||
| <header class="page__header"> | ||
| <div class="container--wide local_hero"> | ||
| <h2>Sidebar page with Containers</h2> | ||
| </div> | ||
| </header> | ||
| <div class="page__content layout--flow"> | ||
| <div class="container local_element"> | ||
| <p>Container</p> | ||
| <div class="container local_chip"> | ||
| <p>Container > Container</p> | ||
| </div> | ||
| <div class="container--wide local_accent"> | ||
| <p>Container > Container wide</p> | ||
| </div> | ||
| <div class="container--full local_accent-alt"> | ||
| Container > Container full | ||
| </div> | ||
| </div> | ||
| <div class="container--wide local_element"> | ||
| <p>Container Wide</p> | ||
| <div class="container local_chip"> | ||
| <p>Container wide > container</p> | ||
| </div> | ||
| <div class="container--wide local_accent"> | ||
| <p>Container wide > container wide</p> | ||
| </div> | ||
| <div class="container--full local_accent-alt"> | ||
| <p>Container wide > container full</p> | ||
| </div> | ||
| </div> | ||
| <div class="container--full local_element"> | ||
| <p>Container full</p> | ||
| <div class="container local_chip"> | ||
| <p>Container full > container</p> | ||
| </div> | ||
| <div class="container--wide local_accent"> | ||
| <p>Container full > container wide</p> | ||
| </div> | ||
| <div class="container--full local_accent-alt"> | ||
| <p>Container full > container full</p> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <aside class="page__sidebar local_element"> | ||
| <div class="container local_chip"> | ||
| <p>This is the sidebar</p> | ||
| </div> | ||
| </aside> | ||
| </div> | ||
|
|
||
| <hr class="local_divider"> | ||
|
|
||
| <div class="page local_section section"> | ||
| <header class="page__header local_hero"> | ||
| <div class="container--wide"> | ||
| <h2>Standard page with containers</h2> | ||
| </div> | ||
| </header> | ||
| <div class="page__content layout--flow"> | ||
| <div class="container local_element"> | ||
| <p>Container</p> | ||
| <div class="container local_chip"> | ||
| <p>Container > Container</p> | ||
| </div> | ||
| <div class="container--wide local_accent"> | ||
| <p>Container > Container wide</p> | ||
| </div> | ||
| <div class="container--full local_accent-alt"> | ||
| Container > Container full | ||
| </div> | ||
| </div> | ||
| <div class="container--wide local_element"> | ||
| <p>Container Wide</p> | ||
| <div class="container local_chip"> | ||
| <p>Container wide > container</p> | ||
| </div> | ||
| <div class="container--wide local_accent"> | ||
| <p>Container wide > container wide</p> | ||
| </div> | ||
| <div class="container--full local_accent-alt"> | ||
| <p>Container wide > container full</p> | ||
| </div> | ||
| </div> | ||
| <div class="container--full local_element"> | ||
| <p>Container full</p> | ||
| <div class="container local_chip"> | ||
| <p>Container full > container</p> | ||
| </div> | ||
| <div class="container--wide local_accent"> | ||
| <p>Container full > container wide</p> | ||
| </div> | ||
| <div class="container--full local_accent-alt"> | ||
| <p>Container full > container full</p> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
|
|
||
| <hr class="local_divider"> | ||
|
|
||
| <div class="container--wide local_hero section"> | ||
| <h2>Containers</h2> | ||
| </div> | ||
|
|
||
| <div class="container local_element"> | ||
| <p>Container</p> | ||
| <div class="container local_chip"> | ||
| <p>Container > Container</p> | ||
| </div> | ||
| <div class="container--wide local_accent"> | ||
| <p>Container > Container wide</p> | ||
| </div> | ||
| <div class="container--full local_accent-alt"> | ||
| Container > Container full | ||
| </div> | ||
| </div> | ||
| <div class="container--wide local_element"> | ||
| <p>Container Wide</p> | ||
| <div class="container local_chip"> | ||
| <p>Container wide > container</p> | ||
| </div> | ||
| <div class="container--wide local_accent"> | ||
| <p>Container wide > container wide</p> | ||
| </div> | ||
| <div class="container--full local_accent-alt"> | ||
| <p>Container wide > container full</p> | ||
| </div> | ||
| </div> | ||
| <div class="container--full local_element"> | ||
| <p>Container full</p> | ||
| <div class="container local_chip"> | ||
| <p>Container full > container</p> | ||
| </div> | ||
| <div class="container--wide local_accent"> | ||
| <p>Container full > container wide</p> | ||
| </div> | ||
| <div class="container--full local_accent-alt"> | ||
| <p>Container full > container full</p> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </body> | ||
|
|
||
| </html> |