├── .gitignore ├── LICENSE ├── README.md ├── bower.json ├── de ├── _fault.scss ├── part │ ├── _a.scss │ ├── _address.scss │ ├── _area.scss │ ├── _article.scss │ ├── _aside.scss │ ├── _b.scss │ ├── _bdo.scss │ ├── _blockquote.scss │ ├── _body.scss │ ├── _caption.scss │ ├── _cite.scss │ ├── _code.scss │ ├── _col.scss │ ├── _colgroup.scss │ ├── _datalist.scss │ ├── _dd.scss │ ├── _del.scss │ ├── _details.scss │ ├── _dfn.scss │ ├── _div.scss │ ├── _dl.scss │ ├── _dt.scss │ ├── _em.scss │ ├── _embed.scss │ ├── _fieldset.scss │ ├── _figcaption.scss │ ├── _figure.scss │ ├── _footer.scss │ ├── _form.scss │ ├── _h1.scss │ ├── _h2.scss │ ├── _h3.scss │ ├── _h4.scss │ ├── _h5.scss │ ├── _h6.scss │ ├── _head.scss │ ├── _header.scss │ ├── _hr.scss │ ├── _html.scss │ ├── _i.scss │ ├── _iframe.scss │ ├── _img.scss │ ├── _ins.scss │ ├── _kbd.scss │ ├── _label.scss │ ├── _legend.scss │ ├── _li.scss │ ├── _link.scss │ ├── _map.scss │ ├── _mark.scss │ ├── _menu.scss │ ├── _nav.scss │ ├── _object.scss │ ├── _ol.scss │ ├── _output.scss │ ├── _p.scss │ ├── _param.scss │ ├── _pre.scss │ ├── _q.scss │ ├── _rt.scss │ ├── _s.scss │ ├── _samp.scss │ ├── _script.scss │ ├── _section.scss │ ├── _small.scss │ ├── _strong.scss │ ├── _style.scss │ ├── _sub.scss │ ├── _summary.scss │ ├── _sup.scss │ ├── _table.scss │ ├── _tbody.scss │ ├── _td.scss │ ├── _tfoot.scss │ ├── _th.scss │ ├── _thead.scss │ ├── _title.scss │ ├── _tr.scss │ ├── _u.scss │ ├── _ul.scss │ └── _var.scss └── util │ └── _util.scss └── test ├── gruntfile.js ├── package.json ├── test.css └── test.scss /.gitignore: -------------------------------------------------------------------------------- 1 | bower_components 2 | node_modules 3 | 4 | .sass-cache 5 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2016 JP DeVries 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # fault 2 | A comprehensive collection of default CSS settings for HTML5 tags as Silent Sass Classes and Mixins. 3 | 4 | Fault is completely silent. Including fault in your project initially adds 0 bytes to your CSS payload. So if your site is slow well, that's your fault. 5 | 6 | ## Usage 7 | 8 | ```scss 9 | @import 'de/fault'; 10 | 11 | body { 12 | @extend %body; 13 | } 14 | 15 | a { 16 | @extend %a; 17 | } 18 | 19 | h2 { 20 | @media(max-width: 1024px) { 21 | @include h2; // each silent class has a associated mixin to be used within @media 22 | } 23 | } 24 | ``` 25 | 26 | will output: 27 | 28 | ```css 29 | body { 30 | display: block; } 31 | 32 | a:link, a:visited { 33 | text-decoration: underline; 34 | cursor: auto; } 35 | 36 | body { 37 | margin: 8px; } 38 | body:focus { 39 | outline: none; } 40 | 41 | @media (max-width: 1024px) { 42 | h2 { 43 | display: block; 44 | font-weight: bold; 45 | font-size: 1.5em; 46 | margin-top: 0.83em; 47 | margin-bottom: 0.83em; 48 | margin-left: 0; 49 | margin-right: 0; } } 50 | ``` 51 | 52 | ## Why? 53 | 54 | CSS collisions cramping your style? Ever wish you could just set the properties for a CSS element back to the browser defaults? Now you can! 55 | 56 | ## Where? 57 | Data is pulled from Default CSS Settings for each tag in the [W3C Reference](http://www.w3schools.com/tags/tag_blockquote.asp). 58 | -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "fault", 3 | "version": "0.0.0", 4 | "main": "app/assets/stylesheets/fault.scss", 5 | "homepage": "https://github.com/jpdevries/fault", 6 | "authors": [ 7 | "JP DeVries " 8 | ], 9 | "description": "A comprehensive collection of default CSS settings for HTML5 tags as Silent Sass Classes and Mixins", 10 | "keywords": [ 11 | "HTML", 12 | "Sass", 13 | "CSS" 14 | ], 15 | "license": "MIT", 16 | "ignore": [ 17 | "**/.*", 18 | "node_modules", 19 | "bower_components", 20 | "test", 21 | "tests" 22 | ], 23 | "repository": { 24 | "type": "git", 25 | "url": "https://github.com/jpdevries/fault.git" 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /de/_fault.scss: -------------------------------------------------------------------------------- 1 | @import 'util/util'; 2 | 3 | @import 'part/a'; 4 | @import 'part/address'; 5 | @import 'part/area'; 6 | @import 'part/article'; 7 | @import 'part/aside'; 8 | @import 'part/b'; 9 | @import 'part/bdo'; 10 | @import 'part/blockquote'; 11 | @import 'part/body'; 12 | @import 'part/caption'; 13 | @import 'part/cite'; 14 | @import 'part/code'; 15 | @import 'part/col'; 16 | @import 'part/colgroup'; 17 | @import 'part/datalist'; 18 | @import 'part/dd'; 19 | @import 'part/del'; 20 | @import 'part/details'; 21 | @import 'part/dfn'; 22 | @import 'part/div'; 23 | @import 'part/dl'; 24 | @import 'part/dt'; 25 | @import 'part/em'; 26 | @import 'part/embed'; 27 | @import 'part/fieldset'; 28 | @import 'part/figcaption'; 29 | @import 'part/figure'; 30 | @import 'part/footer'; 31 | @import 'part/form'; 32 | @import 'part/h1'; 33 | @import 'part/h2'; 34 | @import 'part/h3'; 35 | @import 'part/h4'; 36 | @import 'part/h5'; 37 | @import 'part/h6'; 38 | @import 'part/head'; 39 | @import 'part/header'; 40 | @import 'part/hr'; 41 | @import 'part/html'; 42 | @import 'part/i'; 43 | @import 'part/iframe'; 44 | @import 'part/img'; 45 | @import 'part/ins'; 46 | @import 'part/kbd'; 47 | @import 'part/label'; 48 | @import 'part/legend'; 49 | @import 'part/li'; 50 | @import 'part/link'; 51 | @import 'part/map'; 52 | @import 'part/mark'; 53 | @import 'part/menu'; 54 | @import 'part/nav'; 55 | @import 'part/object'; 56 | @import 'part/ol'; 57 | @import 'part/output'; 58 | @import 'part/p'; 59 | @import 'part/param'; 60 | @import 'part/pre'; 61 | @import 'part/q'; 62 | @import 'part/rt'; 63 | @import 'part/s'; 64 | @import 'part/samp'; 65 | @import 'part/script'; 66 | @import 'part/section'; 67 | @import 'part/small'; 68 | @import 'part/strong'; 69 | @import 'part/style'; 70 | @import 'part/sub'; 71 | @import 'part/summary'; 72 | @import 'part/sup'; 73 | @import 'part/table'; 74 | @import 'part/tbody'; 75 | @import 'part/td'; 76 | @import 'part/tfoot'; 77 | @import 'part/th'; 78 | @import 'part/thead'; 79 | @import 'part/title'; 80 | @import 'part/tr'; 81 | @import 'part/u'; 82 | @import 'part/ul'; 83 | @import 'part/var'; 84 | -------------------------------------------------------------------------------- /de/part/_a.scss: -------------------------------------------------------------------------------- 1 | @mixin a() { 2 | &:link, &:visited { 3 | //color: (internal value); 4 | text-decoration: underline; 5 | cursor: auto; 6 | } 7 | 8 | &:link:active, &:visited:active { 9 | //color: (internal value); 10 | } 11 | } 12 | 13 | %a { 14 | @include a; 15 | } 16 | -------------------------------------------------------------------------------- /de/part/_address.scss: -------------------------------------------------------------------------------- 1 | @mixin address() { 2 | display:block; 3 | font-style:italic; 4 | } 5 | 6 | %address { 7 | @extend %display-block; 8 | @extend %oblique; //@extend %italic; //font-style: italic; 9 | } 10 | -------------------------------------------------------------------------------- /de/part/_area.scss: -------------------------------------------------------------------------------- 1 | @mixin area() { 2 | display:none; 3 | } 4 | 5 | %area { 6 | @extend %hidden; //display: none; 7 | } 8 | -------------------------------------------------------------------------------- /de/part/_article.scss: -------------------------------------------------------------------------------- 1 | @mixin article() { 2 | display:block; 3 | } 4 | 5 | %article { 6 | @extend %display-block; 7 | } 8 | -------------------------------------------------------------------------------- /de/part/_aside.scss: -------------------------------------------------------------------------------- 1 | @mixin aside() { 2 | display:block; 3 | } 4 | 5 | %aside { 6 | @extend %display-block; 7 | } 8 | -------------------------------------------------------------------------------- /de/part/_b.scss: -------------------------------------------------------------------------------- 1 | @mixin b() { 2 | font-weight:bold; 3 | } 4 | 5 | %b { 6 | @extend %bold; //font-weight: bold; 7 | } 8 | -------------------------------------------------------------------------------- /de/part/_bdo.scss: -------------------------------------------------------------------------------- 1 | @mixin bdo() { 2 | unicode-bidi: bidi-override; 3 | } 4 | 5 | %bdo { 6 | @include bdo; 7 | } 8 | -------------------------------------------------------------------------------- /de/part/_blockquote.scss: -------------------------------------------------------------------------------- 1 | @mixin blockquote() { 2 | @extend %display-block; 3 | margin-top: 1em; 4 | margin-bottom: 1em; 5 | margin-left: 40px; 6 | margin-right: 40px; 7 | } 8 | 9 | %blockquote { 10 | @include blockquote; 11 | } 12 | -------------------------------------------------------------------------------- /de/part/_body.scss: -------------------------------------------------------------------------------- 1 | @mixin body() { 2 | display:block; 3 | margin: 8px; 4 | &:focus { 5 | outline: none; 6 | } 7 | } 8 | 9 | %body { 10 | @extend %display-block; 11 | margin: 8px; 12 | &:focus { 13 | outline: none; 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /de/part/_caption.scss: -------------------------------------------------------------------------------- 1 | @mixin caption() { 2 | display: table-caption; 3 | text-align: center; 4 | } 5 | 6 | %caption { 7 | @include caption; 8 | } 9 | -------------------------------------------------------------------------------- /de/part/_cite.scss: -------------------------------------------------------------------------------- 1 | @mixin cite() { 2 | font-style: italic; 3 | } 4 | 5 | %cite { 6 | @extend %italic; //font-style: italic; 7 | } 8 | -------------------------------------------------------------------------------- /de/part/_code.scss: -------------------------------------------------------------------------------- 1 | @mixin code() { 2 | font-family: monospace; 3 | } 4 | 5 | %code { 6 | @extend %monospaced; //font-family: monospace; 7 | } 8 | -------------------------------------------------------------------------------- /de/part/_col.scss: -------------------------------------------------------------------------------- 1 | @mixin col() { 2 | display: table-column; 3 | } 4 | 5 | %col { 6 | display: table-column; 7 | } 8 | -------------------------------------------------------------------------------- /de/part/_colgroup.scss: -------------------------------------------------------------------------------- 1 | @mixin colgroup() { 2 | display: table-column-group; 3 | } 4 | 5 | %colgroup { 6 | display: table-column-group; 7 | } 8 | -------------------------------------------------------------------------------- /de/part/_datalist.scss: -------------------------------------------------------------------------------- 1 | @mixin datalist() { 2 | display:none; 3 | } 4 | 5 | %datalist { 6 | @extend %hidden; //display: none; 7 | } 8 | -------------------------------------------------------------------------------- /de/part/_dd.scss: -------------------------------------------------------------------------------- 1 | @mixin dd() { 2 | display:block; 3 | margin-left: 40px; 4 | } 5 | 6 | %dd { 7 | @extend %display-block; 8 | margin-left: 40px; 9 | } 10 | -------------------------------------------------------------------------------- /de/part/_del.scss: -------------------------------------------------------------------------------- 1 | @mixin del() { 2 | text-decoration: line-through; 3 | } 4 | 5 | %del { 6 | @include del; 7 | } 8 | -------------------------------------------------------------------------------- /de/part/_details.scss: -------------------------------------------------------------------------------- 1 | @mixin details() { 2 | display:block; 3 | } 4 | 5 | %details { 6 | @extend %display-block; 7 | } 8 | -------------------------------------------------------------------------------- /de/part/_dfn.scss: -------------------------------------------------------------------------------- 1 | @mixin dfn() { 2 | font-style: italic; 3 | } 4 | 5 | %dfn { 6 | @extend %italic; //font-style: italic; 7 | } 8 | -------------------------------------------------------------------------------- /de/part/_div.scss: -------------------------------------------------------------------------------- 1 | @mixin div() { 2 | display:block; 3 | } 4 | 5 | %div { 6 | @extend %display-block; 7 | } 8 | -------------------------------------------------------------------------------- /de/part/_dl.scss: -------------------------------------------------------------------------------- 1 | @mixin dl() { 2 | display:block; 3 | margin-top: 1em; 4 | margin-bottom: 1em; 5 | margin-left: 0; 6 | margin-right: 0; 7 | } 8 | 9 | %dl { 10 | @include dl; 11 | } 12 | -------------------------------------------------------------------------------- /de/part/_dt.scss: -------------------------------------------------------------------------------- 1 | @mixin dt() { 2 | display:block; 3 | } 4 | 5 | %dt { 6 | @extend %display-block; 7 | } 8 | -------------------------------------------------------------------------------- /de/part/_em.scss: -------------------------------------------------------------------------------- 1 | @mixin em() { 2 | font-style: italic; 3 | } 4 | 5 | %em { 6 | @extend %italic; //font-style: italic; 7 | } 8 | -------------------------------------------------------------------------------- /de/part/_embed.scss: -------------------------------------------------------------------------------- 1 | @mixin embed() { 2 | &:focus { 3 | outline: none; 4 | } 5 | } 6 | 7 | %embed { 8 | @include embed; 9 | } 10 | -------------------------------------------------------------------------------- /de/part/_fieldset.scss: -------------------------------------------------------------------------------- 1 | @mixin fieldset() { 2 | display:block; 3 | margin-left: 2px; 4 | margin-right: 2px; 5 | padding-top: 0.35em; 6 | padding-bottom: 0.625em; 7 | padding-left: 0.75em; 8 | padding-right: 0.75em; 9 | border: 2px groove (internal value); 10 | } 11 | 12 | %fieldset { 13 | @include fieldset; 14 | } 15 | -------------------------------------------------------------------------------- /de/part/_figcaption.scss: -------------------------------------------------------------------------------- 1 | @mixin figcaption { 2 | display: block; 3 | } 4 | 5 | %figcaption { 6 | @include figcaption; 7 | } 8 | -------------------------------------------------------------------------------- /de/part/_figure.scss: -------------------------------------------------------------------------------- 1 | @mixin figure() { 2 | display: block; 3 | margin-top: 1em; 4 | margin-bottom: 1em; 5 | margin-left: 40px; 6 | margin-right: 40px; 7 | } 8 | 9 | %figure { 10 | @include figure; 11 | } 12 | -------------------------------------------------------------------------------- /de/part/_footer.scss: -------------------------------------------------------------------------------- 1 | @mixin footer() { 2 | display:block; 3 | } 4 | 5 | %footer { 6 | @extend %display-block; 7 | } 8 | -------------------------------------------------------------------------------- /de/part/_form.scss: -------------------------------------------------------------------------------- 1 | @mixin form() { 2 | display: block; 3 | margin-top: 0em; 4 | } 5 | 6 | %form { 7 | @include form; 8 | } 9 | -------------------------------------------------------------------------------- /de/part/_h1.scss: -------------------------------------------------------------------------------- 1 | @mixin h1() { 2 | display:block; 3 | font-weight:bold; 4 | font-size: 2em; 5 | margin-top: 0.67em; 6 | margin-bottom: 0.67em; 7 | margin-left: 0; 8 | margin-right: 0; 9 | } 10 | 11 | %h1 { 12 | @extend %display-block; //display: block; 13 | @extend %bold; //font-weight: bold; 14 | font-size: 2em; 15 | margin-top: 0.67em; 16 | margin-bottom: 0.67em; 17 | margin-left: 0; 18 | margin-right: 0; 19 | } 20 | -------------------------------------------------------------------------------- /de/part/_h2.scss: -------------------------------------------------------------------------------- 1 | @mixin h2() { 2 | display: block; 3 | font-weight: bold; 4 | font-size: 1.5em; 5 | margin-top: 0.83em; 6 | margin-bottom: 0.83em; 7 | margin-left: 0; 8 | margin-right: 0; 9 | } 10 | 11 | %h2 { 12 | @extend %display-block; //display: block; 13 | @extend %bold; //font-weight: bold; 14 | font-size: 1.5em; 15 | margin-top: 0.83em; 16 | margin-bottom: 0.83em; 17 | margin-left: 0; 18 | margin-right: 0; 19 | } 20 | -------------------------------------------------------------------------------- /de/part/_h3.scss: -------------------------------------------------------------------------------- 1 | @mixin h3() { 2 | display: block; 3 | font-weight: bold; 4 | font-size: 1.17em; 5 | margin-top: 1em; 6 | margin-bottom: 1em; 7 | margin-left: 0; 8 | margin-right: 0; 9 | } 10 | 11 | %h3 { 12 | @extend %display-block; //display: block; 13 | @extend %bold; //font-weight: bold; 14 | font-size: 1.17em; 15 | margin-top: 1em; 16 | margin-bottom: 1em; 17 | margin-left: 0; 18 | margin-right: 0; 19 | } 20 | -------------------------------------------------------------------------------- /de/part/_h4.scss: -------------------------------------------------------------------------------- 1 | @mixin h4() { 2 | display: block; 3 | font-weight: bold; 4 | margin-top: 1.33em; 5 | margin-bottom: 1.33em; 6 | margin-left: 0; 7 | margin-right: 0; 8 | } 9 | 10 | %h4 { 11 | @extend %display-block; //display: block; 12 | @extend %bold; //font-weight: bold; 13 | margin-top: 1.33em; 14 | margin-bottom: 1.33em; 15 | margin-left: 0; 16 | margin-right: 0; 17 | } 18 | -------------------------------------------------------------------------------- /de/part/_h5.scss: -------------------------------------------------------------------------------- 1 | @mixin h5() { 2 | display: block; 3 | font-weight: bold; 4 | font-size: .83em; 5 | margin-top: 1.67em; 6 | margin-bottom: 1.67em; 7 | margin-left: 0; 8 | margin-right: 0; 9 | } 10 | 11 | %h5 { 12 | @extend %display-block; //display: block; 13 | @extend %bold; //font-weight: bold; 14 | font-size: .83em; 15 | margin-top: 1.67em; 16 | margin-bottom: 1.67em; 17 | margin-left: 0; 18 | margin-right: 0; 19 | } 20 | -------------------------------------------------------------------------------- /de/part/_h6.scss: -------------------------------------------------------------------------------- 1 | @mixin h6() { 2 | display: block; 3 | font-weight: bold; 4 | font-size: .67em; 5 | margin-top: 2.33em; 6 | margin-bottom: 2.33em; 7 | margin-left: 0; 8 | margin-right: 0; 9 | } 10 | 11 | 12 | %h6 { 13 | @extend %display-block; //display: block; 14 | @extend %bold; //font-weight: bold; 15 | font-size: .67em; 16 | margin-top: 2.33em; 17 | margin-bottom: 2.33em; 18 | margin-left: 0; 19 | margin-right: 0; 20 | } 21 | -------------------------------------------------------------------------------- /de/part/_head.scss: -------------------------------------------------------------------------------- 1 | @mixin head() { 2 | display:none; 3 | } 4 | 5 | %head { 6 | @extend %hidden; 7 | } 8 | -------------------------------------------------------------------------------- /de/part/_header.scss: -------------------------------------------------------------------------------- 1 | @mixin header() { 2 | display:block; 3 | } 4 | 5 | %header { 6 | @extend %display-block; 7 | } 8 | -------------------------------------------------------------------------------- /de/part/_hr.scss: -------------------------------------------------------------------------------- 1 | @mixin hr() { 2 | display: block; 3 | margin-top: 0.5em; 4 | margin-bottom: 0.5em; 5 | margin-left: auto; 6 | margin-right: auto; 7 | border-style: inset; 8 | border-width: 1px; 9 | } 10 | 11 | %hr { 12 | @extend %display-block; //display: block; 13 | margin-top: 0.5em; 14 | margin-bottom: 0.5em; 15 | margin-left: auto; 16 | margin-right: auto; 17 | border-style: inset; 18 | border-width: 1px; 19 | } 20 | -------------------------------------------------------------------------------- /de/part/_html.scss: -------------------------------------------------------------------------------- 1 | @mixin html() { 2 | display: block; 3 | &:focus { 4 | outline: none; 5 | } 6 | } 7 | 8 | 9 | %html { 10 | @extend %display-block; //display: block; 11 | &:focus { 12 | outline: none; 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /de/part/_i.scss: -------------------------------------------------------------------------------- 1 | @mixin i() { 2 | font-style: italic; 3 | } 4 | 5 | 6 | %i { 7 | @extend %italic; //font-style: italic; 8 | } 9 | -------------------------------------------------------------------------------- /de/part/_iframe.scss: -------------------------------------------------------------------------------- 1 | @mixin iframe() { 2 | &:focus { 3 | outline: none; 4 | } 5 | [seamless] { 6 | display: block; 7 | } 8 | } 9 | 10 | %iframe { 11 | &:focus { 12 | outline: none; 13 | } 14 | [seamless] { 15 | @extend %display-block; //display: block; 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /de/part/_img.scss: -------------------------------------------------------------------------------- 1 | @mixin img() { 2 | display: inline-block; 3 | } 4 | 5 | %img { 6 | display: inline-block; 7 | } 8 | -------------------------------------------------------------------------------- /de/part/_ins.scss: -------------------------------------------------------------------------------- 1 | @mixin ins() { 2 | text-decoration: underline; 3 | } 4 | 5 | %ins { 6 | text-decoration: underline; 7 | } 8 | -------------------------------------------------------------------------------- /de/part/_kbd.scss: -------------------------------------------------------------------------------- 1 | @mixin kbd() { 2 | @extend %monospaced; //font-family: monospace; 3 | } 4 | 5 | %kbd { 6 | @extend %monospaced; //font-family: monospace; 7 | } 8 | -------------------------------------------------------------------------------- /de/part/_label.scss: -------------------------------------------------------------------------------- 1 | @mixin label { 2 | cursor: default; 3 | } 4 | 5 | %label { 6 | cursor: default; 7 | } 8 | -------------------------------------------------------------------------------- /de/part/_legend.scss: -------------------------------------------------------------------------------- 1 | @mixin legend { 2 | display: block; 3 | padding-left: 2px; 4 | padding-right: 2px; 5 | border: none; 6 | } 7 | 8 | %legend { 9 | @extend %display-block; //display: block; 10 | padding-left: 2px; 11 | padding-right: 2px; 12 | border: none; 13 | } 14 | -------------------------------------------------------------------------------- /de/part/_li.scss: -------------------------------------------------------------------------------- 1 | @mixin li() { 2 | display: list-item; 3 | } 4 | 5 | 6 | %li { 7 | display: list-item; 8 | } 9 | -------------------------------------------------------------------------------- /de/part/_link.scss: -------------------------------------------------------------------------------- 1 | @mixin link() { 2 | display: none; 3 | } 4 | 5 | %link { 6 | @extend %hidden; //display: none; 7 | } 8 | -------------------------------------------------------------------------------- /de/part/_map.scss: -------------------------------------------------------------------------------- 1 | @mixin map() { 2 | display: inline; 3 | } 4 | 5 | %map { 6 | display: inline; 7 | } 8 | -------------------------------------------------------------------------------- /de/part/_mark.scss: -------------------------------------------------------------------------------- 1 | @mixin mark() { 2 | background-color: yellow; 3 | color: black; 4 | } 5 | 6 | %mark { 7 | @include mark; 8 | } 9 | -------------------------------------------------------------------------------- /de/part/_menu.scss: -------------------------------------------------------------------------------- 1 | @mixin menu { 2 | display: block; 3 | list-style-type: disc; 4 | margin-top: 1em; 5 | margin-bottom: 1em; 6 | margin-left: 0; 7 | margin-right: 0; 8 | padding-left: 40px; 9 | } 10 | 11 | 12 | %menu { 13 | @extend %display-block; //display: block; 14 | list-style-type: disc; 15 | margin-top: 1em; 16 | margin-bottom: 1em; 17 | margin-left: 0; 18 | margin-right: 0; 19 | padding-left: 40px; 20 | } 21 | -------------------------------------------------------------------------------- /de/part/_nav.scss: -------------------------------------------------------------------------------- 1 | @mixin nav() { 2 | display:block; 3 | } 4 | 5 | %nav { 6 | @extend %display-block; 7 | } 8 | -------------------------------------------------------------------------------- /de/part/_object.scss: -------------------------------------------------------------------------------- 1 | @mixin object() { 2 | &:focus { 3 | outline: none; 4 | } 5 | } 6 | 7 | %object { 8 | &:focus { 9 | outline: none; 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /de/part/_ol.scss: -------------------------------------------------------------------------------- 1 | @mixin ol { 2 | display: block; 3 | list-style-type: decimal; 4 | margin-top: 1em; 5 | margin-bottom: 1em; 6 | margin-left: 0; 7 | margin-right: 0; 8 | padding-left: 40px; 9 | } 10 | 11 | %ol { 12 | @extend %display-block; //display: block; 13 | list-style-type: decimal; 14 | margin-top: 1em; 15 | margin-bottom: 1em; 16 | margin-left: 0; 17 | margin-right: 0; 18 | padding-left: 40px; 19 | } 20 | -------------------------------------------------------------------------------- /de/part/_output.scss: -------------------------------------------------------------------------------- 1 | @mixin output { 2 | display: inline; 3 | } 4 | 5 | %output { 6 | display: inline; 7 | } 8 | -------------------------------------------------------------------------------- /de/part/_p.scss: -------------------------------------------------------------------------------- 1 | @mixin p { 2 | display: block; 3 | margin-top: 1em; 4 | margin-bottom: 1em; 5 | margin-left: 0; 6 | margin-right: 0; 7 | } 8 | 9 | %p { 10 | @extend %display-block; //display: block; 11 | margin-top: 1em; 12 | margin-bottom: 1em; 13 | margin-left: 0; 14 | margin-right: 0; 15 | } 16 | -------------------------------------------------------------------------------- /de/part/_param.scss: -------------------------------------------------------------------------------- 1 | @mixin param() { 2 | display:none; 3 | } 4 | 5 | %param { 6 | @extend %hidden; //display: none; 7 | } 8 | -------------------------------------------------------------------------------- /de/part/_pre.scss: -------------------------------------------------------------------------------- 1 | @mixin pre() { 2 | display: block; 3 | font-family: monospace; 4 | white-space: pre; 5 | margin: 1em 0; 6 | } 7 | 8 | %pre { 9 | @extend %display-block; //display: block; 10 | @extend %monospaced; //font-family: monospace; 11 | white-space: pre; 12 | margin: 1em 0; 13 | } 14 | -------------------------------------------------------------------------------- /de/part/_q.scss: -------------------------------------------------------------------------------- 1 | @mixin q() { 2 | display: inline; 3 | &:before { 4 | content: open-quote; 5 | } 6 | 7 | &:after { 8 | content: close-quote; 9 | } 10 | } 11 | 12 | %q { 13 | @include q; 14 | } 15 | -------------------------------------------------------------------------------- /de/part/_rt.scss: -------------------------------------------------------------------------------- 1 | @mixin rt() { 2 | line-height: normal; 3 | } 4 | 5 | %rt { 6 | @include rt; 7 | } 8 | -------------------------------------------------------------------------------- /de/part/_s.scss: -------------------------------------------------------------------------------- 1 | @mixin s() { 2 | text-decoration: line-through; 3 | } 4 | 5 | %s { 6 | @include s; 7 | } 8 | -------------------------------------------------------------------------------- /de/part/_samp.scss: -------------------------------------------------------------------------------- 1 | @mixin samp() { 2 | font-family: monospace; 3 | } 4 | 5 | %samp { 6 | @extend %monospaced; //font-family: monospace; 7 | } 8 | -------------------------------------------------------------------------------- /de/part/_script.scss: -------------------------------------------------------------------------------- 1 | @mixin script() { 2 | display: none; 3 | } 4 | 5 | %script { 6 | @extend %hidden; //display: none; 7 | } 8 | -------------------------------------------------------------------------------- /de/part/_section.scss: -------------------------------------------------------------------------------- 1 | @mixin section() { 2 | display:block; 3 | } 4 | 5 | 6 | %section { 7 | @extend %display-block; 8 | } 9 | -------------------------------------------------------------------------------- /de/part/_small.scss: -------------------------------------------------------------------------------- 1 | @mixin small() { 2 | font-size:smaller; 3 | } 4 | 5 | %small { 6 | @extend %smaller; //font-size: smaller; 7 | } 8 | -------------------------------------------------------------------------------- /de/part/_strong.scss: -------------------------------------------------------------------------------- 1 | @mixin strong() { 2 | font-weight: bold; 3 | } 4 | 5 | %strong { 6 | @extend %bold; //font-weight: bold; 7 | } 8 | -------------------------------------------------------------------------------- /de/part/_style.scss: -------------------------------------------------------------------------------- 1 | @mixin style() { 2 | display: none; 3 | } 4 | 5 | %style { 6 | @extend %hidden; //display: none; 7 | } 8 | -------------------------------------------------------------------------------- /de/part/_sub.scss: -------------------------------------------------------------------------------- 1 | @mixin sub() { 2 | vertical-align: sub; 3 | font-size: smaller; 4 | } 5 | 6 | %sub { 7 | vertical-align: sub; 8 | @extend %smaller; //font-size: smaller; 9 | } 10 | -------------------------------------------------------------------------------- /de/part/_summary.scss: -------------------------------------------------------------------------------- 1 | @mixin summary() { 2 | display:block; 3 | } 4 | 5 | %summary { 6 | @extend %display-block; 7 | } 8 | -------------------------------------------------------------------------------- /de/part/_sup.scss: -------------------------------------------------------------------------------- 1 | @mixin sup() { 2 | vertical-align: super; 3 | font-size: smaller; 4 | } 5 | 6 | %sup { 7 | vertical-align: super; 8 | @extend %smaller; //font-size: smaller; 9 | } 10 | -------------------------------------------------------------------------------- /de/part/_table.scss: -------------------------------------------------------------------------------- 1 | @mixin table() { 2 | display: table; 3 | border-collapse: separate; 4 | border-spacing: 2px; 5 | border-color: gray; 6 | } 7 | 8 | %table { 9 | @include table; 10 | } 11 | -------------------------------------------------------------------------------- /de/part/_tbody.scss: -------------------------------------------------------------------------------- 1 | @mixin tbody() { 2 | display: table-row-group; 3 | vertical-align: middle; 4 | border-color: inherit; 5 | } 6 | 7 | 8 | %tbody { 9 | @include tbody; 10 | } 11 | -------------------------------------------------------------------------------- /de/part/_td.scss: -------------------------------------------------------------------------------- 1 | @mixin td { 2 | display: table-cell; 3 | vertical-align: inherit; 4 | } 5 | 6 | %td { 7 | @include td; 8 | } 9 | -------------------------------------------------------------------------------- /de/part/_tfoot.scss: -------------------------------------------------------------------------------- 1 | @mixin tfoot() { 2 | display: table-footer-group; 3 | vertical-align: middle; 4 | border-color: inherit; 5 | } 6 | 7 | %tfoot { 8 | @include tfoot; 9 | } 10 | -------------------------------------------------------------------------------- /de/part/_th.scss: -------------------------------------------------------------------------------- 1 | @mixin th() { 2 | display: table-cell; 3 | vertical-align: inherit; 4 | font-weight: bold; 5 | text-align: center; 6 | } 7 | 8 | %th { 9 | display: table-cell; 10 | vertical-align: inherit; 11 | @extend %bold; //font-weight: bold; 12 | text-align: center; 13 | } 14 | -------------------------------------------------------------------------------- /de/part/_thead.scss: -------------------------------------------------------------------------------- 1 | @mixin thead() { 2 | display: table-header-group; 3 | vertical-align: middle; 4 | border-color: inherit; 5 | } 6 | 7 | %thead { 8 | @include thead; 9 | } 10 | -------------------------------------------------------------------------------- /de/part/_title.scss: -------------------------------------------------------------------------------- 1 | @mixin title() { 2 | display:none; 3 | } 4 | 5 | %title { 6 | @extend %hidden; //display: none; 7 | } 8 | -------------------------------------------------------------------------------- /de/part/_tr.scss: -------------------------------------------------------------------------------- 1 | @mixin tr() { 2 | display: table-row; 3 | vertical-align: inherit; 4 | border-color: inherit; 5 | } 6 | 7 | %tr { 8 | @include tr; 9 | } 10 | -------------------------------------------------------------------------------- /de/part/_u.scss: -------------------------------------------------------------------------------- 1 | @mixin u() { 2 | text-decoration: underline; 3 | } 4 | 5 | %u { 6 | @include u; 7 | } 8 | -------------------------------------------------------------------------------- /de/part/_ul.scss: -------------------------------------------------------------------------------- 1 | @mixin ul() { 2 | @extend %display-block; //display: block; 3 | list-style-type: disc; 4 | margin-top: 1em; 5 | margin-bottom: 1 em; 6 | margin-left: 0; 7 | margin-right: 0; 8 | padding-left: 40px; 9 | } 10 | 11 | %ul { 12 | @extend %display-block; //display: block; 13 | list-style-type: disc; 14 | margin-top: 1em; 15 | margin-bottom: 1 em; 16 | margin-left: 0; 17 | margin-right: 0; 18 | padding-left: 40px; 19 | } 20 | -------------------------------------------------------------------------------- /de/part/_var.scss: -------------------------------------------------------------------------------- 1 | @mixin var() { 2 | font-style: italic; 3 | } 4 | 5 | %var { 6 | @include var; 7 | } 8 | -------------------------------------------------------------------------------- /de/util/_util.scss: -------------------------------------------------------------------------------- 1 | %capitalized { 2 | text-transform:uppercase; 3 | } 4 | 5 | %display-block { 6 | display:block; 7 | } 8 | 9 | %display-inline { 10 | display:inline; 11 | } 12 | 13 | %display-inline-block { 14 | display:inline-block; 15 | } 16 | 17 | %max-width-none { 18 | max-width:none; 19 | } 20 | 21 | %monospaced { 22 | font-family: monospace, serif; 23 | } 24 | 25 | %clickable { 26 | cursor:pointer; 27 | } 28 | 29 | %smaller { 30 | font-size:smaller; 31 | } 32 | 33 | %bold { 34 | font-weight:bold; 35 | } 36 | 37 | %oblique { 38 | font-style:italic; 39 | } 40 | 41 | %italic { 42 | @extend %oblique; 43 | } 44 | 45 | %hidden { 46 | display:none; 47 | } 48 | -------------------------------------------------------------------------------- /test/gruntfile.js: -------------------------------------------------------------------------------- 1 | module.exports = function(grunt) { 2 | grunt.initConfig({ 3 | sass: { 4 | options: { 5 | sourceMap: false 6 | }, 7 | dist: { 8 | files: { 9 | 'test.css': 'test.scss' 10 | } 11 | } 12 | } 13 | }); 14 | 15 | grunt.loadNpmTasks('grunt-sass'); 16 | 17 | grunt.registerTask('default', ['sass']); 18 | }; 19 | -------------------------------------------------------------------------------- /test/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "fault-test", 3 | "version": "0.0.0", 4 | "description": "A comprehensive collection of default CSS settings for HTML5 tags as Silent Sass Classes and Mixins", 5 | "main": "gruntfile.js", 6 | "private":true, 7 | "scripts": { 8 | "test": "echo \"Error: no test specified\" && exit 1" 9 | }, 10 | "repository": { 11 | "type": "git", 12 | "url": "git://github.com/jpdevries/fault.git" 13 | }, 14 | "keywords": [ 15 | "Sass", 16 | "HTML", 17 | "CSS" 18 | ], 19 | "author": "JP DeVries", 20 | "license": "MIT", 21 | "bugs": { 22 | "url": "https://github.com/jpdevries/fault/issues" 23 | }, 24 | "homepage": "https://github.com/jpdevries/fault#readme", 25 | "devDependencies": { 26 | "grunt-sass": "^1.1.0" 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /test/test.css: -------------------------------------------------------------------------------- 1 | /* make sure things compile and you can use silent classes as well as mixins (for media queries) */ 2 | body { 3 | display: block; } 4 | 5 | a:link, a:visited { 6 | text-decoration: underline; 7 | cursor: auto; } 8 | 9 | body { 10 | margin: 8px; } 11 | body:focus { 12 | outline: none; } 13 | 14 | @media (max-width: 1024px) { 15 | h2 { 16 | display: block; 17 | font-weight: bold; 18 | font-size: 1.5em; 19 | margin-top: 0.83em; 20 | margin-bottom: 0.83em; 21 | margin-left: 0; 22 | margin-right: 0; } } 23 | -------------------------------------------------------------------------------- /test/test.scss: -------------------------------------------------------------------------------- 1 | /* make sure things compile and you can use silent classes as well as mixins (for media queries) */ 2 | @import '../de/fault'; 3 | 4 | body { 5 | @extend %body; 6 | } 7 | 8 | a { 9 | @extend %a; 10 | } 11 | 12 | h2 { 13 | @media(max-width: 1024px) { 14 | @include h2; 15 | } 16 | } 17 | --------------------------------------------------------------------------------