Last active
January 10, 2019 16:08
-
-
Save dphiffer/cc3848857939bc059db7678d634d3dcf to your computer and use it in GitHub Desktop.
Boilerplate web page
This file contains hidden or 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> | |
| <head> | |
| <!-- | |
| This is for the Unicode. Do not fuck with the Unicode. | |
| --> | |
| <meta charset="UTF-8"> | |
| <!-- | |
| This will make your shit work on a phone. | |
| --> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <!-- | |
| This puts an icon in the tab. | |
| --> | |
| <link rel="shortcut icon" type="image/png" href="/favicon.png"> | |
| <!-- | |
| Don't forget to set a title. Copy/paste the same one below. | |
| --> | |
| <title>TITLE</title> | |
| <!-- | |
| A nice free alternative to the system sans-serif fonts. | |
| https://github.com/adobe-fonts/source-sans-pro/ | |
| --> | |
| <link rel="stylesheet" href="/source-sans-pro/source-sans-pro.css"> | |
| <!-- | |
| Good old Meyer reset 2.0 | |
| https://meyerweb.com/eric/tools/css/reset/ | |
| --> | |
| <link rel="stylesheet" href="/reset.css"> | |
| <!-- Where all the styles go (see below) --> | |
| <link rel="stylesheet" href="/main.css"> | |
| <!-- This will make your share look nice on Facebook. Alas, it's still necessary. --> | |
| <meta property="og:title" content="TITLE"> | |
| <meta property="og:description" content="..."> | |
| <meta property="og:image" content="https://absolute.url/to/1200x630.jpg"> | |
| <meta property="og:url" content="https://absolute.url/to/here/"> | |
| <meta property="og:type" content="website"> | |
| <!-- This will make the cards work on Twitter. And Slack maybe? --> | |
| <meta name="twitter:card" content="summary_large_image"> | |
| <meta name="twitter:title" content="TITLE"> | |
| <meta name="twitter:description" content="..."> | |
| <meta name="twitter:image" content="https://absolute.url/to/440x220.jpg"> | |
| </head> | |
| <body> | |
| <div id="page"> | |
| <h1>Hey, it's a page!</h1> | |
| <p>Type your stuff in here.</p> | |
| </div> | |
| </body> | |
| </html> |
This file contains hidden or 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
| /* | |
| Box-sizing border-box by default, from Paul Irish | |
| https://www.paulirish.com/2012/box-sizing-border-box-ftw/ | |
| */ | |
| html { | |
| box-sizing: border-box; | |
| } | |
| *, *:before, *:after { | |
| box-sizing: inherit; | |
| } | |
| /* | |
| Make the text look nice. | |
| */ | |
| body, input, select { | |
| font-family: "Source Sans Pro", sans-serif; | |
| font-size: 16px; | |
| line-height: 1.5; | |
| } | |
| /* | |
| Make the images span the full width of the page. | |
| */ | |
| img { | |
| width: 100%; | |
| height: auto; | |
| } | |
| /* | |
| On mobile make the page span the full screen width. Up to 750px wide max, then center the page. | |
| */ | |
| #page { | |
| width: 100%; | |
| max-width: 750px; | |
| margin: 30px auto; | |
| } | |
| @media (max-width: 780px) { | |
| /* | |
| Add in some spacing on mobile. | |
| */ | |
| #page { | |
| padding: 0 15px; | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment