├── .gitignore ├── .postcssrc ├── src ├── main.css ├── media.css ├── typography.css ├── interactive.css ├── base.css ├── lint-html.css └── dev.html ├── .github └── workflows │ └── CI.yml ├── package.json ├── bedrocss.min.css ├── README.md ├── bedrocss.min.css.map └── docs-template └── index.html /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .cache 3 | .parcel-cache 4 | dist -------------------------------------------------------------------------------- /.postcssrc: -------------------------------------------------------------------------------- 1 | { 2 | "plugins": { 3 | "autoprefixer": { 4 | } 5 | } 6 | } -------------------------------------------------------------------------------- /src/main.css: -------------------------------------------------------------------------------- 1 | @import './base.css'; 2 | @import './typography.css'; 3 | @import './interactive.css'; 4 | @import './media.css'; -------------------------------------------------------------------------------- /src/media.css: -------------------------------------------------------------------------------- 1 | img, 2 | figure, 3 | picture, 4 | svg { 5 | vertical-align: middle; /* removes weird space below images */ 6 | max-inline-size: 100%; 7 | height: auto; 8 | } 9 | svg { 10 | fill: currentColor; 11 | stroke: currentColor; 12 | stroke-width: 0; 13 | } 14 | /* a svg, 15 | button svg { 16 | pointer-events: none; 17 | } */ -------------------------------------------------------------------------------- /src/typography.css: -------------------------------------------------------------------------------- 1 | h1, .h1 { 2 | font-size: clamp(1.75rem, calc(1rem + 6vw), 3rem); 3 | } 4 | h2, .h2 { 5 | font-size: clamp(1.625rem, calc(1rem + 5vw), 2.5rem); 6 | } 7 | h3, .h3 { 8 | font-size: clamp(1.5rem, calc(1rem + 4vw), 2rem); 9 | } 10 | h4, .h4 { 11 | font-size: clamp(1.375rem, calc(1rem + 3vw), 1.5rem); 12 | } 13 | h5, .h5 { 14 | font-size: 1.25rem; 15 | } 16 | h6, .h6 { 17 | font-size: 1.125rem; 18 | } 19 | -------------------------------------------------------------------------------- /.github/workflows/CI.yml: -------------------------------------------------------------------------------- 1 | # Docs: https://docs.github.com/en/actions 2 | # Reference: https://docs.github.com/en/actions/reference 3 | # Syntax: https://docs.github.com/en/actions/reference/workflow-syntax-for-github-actions 4 | 5 | name: CI 6 | 7 | # Controls when the action will run. 8 | # https://docs.github.com/en/actions/reference/events-that-trigger-workflows 9 | on: 10 | push: 11 | branches: [ production ] 12 | 13 | env: 14 | REPO_NAME: ${{ github.event.repository.name }} 15 | GH_TOKEN: ${{ secrets.GH_TOKEN }} 16 | NPM_TOKEN: ${{ secrets.NPM_TOKEN }} 17 | 18 | jobs: 19 | CI: 20 | runs-on: ubuntu-latest 21 | 22 | steps: 23 | - name: Checkout 24 | uses: actions/checkout@v2 25 | 26 | - name: Cache node modules 27 | uses: actions/cache@v2 28 | with: 29 | path: '**/node_modules' 30 | key: ${{ runner.os }}-modules-${{ hashFiles('**/package-lock.json') }} 31 | 32 | - name: Install modules 33 | run: npm ci 34 | 35 | # - name: Audit 36 | # run: npm run audit 37 | 38 | - name: Publish 39 | run: npm run publish 40 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "bedrocss", 3 | "version": "0.0.20", 4 | "description": "A classless CSS library that's modern, lightweight, and easy to modify so you can start your projects on a solid foundation.", 5 | "main": "bedrocss.min.css", 6 | "scripts": { 7 | "dev": "parcel src/dev.html -p 8080", 8 | "build": "parcel build src/main.css", 9 | "build-docs": "npx xm build --htmlOnly --root ./docs-template --output docs", 10 | "publish": "semantic-release" 11 | }, 12 | "release": { 13 | "branches": [ 14 | "production" 15 | ] 16 | }, 17 | "repository": { 18 | "type": "git", 19 | "url": "git+https://github.com/AustinGil/bedrocss.git" 20 | }, 21 | "keywords": [ 22 | "css" 23 | ], 24 | "author": "Austin Gil ", 25 | "license": "MIT", 26 | "bugs": { 27 | "url": "https://github.com/AustinGil/bedrocss/issues" 28 | }, 29 | "homepage": "https://github.com/AustinGil/bedrocss#readme", 30 | "devDependencies": { 31 | "autoprefixer": "^10.2.6", 32 | "parcel": "^2.0.0-beta.2", 33 | "postcss": "^8.3.5", 34 | "release-it": "^14.10.0", 35 | "semantic-release": "^19.0.2" 36 | } 37 | } 38 | -------------------------------------------------------------------------------- /src/interactive.css: -------------------------------------------------------------------------------- 1 | /* a, 2 | button, 3 | html input[type="button"], 4 | input[type="reset"], 5 | input[type="submit"] { 6 | cursor: pointer; 7 | } */ 8 | /* button[disabled], 9 | html input[disabled] { 10 | cursor: default; } */ 11 | :where( 12 | button, 13 | input, 14 | select, 15 | textarea 16 | ) { 17 | font: inherit; 18 | letter-spacing: inherit; 19 | word-spacing: inherit; 20 | /* color: inherit; */ 21 | } 22 | fieldset { 23 | border: 0; 24 | } 25 | 26 | :where( 27 | input:not( 28 | [type="file"], 29 | [type="image"], 30 | [type="range"] 31 | ) 32 | button, 33 | select, 34 | textarea 35 | ) { 36 | border: 2px solid; 37 | padding: .25rem; 38 | /* min-block-size: 2em; */ 39 | } 40 | /* select:not(a) { 41 | appearance: none; 42 | padding-right: 1em; 43 | background: url('data:image/svg+xml;utf8,') right .3em center / .6em no-repeat, #fff; 44 | } */ 45 | textarea { 46 | display: block; 47 | resize: vertical; 48 | } 49 | /* optgroup { 50 | font-weight: bold; } */ 51 | :disabled { 52 | /* border-style: dotted; */ 53 | cursor: not-allowed; 54 | } 55 | /* [readonly] { 56 | border-style: dashed; 57 | } */ 58 | -------------------------------------------------------------------------------- /bedrocss.min.css: -------------------------------------------------------------------------------- 1 | html{color-scheme:light dark;box-sizing:border-box;height:100%;text-rendering:optimizeSpeed;accent-color:var(--accent-color,auto)}*,:after,:before{box-sizing:inherit}*{margin:0;padding:0;font-weight:400;line-height:calc(4px + 2ex)}:focus{outline:var(--outline-width,3px) solid transparent;box-shadow:0 0 0 var(--outline-width,3px) var(--accent-color,Highlight)}body{min-height:100%;font-family:system-ui,sans-serif}:where(h1,h2,h3,h4,h5,h6,p,ol,ul,dl,table,pre,hr,blockquote,details)+:where(h1,h2,h3,h4,h5,h6,p,ol,ul,dl,table,pre,hr,blockquote,details){-webkit-margin-before:1rem;margin-block-start:1rem}b,strong{font-weight:700}ol,ul{-webkit-padding-start:1.1rem;padding-inline-start:1.1rem}:where(input:not([type=checkbox],[type=radio],[type=file],[type=image],[type=color],[type=button],[type=reset],[type=submit])),audio,iframe,meter,progress,select,table,textarea,video{inline-size:100%}table{border-collapse:collapse;border-spacing:0}pre{white-space:pre-wrap}@media (prefers-reduced-motion:reduce){*,:after,:before{-webkit-animation-duration:.01ms!important;animation-duration:.01ms!important;-webkit-animation-iteration-count:1!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}.h1,h1{font-size:clamp(1.75rem,calc(1rem + 6vw),3rem)}.h2,h2{font-size:clamp(1.625rem,calc(1rem + 5vw),2.5rem)}.h3,h3{font-size:clamp(1.5rem,calc(1rem + 4vw),2rem)}.h4,h4{font-size:clamp(1.375rem,calc(1rem + 3vw),1.5rem)}.h5,h5{font-size:1.25rem}.h6,h6{font-size:1.125rem}button,input,select,textarea{font:inherit;letter-spacing:inherit;word-spacing:inherit}fieldset{border:0}:where(input:not([type=file],[type=image],[type=range])),button,select,textarea{border:1px solid;padding:.25rem}textarea{display:block;resize:vertical}:disabled{border-style:dotted;cursor:not-allowed}[readonly]{border-style:dashed}figure,img,picture,svg{vertical-align:middle;max-inline-size:100%;height:auto}svg{fill:currentColor;stroke:currentColor;stroke-width:0} 2 | /*# sourceMappingURL=bedrocss.min.css.map */ 3 | -------------------------------------------------------------------------------- /src/base.css: -------------------------------------------------------------------------------- 1 | html { 2 | color-scheme: light dark; 3 | box-sizing: border-box; 4 | height: 100%; /* full-height content */ 5 | text-rendering: optimizeSpeed; 6 | accent-color: var(--accent-color, auto); 7 | /* -webkit-text-size-adjust: 100%; Prevent adjustments of font size after orientation changes in iOS */ 8 | /* word-break: break-word; Cool, but it breaks tables :/ */ 9 | } 10 | /* html:focus-within { 11 | scroll-behavior: smooth; 12 | } */ 13 | *, 14 | *::before, 15 | *::after { 16 | box-sizing: inherit; 17 | } 18 | * { 19 | margin: 0; 20 | padding: 0; 21 | font-weight: normal; 22 | line-height: calc(4px + 2ex); 23 | } 24 | :focus { 25 | /* outline: var(--outline-width, 3px) solid transparent; /* For Windows high contrast mode */ 26 | /* box-shadow: 0px 0px 0px var(--outline-width, 3px) var(--accent-color, Highlight); */ 27 | outline: .125rem solid var(--accent-color, Highlight); 28 | outline-offset: 0.15em; 29 | } 30 | body { 31 | min-height: 100%; /* full-height content */ 32 | font-family: system-ui, sans-serif; 33 | /* hyphens: auto; */ 34 | } 35 | :where(h1, h2, h3, h4, h5, h6, p, ol, ul, dl, table, pre, hr, blockquote, details) + 36 | :where(h1, h2, h3, h4, h5, h6, p, ol, ul, dl, table, pre, hr, blockquote, details) { 37 | margin-block-start: 1rem; 38 | } 39 | b, strong { 40 | font-weight: bold; 41 | } 42 | ul, 43 | ol { 44 | /* list-style-type: none; */ 45 | padding-inline-start: 1.1rem; 46 | } 47 | /* :where removes specificity from :not */ 48 | :where(input:not( 49 | [type="checkbox"], 50 | [type="radio"], 51 | [type="file"], 52 | [type="image"], 53 | [type="color"], 54 | [type="button"], 55 | [type="reset"], 56 | [type="submit"] 57 | )), 58 | select, 59 | textarea, 60 | table, 61 | meter, 62 | progress, 63 | video, 64 | audio, 65 | iframe { 66 | inline-size: 100%; 67 | } 68 | table { 69 | border-collapse: collapse; 70 | border-spacing: 0; 71 | /* table-layout: fixed; */ 72 | } 73 | /* th, 74 | td { 75 | border: 1px solid; 76 | } */ 77 | pre { 78 | /* padding: .25rem; 79 | color: Canvas; 80 | background: CanvasText; */ 81 | white-space: pre-wrap; 82 | } 83 | /* sub, 84 | sup { 85 | font-size: 75%; 86 | line-height: 0; 87 | position: relative; 88 | vertical-align: baseline; } 89 | 90 | sup { 91 | top: -0.5em; } 92 | 93 | sub { 94 | bottom: -0.25em; } */ 95 | @media (prefers-reduced-motion: reduce) { 96 | /* html:focus-within { 97 | scroll-behavior: auto; 98 | } */ 99 | *, 100 | *::before, 101 | *::after { 102 | animation-duration: 0.01ms !important; 103 | animation-iteration-count: 1 !important; 104 | transition-duration: 0.01ms !important; 105 | scroll-behavior: auto !important; 106 | } 107 | } 108 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # bedrocss 2 | 3 | A classless CSS library that's modern, lightweight, and easy to modify so you can start your projects on a solid foundation. It does a bit more than a [reset](https://cssdeck.com/blog/what-is-a-css-reset/), but not so much as a framework. bedrocss applies sane defaults to plain HTML elements, so there isn't anything to learn, and it's super easy to modify. 4 | 5 | - 933 bytes zipped (1.99kb unzipped): Gets you going on the right foundation without any overhead. 6 | - Minimal specificity: Super easy for you to customize without having to fight. 7 | - Incrementally Adoptable: If you don't like certain parts, you can leave them out. 8 | - Slightly opinionated: For a solid foundation on which to grow your custom styles. 9 | 10 | Demo 11 | GitHub 12 | NPM 13 | 14 | ## Installation 15 | 16 | The recommended approach is to include `bedrocss` as an NPM dependency. 17 | ``` 18 | npm install bedrocss 19 | ``` 20 | 21 | Then to include it in your application before any other CSS. 22 | 23 | ```js 24 | import 'bedrocss' 25 | // other styles after 26 | ``` 27 | 28 | Alternatively, you can link to the unpkg CDN version from your HTML ``. 29 | 30 | ```html 31 | 32 | 33 | ``` 34 | ## Features 35 | 36 | ### Common Defaults 37 | 38 | Every project I've ever worked on sets `box-sizing: border-box;` on every element and the height of the app to match the screen height. Most others remove margin and padding on everything so there is a predictable starting point. Images have a max width of 100% so they don't break out of parent containers. 39 | 40 | ### User Focus 41 | 42 | We style based on user preferences this by setting text to the `system-ui` font, support light and dark mode with `color-scheme`, and if enabled, use the `prefers-reduces-motion` media query to disable animations and transitions. This is especially relevant for users with vestibular disorders. 43 | 44 | ### Accessibility 45 | 46 | In addition to the reduced motion support above, this library has other accessibility features. It uses rem units for any sizing to respect user's font-size preferences. Better focus styles that handle border radius, use the user agent color, and still work in high-contrast mode. 47 | 48 | ### Slightly Opinionated 49 | 50 | This library implements the most common practices as well as some opinions to make things easier. For example, many tags (input, video, progres, and more) stretch the full width of their parents. Although the margins are removed by default, we add some back for content flow so, for example, two paragraphs get some space between. 51 | 52 | ### Typography 53 | 54 | Headings have a fluid font size that adjusts to screen sizes. Here are the only helper classes (`.h1, .h2, .h3, .h4, .h5, .h6`) so you can use the correct semantic HTML tag but style it like a different heading. Every element also has a `line-height` that's optimized for readability. 55 | 56 | ### Forms 57 | 58 | Most inputs are set to take up the full width of their container. They also are set to inherit font styles rather than the default behavior of ignoring the body styles. Spacing, border, and colors are set to match as opposed to the default browser behavior with slightly different sizes. Visual feedback is provided for `disabled` and `readonly` inputs. 59 | 60 | ### Easy to Customize 61 | 62 | Every CSS rule applies the lowest possible CSS specificity. This makes it easy be overwrite without having to write more specific rules, use `!important`, or anything complex. It's also is made up of a few parts (see below) that you can easily opt out of. 63 | 64 | ## Opting out of features 65 | 66 | By default, when you import the library, you get everything. However, it's made up of a collection of files which you can pick out as you like. For example, to explicitly import all components, you could do: 67 | 68 | ```js 69 | import 'bedrocss/src/base.css'; 70 | import 'bedrocss/src/typography.css'; 71 | import 'bedrocss/src/interactive.css'; 72 | import 'bedrocss/src/media.css'; 73 | ``` 74 | 75 |

76 | Made with ❤ by 77 | Austin Gil 78 |

79 | -------------------------------------------------------------------------------- /bedrocss.min.css.map: -------------------------------------------------------------------------------- 1 | {"mappings":"AAAA,KACE,uBAAwB,CACxB,qBAAsB,CACtB,WAAY,CACZ,4BAA6B,CAC7B,qCAGF,CAIA,iBAGE,kBACF,CACA,EACE,QAAS,CACT,SAAU,CACV,eAAmB,CACnB,2BACF,CACA,OACE,kDAAoD,CACpD,uEACF,CACA,KACE,eAAgB,CAChB,gCAEF,CACA,0IAEE,0BAAwB,CAAxB,uBACF,CACA,SACE,eACF,CACA,MAGE,4BAA4B,CAA5B,2BACF,CAEA,uLAkBE,gBACF,CACA,MACE,wBAAyB,CACzB,gBAEF,CAKA,IAIE,oBACF,CAaA,uCAIE,iBAGE,0CAAqC,CAArC,kCAAqC,CACrC,6CAAuC,CAAvC,qCAAuC,CACvC,mCAAsC,CACtC,8BACF,CACF,CCxGA,OACE,8CACF,CACA,OACE,iDACF,CACA,OACE,6CACF,CACA,OACE,iDACF,CACA,OACE,iBACF,CACA,OACE,kBACF,CCPA,6BAIE,YAAa,CACb,sBAAuB,CACvB,oBAEF,CACA,SACE,QACF,CACA,gFAQE,gBAAiB,CACjB,cAEF,CAMA,SACE,aAAc,CACd,eACF,CAGA,UACE,mBAAoB,CACpB,kBACF,CACA,WACE,mBACF,CCnDA,uBAIE,qBAAsB,CACtB,oBAAqB,CACrB,WACF,CACA,IACE,iBAAkB,CAClB,mBAAoB,CACpB,cACF","sources":["./src/base.css","./src/typography.css","./src/interactive.css","./src/media.css"],"sourcesContent":["html {\n color-scheme: light dark;\n box-sizing: border-box;\n height: 100%; /* full-height content */\n text-rendering: optimizeSpeed;\n accent-color: var(--accent-color, auto);\n /* -webkit-text-size-adjust: 100%; Prevent adjustments of font size after orientation changes in iOS */\n /* word-break: break-word; Cool, but it breaks tables :/ */\n}\n/* html:focus-within {\n scroll-behavior: smooth;\n} */\n*,\n*::before,\n*::after {\n box-sizing: inherit;\n}\n* {\n margin: 0;\n padding: 0;\n font-weight: normal;\n line-height: calc(4px + 2ex);\n}\n:focus {\n outline: var(--outline-width, 3px) solid transparent; /* For Windows high contrast mode */\n box-shadow: 0px 0px 0px var(--outline-width, 3px) var(--accent-color, Highlight);\n}\nbody {\n min-height: 100%; /* full-height content */\n font-family: system-ui, sans-serif;\n /* hyphens: auto; */\n}\n:where(h1, h2, h3, h4, h5, h6, p, ol, ul, dl, table, pre, hr, blockquote, details) +\n:where(h1, h2, h3, h4, h5, h6, p, ol, ul, dl, table, pre, hr, blockquote, details) {\n margin-block-start: 1rem;\n}\nb, strong {\n font-weight: bold;\n}\nul,\nol {\n /* list-style-type: none; */\n padding-inline-start: 1.1rem;\n}\n/* :where removes specificity from :not */\n:where(input:not(\n [type=\"checkbox\"],\n [type=\"radio\"],\n [type=\"file\"],\n [type=\"image\"],\n [type=\"color\"],\n [type=\"button\"],\n [type=\"reset\"],\n [type=\"submit\"]\n)),\nselect,\ntextarea,\ntable,\nmeter,\nprogress,\nvideo,\naudio,\niframe {\n inline-size: 100%;\n}\ntable {\n border-collapse: collapse;\n border-spacing: 0;\n /* table-layout: fixed; */\n}\n/* th,\ntd {\n border: 1px solid;\n} */\npre {\n /* padding: .25rem;\n color: Canvas;\n background: CanvasText; */\n white-space: pre-wrap;\n}\n/* sub,\nsup {\n font-size: 75%;\n line-height: 0;\n position: relative;\n vertical-align: baseline; }\n\nsup {\n top: -0.5em; }\n\nsub {\n bottom: -0.25em; } */\n@media (prefers-reduced-motion: reduce) {\n /* html:focus-within {\n scroll-behavior: auto;\n } */\n *,\n *::before,\n *::after {\n animation-duration: 0.01ms !important;\n animation-iteration-count: 1 !important;\n transition-duration: 0.01ms !important;\n scroll-behavior: auto !important;\n }\n}\n","h1, .h1 {\n font-size: clamp(1.75rem, calc(1rem + 6vw), 3rem);\n}\nh2, .h2 {\n font-size: clamp(1.625rem, calc(1rem + 5vw), 2.5rem);\n}\nh3, .h3 {\n font-size: clamp(1.5rem, calc(1rem + 4vw), 2rem);\n}\nh4, .h4 {\n font-size: clamp(1.375rem, calc(1rem + 3vw), 1.5rem);\n}\nh5, .h5 {\n font-size: 1.25rem;\n}\nh6, .h6 {\n font-size: 1.125rem;\n}\n","/* a,\nbutton,\nhtml input[type=\"button\"],\ninput[type=\"reset\"],\ninput[type=\"submit\"] {\n cursor: pointer;\n} */\n/* button[disabled],\nhtml input[disabled] {\n cursor: default; } */\nbutton,\ninput,\nselect,\ntextarea {\n font: inherit;\n letter-spacing: inherit;\n word-spacing: inherit;\n /* color: inherit; */\n}\nfieldset {\n border: 0;\n}\nbutton,\n:where(input:not(\n [type=\"file\"],\n [type=\"image\"],\n [type=\"range\"]\n)),\nselect,\ntextarea {\n border: 1px solid;\n padding: .25rem;\n /* min-block-size: 2em; */\n}\n/* select:not(a) {\n appearance: none;\n padding-right: 1em;\n background: url('data:image/svg+xml;utf8,') right .3em center / .6em no-repeat, #fff;\n} */\ntextarea {\n display: block;\n resize: vertical;\n}\n/* optgroup {\n font-weight: bold; } */\n:disabled {\n border-style: dotted;\n cursor: not-allowed;\n}\n[readonly] {\n border-style: dashed;\n}\n","img,\nfigure,\npicture,\nsvg {\n vertical-align: middle; /* removes weird space below images */\n max-inline-size: 100%;\n height: auto;\n}\nsvg {\n fill: currentColor;\n stroke: currentColor;\n stroke-width: 0;\n}\n/* a svg,\nbutton svg {\n pointer-events: none;\n} */"],"names":[],"version":3,"file":"bedrocss.min.css.map"} -------------------------------------------------------------------------------- /docs-template/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | bedrocss - by Austin Gil 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 56 | 57 | 58 | 59 | 60 | -------------------------------------------------------------------------------- /src/lint-html.css: -------------------------------------------------------------------------------- 1 | /* https://github.com/lorenzodelijser/lint-html-with-css */ 2 | 3 | /* Debug inputs and lebels without id or for attribute */ 4 | /* Are you sure your code is ok? Explicit relation between an input and its label is always better. Use id and for attributes to do so. */ 5 | /* By Geoffrey Crofte */ 6 | input:not([id]), label:not([for]), 7 | 8 | 9 | /* Links go nowhere? */ 10 | /* This selector hunts for links that have: 11 | - No href 12 | - an empty href 13 | - a "#" href (button parhaps?) */ 14 | /* By Adam Argyle */ 15 | a:is(:not([href]), [href=""], [href="#"]), 16 | 17 | 18 | /* Image without alt attribute? */ 19 | /* Debug images without alt attribute with CSS. */ 20 | /* By Geoffrey Crofte */ 21 | img:not([alt]), 22 | 23 | 24 | /* This selector hunts for forbidden nesting */ 25 | /* By Adam Argyle */ 26 | :not(figure) > figcaption, 27 | :not(fieldset) > legend, 28 | :not(dl) > :is(dt, dd), 29 | :not(tr) > :is(td, th), 30 | :not(select) > :is(option, optgroup), 31 | :not(table) > :is(thead, tfoot, tbody, tr, colgroup, caption), 32 | 33 | 34 | /* Only
  • 's allowed here! */ 35 | /* This selector hunts for lists that have something other than an
  • inside */ 36 | /* By Adam Argyle */ 37 | :is(ul, ol) > :not(li), 38 | 39 | /* Prevent page load jank and CLS by finding 's missing height and width attributes */ 40 | /* By Adam Argyle */ 41 | img:not([width]):not([height]), 42 | 43 | /* this selector hunts for elements with a tabindex other than 0 or -1 */ 44 | /* values other than 0 or -1 can steal or disrupt natural tab order and is generally something to avoid */ 45 | /* By Adam Argyle */ 46 | [tabindex]:not([tabindex="0"], [tabindex="-1"]), 47 | 48 | 49 | /* Debugs buttons without type attribute, with CSS */ 50 | /* Non-explicit type leads to button being a submit button. Not all buttons are submit buttons. A neutral type would be type="button" */ 51 | /* By Adam Argyle */ 52 | button:not([type]), 53 | 54 | 55 | /* Find all the input fields without any labelling */ 56 | /* By Tanisha Sabherwal */ 57 | input:not([type="button"]) 58 | :not([type="reset"]) 59 | :not([type="submit"]) 60 | :not([arialabelledby],[id]), 61 | textarea:not([aria-labelledby],[id]) 62 | label:not([for]), 63 | 64 | 65 | /* Find all the buttons without any label */ 66 | /* By Tanisha Sabherwal */ 67 | input[type=button]:not([aria-label]), 68 | input[type=reset]:not([aria-label]), 69 | input[type=submit]:not([aria-label]), 70 | button:not([aria-label]), 71 | 72 | 73 | /* Tables should have a caption */ 74 | /* This one is useful to force each to be the first direct child of a elements. */ 75 | /* By Quentin Bellanger */ 76 | table > *:first-child:not(caption), 77 | 78 | 79 | /* Headers out of order (i.e. h2 before h1, etc.) */ 80 | /* By Una Kravets */ 81 | h2 ~ h1, 82 | h3 ~ h1, 83 | h4 ~ h1, 84 | h5 ~ h1, 85 | h6 ~ h1, 86 | h3 ~ h2:first-of-type, 87 | h4 ~ h2:first-of-type, 88 | h5 ~ h2:first-of-type, 89 | h6 ~ h2:first-of-type, 90 | h4 ~ h3:first-of-type, 91 | h5 ~ h3:first-of-type, 92 | h6 ~ h3:first-of-type, 93 | h5 ~ h4:first-of-type, 94 | h6 ~ h4:first-of-type, 95 | h6 ~ h5:first-of-type, 96 | 97 | 98 | /* Find elements that don't contain a webp */ 99 | /* By Jay Holtslander */ 100 | picture > source:first-child:not([type="image/webp"]):before, 101 | 102 | /* and 191 | 192 | 193 | 194 | 195 |
    196 |
    197 |

    198 | Data: <ul>, <ol>, <li>, <dl>, <dt>, <dd>, <table>, <th>, 199 | <tr>, <td> 200 |

    201 |
    202 |

    Unordered List: <ul>

    203 |
      204 |
    • List item one 205 |
        206 |
      • List item one 207 |
          208 |
        • List item one
          • 209 |
        • List item two
          • 210 |
        • List item three
          • 211 |
        • List item four
          • 212 |
        213 |
        • 214 |
      • List item two
        • 215 |
      • List item three
        • 216 |
      • List item four
        • 217 |
      218 |
      • 219 |
    • List item two
      • 220 |
    • List item three
      • 221 |
    • List item four
      • 222 |
    223 | 224 |

    Ordered List: <ol>

    225 |
      226 |
    1. List item one 227 |
        228 |
      1. List item one 229 |
          230 |
        1. List item one
          2. 231 |
        2. List item two
          3. 232 |
        3. List item three
          4. 233 |
        4. List item four
          5. 234 |
        235 |
        2. 236 |
      2. List item two
        3. 237 |
      3. List item three
        4. 238 |
      4. List item four
        5. 239 |
      240 |
      2. 241 |
    2. List item two
      3. 242 |
    3. List item three
      4. 243 |
    4. List item four
      5. 244 |
    245 | 246 |

    Definition List: <dl>

    247 |
    248 |
    Definition list division.
    249 |
    Startup
    250 |
    A startup company or startup is a company or temporary organization designed to search for a repeatable and 251 | scalable business model. 252 |
    253 |
    dowork
    254 |
    Coined by Rob Dyrdek and his personal body guard Christopher “Big Black” Boykins, “Do Work” works as a self 255 | motivator, to motivating your friends.
    256 |
    Do It Live
    257 |
    I’ll let Bill O’Reilly 258 | explain this 259 | one. 260 |
    261 |
    262 | 263 |

    Tables: <table>

    264 |
    265 | 266 | 267 | 268 | 269 | 270 | 271 | 274 | 275 | 276 | 277 | 278 | 281 | 282 | 283 | 284 | 285 | 288 | 289 | 290 | 291 | 292 | 295 | 296 | 297 | 298 | 299 |
    EmployeeSalary
    272 | Jane 273 | $1Because that’s all Steve Job’ needed for a salary.
    279 | John 280 | $100KFor all the blogging he does.
    286 | Jane 287 | $100MPictures are worth a thousand words, right? So Tom x 1,000.
    293 | Jane 294 | $100BWith hair like that?! Enough said…
    300 | 301 | 302 | 303 |
    304 |
    305 |

    306 | Interactive: <button>, <form>, <label>, <input>, <select>, <textarea>, 307 | <fieldset>, 308 | <legend> 309 |

    310 |
    311 | 312 |

    313 |

    314 | 315 |
    316 | 317 |
    318 |
    319 | 320 | Input (Don't forget to test focus state) 321 |
    322 | 323 |
    324 |
    325 | Input (disabled) 326 |
    327 | 328 |
    329 |
    330 | Input (valid) 331 |
    332 | 333 |
    334 |
    335 | Input (invalid) 336 |
    337 | 338 |
    339 |
    340 | Input (readonly) 341 |
    342 | 343 |
    344 |
    345 | Input (type="button") 346 |
    347 | 348 |
    349 |
    350 | Input (type="checkbox") 351 |
    352 | 356 | 360 | 364 |
    365 |
    366 | Input (type="color") 367 |
    368 | 369 |
    370 |
    371 | Input (type="date") 372 |
    373 | 374 |
    375 |
    376 | Input (type="datetime-local") 377 |
    378 | 379 |
    380 |
    381 | Input (type="email") 382 |
    383 | 384 |
    385 |
    386 | Input (type="file") 387 |
    388 | 389 |
    390 |
    391 | Input (type="hidden") 392 |
    393 | 394 |
    395 |
    396 | Input (type="image") 397 |
    398 | 399 |
    400 |
    401 | Input (type="month") 402 |
    403 | 404 |
    405 |
    406 | Input (type="number") 407 |
    408 | 409 |
    410 |
    411 | Input (type="password") 412 |
    413 | 414 |
    415 |
    416 | Input (type="checkbox") 417 |
    418 | 422 | 426 | 430 |
    431 |
    432 | Input (type="range") 433 |
    434 | 435 |
    436 |
    437 | Input (type="reset") 438 |
    439 | 440 |
    441 |
    442 | Input (type="search") 443 |
    444 | 445 |
    446 |
    447 | Input (type="submit") 448 |
    449 | 450 |
    451 |
    452 | Input (type="tel") 453 |
    454 | 455 |
    456 |
    457 | Input (type="text") 458 |
    459 | 460 |
    461 |
    462 | Input (type="time") 463 |
    464 | 465 |
    466 |
    467 | Input (type="url") 468 |
    469 | 470 |
    471 |
    472 | Input (type="week") 473 |
    474 | 475 |
    476 |
    477 | Select 478 |
    479 | 484 |
    485 |
    486 | Textarea 487 |
    488 | 489 |
    490 |
    491 |
    492 | Fieldset with Legend: 493 | 496 | 499 |
    500 |
    501 |

    Details/Summary

    502 |
    503 | Details 504 | Something small enough to escape casual notice. 505 |
    506 |
    507 | 508 | 509 |
    510 |
    511 |

    512 | Miscellaneous Content 513 |

    514 |
    515 |
    516 |

    ToTestWhiteSpaceWrappingThisIsAVeryLongWordThatIsLongerThanItsAvailableWidth

    517 |
    518 | 519 |

    520 | Progress: <progress> 521 |

    522 | 523 | 524 |

    525 | Meter: <meter> 526 |

    527 |

    (default/optimal)

    528 | 529 |

    (not optimal)

    530 | 531 |

    (very not optimal)

    532 | 533 |

    534 | Address Tag: <address> 535 |

    536 |
    1 Infinite Loop
    Cupertino, CA 95014
    United States
    537 |

    538 | Abbreviation Tag: <abbr> 539 |

    540 |

    The abbreviation 541 | srsly stands for “seriously”. 542 |

    543 |

    544 | Acronym Tag: <acronym> 545 |

    546 |

    The acronym 547 | ftw stands for “for the win”. 548 |

    549 |

    550 | Blockquotes: <blockquote> 551 |

    552 |
    553 |

    This is a single line blockquote.

    554 |
    555 |
    556 |

    This is a multi-line blockquote that includes a citation at the ed. People think focus means saying yes to the 557 | thing you’ve got to focus on. But that’s not what it means at all. It means saying no to the hundred other good 558 | ideas that there are. You have to pick carefully. I’m actually as proud of the things we haven’t done as the 559 | things I have done. Innovation is saying no to 1,000 things. 560 | Steve Jobs – Apple Worldwide Developers’ Conference, 1997 561 |

    562 |
    563 |

    564 | Cite Tag: <cite> 565 |

    566 |

    “Code is poetry.” – 567 | Automattic 568 |

    569 |

    570 | Pre Tag: <pre> 571 |

    572 | 
    {
573 | 	"json": "example"
574 | }
    575 |

    576 | Code Tag: <code> 577 |

    578 |

    Example text that looks like code: word-wrap: break-word;.

    579 |

    580 | Strike or Delete Tag: <strike>, <del> 581 |

    582 |

    This tag will let you 583 | strikeout text. Note that the <del> tag is no longer supported in HTML5 so use the 584 | <strike> instead. 585 |

    586 |

    587 | Insert Tag: <ins> 588 |

    589 |

    This tag should denote 590 | inserted text. 591 |

    592 |

    593 | Keyboard Tag: <kbd> 594 |

    595 |

    This scarcely known tag emulates 596 | keyboard text, which is usually styled like the 597 | <code> tag. 598 |

    599 |

    600 | Quote Tag: <q> 601 |

    602 |

    603 | Developers, developers, developers… –Steve Ballmer 604 |

    605 |

    606 | Small Tag: <small> 607 |

    608 |

    Want to see some small text? Here you go!

    609 |

    610 | Subscript Tag: <sub> 611 |

    612 |

    Getting our science styling on with H 613 | 2O, which should push the “2″ down. 614 |

    615 |

    616 | Superscript Tag: <sup> 617 |

    618 |

    Still sticking with science and Albert Einstein’s E=mc 619 | 2, which should lift the 2 up. 620 |

    621 |

    622 | Teletype Tag: <tt> 623 |

    624 |

    This rarely used tag emulates 625 | teletype text, which is usually styled like the 626 | <code> tag. 627 |

    628 |

    629 | Variable Tag: <var> 630 |

    631 |

    This allows you to denotevariables.

    632 |
    633 | 634 | 635 |

    </> with ❤ by 636 | Austin Gil 637 |

    638 | 639 | 640 | --------------------------------------------------------------------------------