Last active
July 19, 2024 04:26
-
-
Save davidhartsough/d32ca7e80565c5fff29f70fa0880474c to your computer and use it in GitHub Desktop.
Web App Basics: HTML and CSS
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
| :root { | |
| --font-family: ui-sans-serif, system-ui, -apple-system, "BlinkMacSystemFont", | |
| "Segoe UI", "Roboto", "Helvetica Neue", "Arial", "Noto Sans", sans-serif; | |
| --black: #101214; | |
| --white: #f8f9fa; | |
| --bg: var(--white); | |
| --fg: var(--black); | |
| } | |
| @media (prefers-color-scheme: dark) { | |
| :root { | |
| --bg: var(--black); | |
| --fg: var(--white); | |
| } | |
| } | |
| *, | |
| ::before, | |
| ::after { | |
| box-sizing: border-box; | |
| } | |
| html, | |
| body { | |
| font-family: var(--font-family); | |
| background-color: var(--bg); | |
| color: var(--fg); | |
| } | |
| html { | |
| line-height: 1.5; | |
| } | |
| body { | |
| line-height: inherit; | |
| margin: 0; | |
| } |
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" prefix="og: https://ogp.me/ns#"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1" /> | |
| <title>__TITLE__</title> | |
| <meta name="description" content="__DESCRIPTION__" /> | |
| <!-- extras --> | |
| <meta name="author" content="__AUTHOR__" /> | |
| <meta name="application-name" content="__SITE_NAME__" /> | |
| <meta name="theme-color" content="#000000" /> | |
| <!-- open graph --> | |
| <meta property="og:type" content="website" /> | |
| <meta property="og:title" content="__TITLE__" /> | |
| <meta property="og:description" content="__DESCRIPTION__" /> | |
| <meta property="og:url" content="__URL__" /> | |
| <meta property="og:site_name" content="__SITE_NAME__" /> | |
| <meta property="og:locale" content="en_US" /> | |
| <meta property="og:image" content="/icon512.png" /> | |
| <meta property="og:image:alt" content="__SITE_NAME__ logo icon" /> | |
| <meta property="og:image:type" content="image/png" /> | |
| <meta property="og:image:width" content="512" /> | |
| <meta property="og:image:height" content="512" /> | |
| <!-- icons --> | |
| <link rel="icon" href="/favicon.ico" type="image/x-icon" /> | |
| <link rel="icon" href="/icon.svg" type="image/svg+xml"> | |
| <link rel="apple-touch-icon" href="/apple-touch-icon.png" /> | |
| <!-- manifest --> | |
| <link rel="manifest" href="/manifest.json" /> | |
| <!-- stylesheets --> | |
| <link rel="stylesheet" href="/base.css" /> | |
| </head> | |
| <body> | |
| <main> | |
| </main> | |
| </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
| { | |
| "name": "__NAME__", | |
| "short_name": "__NAME__", | |
| "start_url": ".", | |
| "display": "minimal-ui", | |
| "theme_color": "#0000ff", | |
| "background_color": "#ffffff", | |
| "description": "__DESCRIPTION__", | |
| "icons": [ | |
| { | |
| "src": "/icon.svg", | |
| "type": "image/svg+xml", | |
| "sizes": "512x512" | |
| }, | |
| { | |
| "src": "/icon192.png", | |
| "type": "image/png", | |
| "sizes": "192x192" | |
| }, | |
| { | |
| "src": "/icon512.png", | |
| "type": "image/png", | |
| "sizes": "512x512" | |
| } | |
| ] | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
This is my go-to / favorite HTML and CSS boilerplate / template when kickstarting / creating a new web app from scratch.
I want to include all of the core necessities, but nothing more. So these are the most essential elements I always start with.
The HTML includes all the necessary meta tags and metadata in the
<head>, such as important web app metadata tags, open graph tags, icon links, the web app manifest, and the stylesheet(s).The CSS starts with defining essential reusable CSS variables defined at the root and encourages styling via variables that can adapt to the light-dark color scheme preferences. It sets the standard
box-sizing: border-box;property on all elements. And finally it sets the basics of thehtmlandbodystyle rules.:root@media (prefers-color-scheme: dark)box-sizing: border-box;htmlandbodybasicsI wanted to save this somewhere besides my personal snippet shortcuts, and I wanted to make this publicly accessible for anyone to use. Hope you find it useful! Go ahead and copy what you need. Cheers!