├── .gitignore ├── LICENSE.txt ├── package.json ├── css ├── css-border-widths.min.css ├── css-border-widths.css ├── border-widths.css └── border-widths.min.css ├── src └── css-border-widths.css └── README.md /.gitignore: -------------------------------------------------------------------------------- 1 | # List of files for git to ignore 2 | 3 | .DS_Store 4 | .AppleDouble 5 | .LSOverride 6 | 7 | # Icon must end with two \r 8 | Icon 9 | 10 | 11 | # Thumbnails 12 | ._* 13 | 14 | # Files that might appear on external disk 15 | .Spotlight-V100 16 | .Trashes 17 | 18 | # Directories potentially created on remote AFP share 19 | .AppleDB 20 | .AppleDesktop 21 | Network Trash Folder 22 | Temporary Items 23 | .apdisk 24 | 25 | # Vim 26 | Session.vim 27 | 28 | # Node 29 | node_modules/* 30 | -------------------------------------------------------------------------------- /LICENSE.txt: -------------------------------------------------------------------------------- 1 | ISC License (ISC) 2 | Copyright (c) 2018, Adam Morse 3 | 4 | Permission to use, copy, modify, and/or distribute this software for any 5 | purpose with or without fee is hereby granted, provided that the above 6 | copyright notice and this permission notice appear in all copies. 7 | 8 | THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH 9 | REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND 10 | FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, 11 | INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM 12 | LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR 13 | OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR 14 | PERFORMANCE OF THIS SOFTWARE. 15 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "css-border-widths", 3 | "style": "border-widths.css", 4 | "version": "1.0.8", 5 | "homepage": "http://github.com/mrmrs/css-border-widths", 6 | "description": "Css module of single purpose classes for border widths", 7 | "keywords": [ 8 | "css", 9 | "oocss", 10 | "border-widths" 11 | ], 12 | "css-border-widths": { 13 | "type": "git", 14 | "url": "http://github.com/mrmrs/css-border-widths.git" 15 | }, 16 | "bugs": { 17 | "url": "https://github.com/mrmrs/css-border-widths/issues", 18 | "email": "hi@mrmrs.cc" 19 | }, 20 | "author": { 21 | "name": "Adam Morse", 22 | "email": "hi@mrmrs.cc", 23 | "url": "http://mrmrs.cc" 24 | }, 25 | "contributors": [ 26 | { 27 | "name": "Adam Morse", 28 | "email": "hi@mrmrs.cc" 29 | } 30 | ], 31 | "license": "MIT", 32 | "devDependencies": { 33 | "tachyons-cli": "^1.3.0" 34 | }, 35 | "scripts": { 36 | "start": "tachyons src/css-border-widths.css > css/css-border-widths.css && tachyons src/css-border-widths.css --minify > css/css-border-widths.min.css && tachyons src/css-border-widths.css --generate-docs --package=../../package.json > readme.md" 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /css/css-border-widths.min.css: -------------------------------------------------------------------------------- 1 | .baw0{border-width:0}.baw1{border-width:.125rem}.baw2{border-width:.25rem}.baw3{border-width:.5rem}.baw4{border-width:.75rem}.baw5{border-width:1rem}.btw0{border-top-width:0}.btw1{border-top-width:.125rem}.btw2{border-top-width:.25rem}.btw3{border-top-width:.5rem}.btw4{border-top-width:.75rem}.btw5{border-top-width:1rem}.bbw0{border-bottom-width:0}.bbw1{border-bottom-width:.125rem}.bbw2{border-bottom-width:.25rem}.bbw3{border-bottom-width:.5rem}.bbw4{border-bottom-width:.75rem}.bbw5{border-bottom-width:1rem}.blw0{border-left-width:0}.blw1{border-left-width:.125rem}.blw2{border-left-width:.25rem}.blw3{border-left-width:.5rem}.blw4{border-left-width:.75rem}.blw5{border-left-width:1rem}.brw0{border-right-width:0}.brw1{border-right-width:.125rem}.brw2{border-right-width:.25rem}.brw3{border-right-width:.5rem}.brw4{border-right-width:.75rem}.brw5{border-right-width:1rem}@media screen and (min-width:48em){.baw0-ns{border-width:0}.baw1-ns{border-width:.125rem}.baw2-ns,.baw3-ns{border-width:.25rem}.baw4-ns{border-width:.75rem}.baw5-ns{border-width:1rem}.btw0-ns{border-top-width:0}.btw1-ns{border-top-width:.125rem}.btw2-ns{border-top-width:.25rem}.btw3-ns{border-top-width:.5rem}.btw4-ns{border-top-width:.75rem}.btw5-ns{border-top-width:1rem}.bbw0-ns{border-bottom-width:0}.bbw1-ns{border-bottom-width:.125rem}.bbw2-ns{border-bottom-width:.25rem}.bbw3-ns{border-bottom-width:.5rem}.bbw4-ns{border-bottom-width:.75rem}.bbw5-ns{border-bottom-width:1rem}.blw0-ns{border-left-width:0}.blw1-ns{border-left-width:.125rem}.blw2-ns{border-left-width:.25rem}.blw3-ns{border-left-width:.5rem}.blw4-ns{border-left-width:.75rem}.blw5-ns{border-left-width:1rem}.brw0-ns{border-right-width:0}.brw1-ns{border-right-width:.125rem}.brw2-ns{border-right-width:.25rem}.brw3-ns{border-right-width:.5rem}.brw4-ns{border-right-width:.75rem}.brw5-ns{border-right-width:1rem}}@media screen and (min-width:48em) and (max-width:64em){.baw0-m{border-width:0}.baw1-m{border-width:.125rem}.baw2-m{border-width:.25rem}.baw3-m{border-width:.5rem}.baw4-m{border-width:.75rem}.baw5-m{border-width:1rem}.btw0-m{border-top-width:0}.btw1-m{border-top-width:.125rem}.btw2-m{border-top-width:.25rem}.btw3-m{border-top-width:.5rem}.btw4-m{border-top-width:.75rem}.btw5-m{border-top-width:1rem}.bbw0-m{border-bottom-width:0}.bbw1-m{border-bottom-width:.125rem}.bbw2-m{border-bottom-width:.25rem}.bbw3-m{border-bottom-width:.5rem}.bbw4-m{border-bottom-width:.75rem}.bbw5-m{border-bottom-width:1rem}.blw0-m{border-left-width:0}.blw1-m{border-left-width:.125rem}.blw2-m{border-left-width:.25rem}.blw3-m{border-left-width:.5rem}.blw4-m{border-left-width:.75rem}.blw5-m{border-left-width:1rem}.brw0-m{border-right-width:0}.brw1-m{border-right-width:.125rem}.brw2-m{border-right-width:.25rem}.brw3-m{border-right-width:.5rem}.brw4-m{border-right-width:.75rem}.brw5-m{border-right-width:1rem}}@media screen and (min-width:64em){.baw0-l{border-width:0}.baw1-l{border-width:.125rem}.baw2-l{border-width:.25rem}.baw3-l{border-width:.5rem}.baw4-l{border-width:.75rem}.baw5-l{border-width:1rem}.btw0-l{border-top-width:0}.btw1-l{border-top-width:.125rem}.btw2-l{border-top-width:.25rem}.btw3-l{border-top-width:.5rem}.btw4-l{border-top-width:.75rem}.btw5-l{border-top-width:1rem}.bbw0-l{border-bottom-width:0}.bbw1-l{border-bottom-width:.125rem}.bbw2-l{border-bottom-width:.25rem}.bbw3-l{border-bottom-width:.5rem}.bbw4-l{border-bottom-width:.75rem}.bbw5-l{border-bottom-width:1rem}.blw0-l{border-left-width:0}.blw1-l{border-left-width:.125rem}.blw2-l{border-left-width:.25rem}.blw3-l{border-left-width:.5rem}.blw4-l{border-left-width:.75rem}.blw5-l{border-left-width:1rem}.brw0-l{border-right-width:0}.brw1-l{border-right-width:.125rem}.brw2-l{border-right-width:.25rem}.brw3-l{border-right-width:.5rem}.brw4-l{border-right-width:.75rem}.brw5-l{border-right-width:1rem}} 2 | 3 | -------------------------------------------------------------------------------- /css/css-border-widths.css: -------------------------------------------------------------------------------- 1 | /* 2 | BORDER WIDTHS 3 | 4 | LEGEND 5 | 6 | b = border 7 | 8 | a = all 9 | t = top 10 | b = bottom 11 | l = left 12 | r = right 13 | 14 | w = width 15 | 16 | 0-5 = step in sizing scale 17 | 18 | */ 19 | .baw0 { border-width: 0; } 20 | .baw1 { border-width: .125rem; } 21 | .baw2 { border-width: .25rem; } 22 | .baw3 { border-width: .5rem; } 23 | .baw4 { border-width: .75rem; } 24 | .baw5 { border-width: 1rem; } 25 | .btw0 { border-top-width: 0; } 26 | .btw1 { border-top-width: .125rem; } 27 | .btw2 { border-top-width: .25rem; } 28 | .btw3 { border-top-width: .5rem; } 29 | .btw4 { border-top-width: .75rem; } 30 | .btw5 { border-top-width: 1rem; } 31 | .bbw0 { border-bottom-width: 0; } 32 | .bbw1 { border-bottom-width: .125rem; } 33 | .bbw2 { border-bottom-width: .25rem; } 34 | .bbw3 { border-bottom-width: .5rem; } 35 | .bbw4 { border-bottom-width: .75rem; } 36 | .bbw5 { border-bottom-width: 1rem; } 37 | .blw0 { border-left-width: 0; } 38 | .blw1 { border-left-width: .125rem; } 39 | .blw2 { border-left-width: .25rem; } 40 | .blw3 { border-left-width: .5rem; } 41 | .blw4 { border-left-width: .75rem; } 42 | .blw5 { border-left-width: 1rem; } 43 | .brw0 { border-right-width: 0; } 44 | .brw1 { border-right-width: .125rem; } 45 | .brw2 { border-right-width: .25rem; } 46 | .brw3 { border-right-width: .5rem; } 47 | .brw4 { border-right-width: .75rem; } 48 | .brw5 { border-right-width: 1rem; } 49 | @media screen and (min-width: 48em) { 50 | .baw0-ns { border-width: 0; } 51 | .baw1-ns { border-width: .125rem; } 52 | .baw2-ns { border-width: .25rem; } 53 | .baw3-ns { border-width: .25rem; } 54 | .baw4-ns { border-width: .75rem; } 55 | .baw5-ns { border-width: 1rem; } 56 | .btw0-ns { border-top-width: 0; } 57 | .btw1-ns { border-top-width: .125rem; } 58 | .btw2-ns { border-top-width: .25rem; } 59 | .btw3-ns { border-top-width: .5rem; } 60 | .btw4-ns { border-top-width: .75rem; } 61 | .btw5-ns { border-top-width: 1rem; } 62 | .bbw0-ns { border-bottom-width: 0; } 63 | .bbw1-ns { border-bottom-width: .125rem; } 64 | .bbw2-ns { border-bottom-width: .25rem; } 65 | .bbw3-ns { border-bottom-width: .5rem; } 66 | .bbw4-ns { border-bottom-width: .75rem; } 67 | .bbw5-ns { border-bottom-width: 1rem; } 68 | .blw0-ns { border-left-width: 0; } 69 | .blw1-ns { border-left-width: .125rem; } 70 | .blw2-ns { border-left-width: .25rem; } 71 | .blw3-ns { border-left-width: .5rem; } 72 | .blw4-ns { border-left-width: .75rem; } 73 | .blw5-ns { border-left-width: 1rem; } 74 | .brw0-ns { border-right-width: 0; } 75 | .brw1-ns { border-right-width: .125rem; } 76 | .brw2-ns { border-right-width: .25rem; } 77 | .brw3-ns { border-right-width: .5rem; } 78 | .brw4-ns { border-right-width: .75rem; } 79 | .brw5-ns { border-right-width: 1rem; } 80 | } 81 | @media screen and (min-width:48em) and (max-width: 64em) { 82 | .baw0-m { border-width: 0; } 83 | .baw1-m { border-width: .125rem; } 84 | .baw2-m { border-width: .25rem; } 85 | .baw3-m { border-width: .5rem; } 86 | .baw4-m { border-width: .75rem; } 87 | .baw5-m { border-width: 1rem; } 88 | .btw0-m { border-top-width: 0; } 89 | .btw1-m { border-top-width: .125rem; } 90 | .btw2-m { border-top-width: .25rem; } 91 | .btw3-m { border-top-width: .5rem; } 92 | .btw4-m { border-top-width: .75rem; } 93 | .btw5-m { border-top-width: 1rem; } 94 | .bbw0-m { border-bottom-width: 0; } 95 | .bbw1-m { border-bottom-width: .125rem; } 96 | .bbw2-m { border-bottom-width: .25rem; } 97 | .bbw3-m { border-bottom-width: .5rem; } 98 | .bbw4-m { border-bottom-width: .75rem; } 99 | .bbw5-m { border-bottom-width: 1rem; } 100 | .blw0-m { border-left-width: 0; } 101 | .blw1-m { border-left-width: .125rem; } 102 | .blw2-m { border-left-width: .25rem; } 103 | .blw3-m { border-left-width: .5rem; } 104 | .blw4-m { border-left-width: .75rem; } 105 | .blw5-m { border-left-width: 1rem; } 106 | .brw0-m { border-right-width: 0; } 107 | .brw1-m { border-right-width: .125rem; } 108 | .brw2-m { border-right-width: .25rem; } 109 | .brw3-m { border-right-width: .5rem; } 110 | .brw4-m { border-right-width: .75rem; } 111 | .brw5-m { border-right-width: 1rem; } 112 | } 113 | @media screen and (min-width: 64em) { 114 | .baw0-l { border-width: 0; } 115 | .baw1-l { border-width: .125rem; } 116 | .baw2-l { border-width: .25rem; } 117 | .baw3-l { border-width: .5rem; } 118 | .baw4-l { border-width: .75rem; } 119 | .baw5-l { border-width: 1rem; } 120 | .btw0-l { border-top-width: 0; } 121 | .btw1-l { border-top-width: .125rem; } 122 | .btw2-l { border-top-width: .25rem; } 123 | .btw3-l { border-top-width: .5rem; } 124 | .btw4-l { border-top-width: .75rem; } 125 | .btw5-l { border-top-width: 1rem; } 126 | .bbw0-l { border-bottom-width: 0; } 127 | .bbw1-l { border-bottom-width: .125rem; } 128 | .bbw2-l { border-bottom-width: .25rem; } 129 | .bbw3-l { border-bottom-width: .5rem; } 130 | .bbw4-l { border-bottom-width: .75rem; } 131 | .bbw5-l { border-bottom-width: 1rem; } 132 | .blw0-l { border-left-width: 0; } 133 | .blw1-l { border-left-width: .125rem; } 134 | .blw2-l { border-left-width: .25rem; } 135 | .blw3-l { border-left-width: .5rem; } 136 | .blw4-l { border-left-width: .75rem; } 137 | .blw5-l { border-left-width: 1rem; } 138 | .brw0-l { border-right-width: 0; } 139 | .brw1-l { border-right-width: .125rem; } 140 | .brw2-l { border-right-width: .25rem; } 141 | .brw3-l { border-right-width: .5rem; } 142 | .brw4-l { border-right-width: .75rem; } 143 | .brw5-l { border-right-width: 1rem; } 144 | } 145 | 146 | -------------------------------------------------------------------------------- /css/border-widths.css: -------------------------------------------------------------------------------- 1 | /* 2 | BORDER WIDTHS 3 | 4 | LEGEND 5 | 6 | b = border 7 | 8 | a = all 9 | t = top 10 | b = bottom 11 | l = left 12 | r = right 13 | 14 | w = width 15 | 16 | 0-5 = step in sizing scale 17 | 18 | */ 19 | 20 | .baw0 { border-width: 0; } 21 | .baw1 { border-width: .125rem; } 22 | .baw2 { border-width: .25rem; } 23 | .baw3 { border-width: .5rem; } 24 | .baw4 { border-width: .75rem; } 25 | .baw5 { border-width: 1rem; } 26 | 27 | .btw0 { border-top-width: 0; } 28 | .btw1 { border-top-width: .125rem; } 29 | .btw2 { border-top-width: .25rem; } 30 | .btw3 { border-top-width: .5rem; } 31 | .btw4 { border-top-width: .75rem; } 32 | .btw5 { border-top-width: 1rem; } 33 | 34 | .bbw0 { border-bottom-width: 0; } 35 | .bbw1 { border-bottom-width: .125rem; } 36 | .bbw2 { border-bottom-width: .25rem; } 37 | .bbw3 { border-bottom-width: .5rem; } 38 | .bbw4 { border-bottom-width: .75rem; } 39 | .bbw5 { border-bottom-width: 1rem; } 40 | 41 | .blw0 { border-left-width: 0; } 42 | .blw1 { border-left-width: .125rem; } 43 | .blw2 { border-left-width: .25rem; } 44 | .blw3 { border-left-width: .5rem; } 45 | .blw4 { border-left-width: .75rem; } 46 | .blw5 { border-left-width: 1rem; } 47 | 48 | .brw0 { border-right-width: 0; } 49 | .brw1 { border-right-width: .125rem; } 50 | .brw2 { border-right-width: .25rem; } 51 | .brw3 { border-right-width: .5rem; } 52 | .brw4 { border-right-width: .75rem; } 53 | .brw5 { border-right-width: 1rem; } 54 | 55 | @media screen and (min-width: 48em) { 56 | .baw0-ns { border-width: 0; } 57 | .baw1-ns { border-width: .125rem; } 58 | .baw2-ns { border-width: .25rem; } 59 | .baw3-ns { border-width: .25rem; } 60 | .baw4-ns { border-width: .75rem; } 61 | .baw5-ns { border-width: 1rem; } 62 | 63 | .btw0-ns { border-top-width: 0; } 64 | .btw1-ns { border-top-width: .125rem; } 65 | .btw2-ns { border-top-width: .25rem; } 66 | .btw3-ns { border-top-width: .5rem; } 67 | .btw4-ns { border-top-width: .75rem; } 68 | .btw5-ns { border-top-width: 1rem; } 69 | 70 | .bbw0-ns { border-bottom-width: 0; } 71 | .bbw1-ns { border-bottom-width: .125rem; } 72 | .bbw2-ns { border-bottom-width: .25rem; } 73 | .bbw3-ns { border-bottom-width: .5rem; } 74 | .bbw4-ns { border-bottom-width: .75rem; } 75 | .bbw5-ns { border-bottom-width: 1rem; } 76 | 77 | .blw0-ns { border-left-width: 0; } 78 | .blw1-ns { border-left-width: .125rem; } 79 | .blw2-ns { border-left-width: .25rem; } 80 | .blw3-ns { border-left-width: .5rem; } 81 | .blw4-ns { border-left-width: .75rem; } 82 | .blw5-ns { border-left-width: 1rem; } 83 | 84 | .brw0-ns { border-right-width: 0; } 85 | .brw1-ns { border-right-width: .125rem; } 86 | .brw2-ns { border-right-width: .25rem; } 87 | .brw3-ns { border-right-width: .5rem; } 88 | .brw4-ns { border-right-width: .75rem; } 89 | .brw5-ns { border-right-width: 1rem; } 90 | 91 | } 92 | 93 | @media screen and (min-width:48em) and (max-width: 64em) { 94 | .baw0-m { border-width: 0; } 95 | .baw1-m { border-width: .125rem; } 96 | .baw2-m { border-width: .25rem; } 97 | .baw3-m { border-width: .5rem; } 98 | .baw4-m { border-width: .75rem; } 99 | .baw5-m { border-width: 1rem; } 100 | 101 | .btw0-m { border-top-width: 0; } 102 | .btw1-m { border-top-width: .125rem; } 103 | .btw2-m { border-top-width: .25rem; } 104 | .btw3-m { border-top-width: .5rem; } 105 | .btw4-m { border-top-width: .75rem; } 106 | .btw5-m { border-top-width: 1rem; } 107 | 108 | .bbw0-m { border-bottom-width: 0; } 109 | .bbw1-m { border-bottom-width: .125rem; } 110 | .bbw2-m { border-bottom-width: .25rem; } 111 | .bbw3-m { border-bottom-width: .5rem; } 112 | .bbw4-m { border-bottom-width: .75rem; } 113 | .bbw5-m { border-bottom-width: 1rem; } 114 | 115 | .blw0-m { border-left-width: 0; } 116 | .blw1-m { border-left-width: .125rem; } 117 | .blw2-m { border-left-width: .25rem; } 118 | .blw3-m { border-left-width: .5rem; } 119 | .blw4-m { border-left-width: .75rem; } 120 | .blw5-m { border-left-width: 1rem; } 121 | 122 | .brw0-m { border-right-width: 0; } 123 | .brw1-m { border-right-width: .125rem; } 124 | .brw2-m { border-right-width: .25rem; } 125 | .brw3-m { border-right-width: .5rem; } 126 | .brw4-m { border-right-width: .75rem; } 127 | .brw5-m { border-right-width: 1rem; } 128 | } 129 | 130 | @media screen and (min-width: 64em) { 131 | .baw0-l { border-width: 0; } 132 | .baw1-l { border-width: .125rem; } 133 | .baw2-l { border-width: .25rem; } 134 | .baw3-l { border-width: .5rem; } 135 | .baw4-l { border-width: .75rem; } 136 | .baw5-l { border-width: 1rem; } 137 | 138 | .btw0-l { border-top-width: 0; } 139 | .btw1-l { border-top-width: .125rem; } 140 | .btw2-l { border-top-width: .25rem; } 141 | .btw3-l { border-top-width: .5rem; } 142 | .btw4-l { border-top-width: .75rem; } 143 | .btw5-l { border-top-width: 1rem; } 144 | 145 | .bbw0-l { border-bottom-width: 0; } 146 | .bbw1-l { border-bottom-width: .125rem; } 147 | .bbw2-l { border-bottom-width: .25rem; } 148 | .bbw3-l { border-bottom-width: .5rem; } 149 | .bbw4-l { border-bottom-width: .75rem; } 150 | .bbw5-l { border-bottom-width: 1rem; } 151 | 152 | .blw0-l { border-left-width: 0; } 153 | .blw1-l { border-left-width: .125rem; } 154 | .blw2-l { border-left-width: .25rem; } 155 | .blw3-l { border-left-width: .5rem; } 156 | .blw4-l { border-left-width: .75rem; } 157 | .blw5-l { border-left-width: 1rem; } 158 | 159 | .brw0-l { border-right-width: 0; } 160 | .brw1-l { border-right-width: .125rem; } 161 | .brw2-l { border-right-width: .25rem; } 162 | .brw3-l { border-right-width: .5rem; } 163 | .brw4-l { border-right-width: .75rem; } 164 | .brw5-l { border-right-width: 1rem; } 165 | } 166 | 167 | -------------------------------------------------------------------------------- /css/border-widths.min.css: -------------------------------------------------------------------------------- 1 | /* 2 | BORDER WIDTHS 3 | 4 | LEGEND 5 | 6 | b = border 7 | 8 | a = all 9 | t = top 10 | b = bottom 11 | l = left 12 | r = right 13 | 14 | w = width 15 | 16 | 0-5 = step in sizing scale 17 | 18 | */ 19 | 20 | .baw0 { border-width: 0; } 21 | .baw1 { border-width: .125rem; } 22 | .baw2 { border-width: .25rem; } 23 | .baw3 { border-width: .5rem; } 24 | .baw4 { border-width: .75rem; } 25 | .baw5 { border-width: 1rem; } 26 | 27 | .btw0 { border-top-width: 0; } 28 | .btw1 { border-top-width: .125rem; } 29 | .btw2 { border-top-width: .25rem; } 30 | .btw3 { border-top-width: .5rem; } 31 | .btw4 { border-top-width: .75rem; } 32 | .btw5 { border-top-width: 1rem; } 33 | 34 | .bbw0 { border-bottom-width: 0; } 35 | .bbw1 { border-bottom-width: .125rem; } 36 | .bbw2 { border-bottom-width: .25rem; } 37 | .bbw3 { border-bottom-width: .5rem; } 38 | .bbw4 { border-bottom-width: .75rem; } 39 | .bbw5 { border-bottom-width: 1rem; } 40 | 41 | .blw0 { border-left-width: 0; } 42 | .blw1 { border-left-width: .125rem; } 43 | .blw2 { border-left-width: .25rem; } 44 | .blw3 { border-left-width: .5rem; } 45 | .blw4 { border-left-width: .75rem; } 46 | .blw5 { border-left-width: 1rem; } 47 | 48 | .brw0 { border-right-width: 0; } 49 | .brw1 { border-right-width: .125rem; } 50 | .brw2 { border-right-width: .25rem; } 51 | .brw3 { border-right-width: .5rem; } 52 | .brw4 { border-right-width: .75rem; } 53 | .brw5 { border-right-width: 1rem; } 54 | 55 | @media screen and (min-width: 48em) { 56 | .baw0-ns { border-width: 0; } 57 | .baw1-ns { border-width: .125rem; } 58 | .baw2-ns { border-width: .25rem; } 59 | .baw3-ns { border-width: .25rem; } 60 | .baw4-ns { border-width: .75rem; } 61 | .baw5-ns { border-width: 1rem; } 62 | 63 | .btw0-ns { border-top-width: 0; } 64 | .btw1-ns { border-top-width: .125rem; } 65 | .btw2-ns { border-top-width: .25rem; } 66 | .btw3-ns { border-top-width: .5rem; } 67 | .btw4-ns { border-top-width: .75rem; } 68 | .btw5-ns { border-top-width: 1rem; } 69 | 70 | .bbw0-ns { border-bottom-width: 0; } 71 | .bbw1-ns { border-bottom-width: .125rem; } 72 | .bbw2-ns { border-bottom-width: .25rem; } 73 | .bbw3-ns { border-bottom-width: .5rem; } 74 | .bbw4-ns { border-bottom-width: .75rem; } 75 | .bbw5-ns { border-bottom-width: 1rem; } 76 | 77 | .blw0-ns { border-left-width: 0; } 78 | .blw1-ns { border-left-width: .125rem; } 79 | .blw2-ns { border-left-width: .25rem; } 80 | .blw3-ns { border-left-width: .5rem; } 81 | .blw4-ns { border-left-width: .75rem; } 82 | .blw5-ns { border-left-width: 1rem; } 83 | 84 | .brw0-ns { border-right-width: 0; } 85 | .brw1-ns { border-right-width: .125rem; } 86 | .brw2-ns { border-right-width: .25rem; } 87 | .brw3-ns { border-right-width: .5rem; } 88 | .brw4-ns { border-right-width: .75rem; } 89 | .brw5-ns { border-right-width: 1rem; } 90 | 91 | } 92 | 93 | @media screen and (min-width:48em) and (max-width: 64em) { 94 | .baw0-m { border-width: 0; } 95 | .baw1-m { border-width: .125rem; } 96 | .baw2-m { border-width: .25rem; } 97 | .baw3-m { border-width: .5rem; } 98 | .baw4-m { border-width: .75rem; } 99 | .baw5-m { border-width: 1rem; } 100 | 101 | .btw0-m { border-top-width: 0; } 102 | .btw1-m { border-top-width: .125rem; } 103 | .btw2-m { border-top-width: .25rem; } 104 | .btw3-m { border-top-width: .5rem; } 105 | .btw4-m { border-top-width: .75rem; } 106 | .btw5-m { border-top-width: 1rem; } 107 | 108 | .bbw0-m { border-bottom-width: 0; } 109 | .bbw1-m { border-bottom-width: .125rem; } 110 | .bbw2-m { border-bottom-width: .25rem; } 111 | .bbw3-m { border-bottom-width: .5rem; } 112 | .bbw4-m { border-bottom-width: .75rem; } 113 | .bbw5-m { border-bottom-width: 1rem; } 114 | 115 | .blw0-m { border-left-width: 0; } 116 | .blw1-m { border-left-width: .125rem; } 117 | .blw2-m { border-left-width: .25rem; } 118 | .blw3-m { border-left-width: .5rem; } 119 | .blw4-m { border-left-width: .75rem; } 120 | .blw5-m { border-left-width: 1rem; } 121 | 122 | .brw0-m { border-right-width: 0; } 123 | .brw1-m { border-right-width: .125rem; } 124 | .brw2-m { border-right-width: .25rem; } 125 | .brw3-m { border-right-width: .5rem; } 126 | .brw4-m { border-right-width: .75rem; } 127 | .brw5-m { border-right-width: 1rem; } 128 | } 129 | 130 | @media screen and (min-width: 64em) { 131 | .baw0-l { border-width: 0; } 132 | .baw1-l { border-width: .125rem; } 133 | .baw2-l { border-width: .25rem; } 134 | .baw3-l { border-width: .5rem; } 135 | .baw4-l { border-width: .75rem; } 136 | .baw5-l { border-width: 1rem; } 137 | 138 | .btw0-l { border-top-width: 0; } 139 | .btw1-l { border-top-width: .125rem; } 140 | .btw2-l { border-top-width: .25rem; } 141 | .btw3-l { border-top-width: .5rem; } 142 | .btw4-l { border-top-width: .75rem; } 143 | .btw5-l { border-top-width: 1rem; } 144 | 145 | .bbw0-l { border-bottom-width: 0; } 146 | .bbw1-l { border-bottom-width: .125rem; } 147 | .bbw2-l { border-bottom-width: .25rem; } 148 | .bbw3-l { border-bottom-width: .5rem; } 149 | .bbw4-l { border-bottom-width: .75rem; } 150 | .bbw5-l { border-bottom-width: 1rem; } 151 | 152 | .blw0-l { border-left-width: 0; } 153 | .blw1-l { border-left-width: .125rem; } 154 | .blw2-l { border-left-width: .25rem; } 155 | .blw3-l { border-left-width: .5rem; } 156 | .blw4-l { border-left-width: .75rem; } 157 | .blw5-l { border-left-width: 1rem; } 158 | 159 | .brw0-l { border-right-width: 0; } 160 | .brw1-l { border-right-width: .125rem; } 161 | .brw2-l { border-right-width: .25rem; } 162 | .brw3-l { border-right-width: .5rem; } 163 | .brw4-l { border-right-width: .75rem; } 164 | .brw5-l { border-right-width: 1rem; } 165 | } 166 | 167 | -------------------------------------------------------------------------------- /src/css-border-widths.css: -------------------------------------------------------------------------------- 1 | /* 2 | BORDER WIDTHS 3 | 4 | LEGEND 5 | 6 | b = border 7 | 8 | a = all 9 | t = top 10 | b = bottom 11 | l = left 12 | r = right 13 | 14 | w = width 15 | 16 | 0-5 = step in sizing scale 17 | 18 | */ 19 | 20 | .baw0 { border-width: 0; } 21 | .baw1 { border-width: .125rem; } 22 | .baw2 { border-width: .25rem; } 23 | .baw3 { border-width: .5rem; } 24 | .baw4 { border-width: .75rem; } 25 | .baw5 { border-width: 1rem; } 26 | 27 | .btw0 { border-top-width: 0; } 28 | .btw1 { border-top-width: .125rem; } 29 | .btw2 { border-top-width: .25rem; } 30 | .btw3 { border-top-width: .5rem; } 31 | .btw4 { border-top-width: .75rem; } 32 | .btw5 { border-top-width: 1rem; } 33 | 34 | .bbw0 { border-bottom-width: 0; } 35 | .bbw1 { border-bottom-width: .125rem; } 36 | .bbw2 { border-bottom-width: .25rem; } 37 | .bbw3 { border-bottom-width: .5rem; } 38 | .bbw4 { border-bottom-width: .75rem; } 39 | .bbw5 { border-bottom-width: 1rem; } 40 | 41 | .blw0 { border-left-width: 0; } 42 | .blw1 { border-left-width: .125rem; } 43 | .blw2 { border-left-width: .25rem; } 44 | .blw3 { border-left-width: .5rem; } 45 | .blw4 { border-left-width: .75rem; } 46 | .blw5 { border-left-width: 1rem; } 47 | 48 | .brw0 { border-right-width: 0; } 49 | .brw1 { border-right-width: .125rem; } 50 | .brw2 { border-right-width: .25rem; } 51 | .brw3 { border-right-width: .5rem; } 52 | .brw4 { border-right-width: .75rem; } 53 | .brw5 { border-right-width: 1rem; } 54 | 55 | @media screen and (min-width: 48em) { 56 | .baw0-ns { border-width: 0; } 57 | .baw1-ns { border-width: .125rem; } 58 | .baw2-ns { border-width: .25rem; } 59 | .baw3-ns { border-width: .25rem; } 60 | .baw4-ns { border-width: .75rem; } 61 | .baw5-ns { border-width: 1rem; } 62 | 63 | .btw0-ns { border-top-width: 0; } 64 | .btw1-ns { border-top-width: .125rem; } 65 | .btw2-ns { border-top-width: .25rem; } 66 | .btw3-ns { border-top-width: .5rem; } 67 | .btw4-ns { border-top-width: .75rem; } 68 | .btw5-ns { border-top-width: 1rem; } 69 | 70 | .bbw0-ns { border-bottom-width: 0; } 71 | .bbw1-ns { border-bottom-width: .125rem; } 72 | .bbw2-ns { border-bottom-width: .25rem; } 73 | .bbw3-ns { border-bottom-width: .5rem; } 74 | .bbw4-ns { border-bottom-width: .75rem; } 75 | .bbw5-ns { border-bottom-width: 1rem; } 76 | 77 | .blw0-ns { border-left-width: 0; } 78 | .blw1-ns { border-left-width: .125rem; } 79 | .blw2-ns { border-left-width: .25rem; } 80 | .blw3-ns { border-left-width: .5rem; } 81 | .blw4-ns { border-left-width: .75rem; } 82 | .blw5-ns { border-left-width: 1rem; } 83 | 84 | .brw0-ns { border-right-width: 0; } 85 | .brw1-ns { border-right-width: .125rem; } 86 | .brw2-ns { border-right-width: .25rem; } 87 | .brw3-ns { border-right-width: .5rem; } 88 | .brw4-ns { border-right-width: .75rem; } 89 | .brw5-ns { border-right-width: 1rem; } 90 | 91 | } 92 | 93 | @media screen and (min-width:48em) and (max-width: 64em) { 94 | .baw0-m { border-width: 0; } 95 | .baw1-m { border-width: .125rem; } 96 | .baw2-m { border-width: .25rem; } 97 | .baw3-m { border-width: .5rem; } 98 | .baw4-m { border-width: .75rem; } 99 | .baw5-m { border-width: 1rem; } 100 | 101 | .btw0-m { border-top-width: 0; } 102 | .btw1-m { border-top-width: .125rem; } 103 | .btw2-m { border-top-width: .25rem; } 104 | .btw3-m { border-top-width: .5rem; } 105 | .btw4-m { border-top-width: .75rem; } 106 | .btw5-m { border-top-width: 1rem; } 107 | 108 | .bbw0-m { border-bottom-width: 0; } 109 | .bbw1-m { border-bottom-width: .125rem; } 110 | .bbw2-m { border-bottom-width: .25rem; } 111 | .bbw3-m { border-bottom-width: .5rem; } 112 | .bbw4-m { border-bottom-width: .75rem; } 113 | .bbw5-m { border-bottom-width: 1rem; } 114 | 115 | .blw0-m { border-left-width: 0; } 116 | .blw1-m { border-left-width: .125rem; } 117 | .blw2-m { border-left-width: .25rem; } 118 | .blw3-m { border-left-width: .5rem; } 119 | .blw4-m { border-left-width: .75rem; } 120 | .blw5-m { border-left-width: 1rem; } 121 | 122 | .brw0-m { border-right-width: 0; } 123 | .brw1-m { border-right-width: .125rem; } 124 | .brw2-m { border-right-width: .25rem; } 125 | .brw3-m { border-right-width: .5rem; } 126 | .brw4-m { border-right-width: .75rem; } 127 | .brw5-m { border-right-width: 1rem; } 128 | } 129 | 130 | @media screen and (min-width: 64em) { 131 | .baw0-l { border-width: 0; } 132 | .baw1-l { border-width: .125rem; } 133 | .baw2-l { border-width: .25rem; } 134 | .baw3-l { border-width: .5rem; } 135 | .baw4-l { border-width: .75rem; } 136 | .baw5-l { border-width: 1rem; } 137 | 138 | .btw0-l { border-top-width: 0; } 139 | .btw1-l { border-top-width: .125rem; } 140 | .btw2-l { border-top-width: .25rem; } 141 | .btw3-l { border-top-width: .5rem; } 142 | .btw4-l { border-top-width: .75rem; } 143 | .btw5-l { border-top-width: 1rem; } 144 | 145 | .bbw0-l { border-bottom-width: 0; } 146 | .bbw1-l { border-bottom-width: .125rem; } 147 | .bbw2-l { border-bottom-width: .25rem; } 148 | .bbw3-l { border-bottom-width: .5rem; } 149 | .bbw4-l { border-bottom-width: .75rem; } 150 | .bbw5-l { border-bottom-width: 1rem; } 151 | 152 | .blw0-l { border-left-width: 0; } 153 | .blw1-l { border-left-width: .125rem; } 154 | .blw2-l { border-left-width: .25rem; } 155 | .blw3-l { border-left-width: .5rem; } 156 | .blw4-l { border-left-width: .75rem; } 157 | .blw5-l { border-left-width: 1rem; } 158 | 159 | .brw0-l { border-right-width: 0; } 160 | .brw1-l { border-right-width: .125rem; } 161 | .brw2-l { border-right-width: .25rem; } 162 | .brw3-l { border-right-width: .5rem; } 163 | .brw4-l { border-right-width: .75rem; } 164 | .brw5-l { border-right-width: 1rem; } 165 | } 166 | 167 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # css-border-widths 1.0.6 2 | 3 | Css module of single purpose classes for border widths 4 | 5 | #### Stats 6 | 7 | 693 | 120 | 120 8 | ---|---|--- 9 | bytes | selectors | declarations 10 | 11 | ## Installation 12 | 13 | #### With [npm](https://npmjs.com) 14 | 15 | ``` 16 | npm install --save-dev css-border-widths 17 | ``` 18 | 19 | Learn more about using css installed with npm: 20 | * https://webpack.github.io/docs/stylesheets.html 21 | * https://github.com/defunctzombie/npm-css 22 | 23 | #### With Git 24 | 25 | http: 26 | ``` 27 | git clone https://github.com/tachyons-css/css-border-widths 28 | ``` 29 | 30 | ssh: 31 | ``` 32 | git clone git@github.com:tachyons-css/css-border-widths.git 33 | ``` 34 | 35 | ## Usage 36 | 37 | #### Using with [Postcss](https://github.com/postcss/postcss) 38 | 39 | Import the css module 40 | 41 | ```css 42 | @import "css-border-widths"; 43 | ``` 44 | 45 | Then process the css using the [`tachyons-cli`](https://github.com/tachyons-css/tachyons-cli) 46 | 47 | ```sh 48 | $ npm i -g tachyons-cli 49 | $ tachyons path/to/css-file.css > dist/t.css 50 | ``` 51 | 52 | #### Using the css 53 | 54 | ##### CDN 55 | The easiest and most simple way to use the css is to use the cdn hosted version. Include it in the head of your html with: 56 | 57 | ``` 58 | 59 | ``` 60 | 61 | ##### Locally 62 | The built css is located in the `css` directory. It contains an unminified and minified version. 63 | You can either cut and paste that css or link to it directly in your html. 64 | 65 | ```html 66 | 67 | ``` 68 | 69 | #### Development 70 | 71 | The source css files can be found in the `src` directory. 72 | Running `$ npm start` will process the source css and place the built css in the `css` directory. 73 | 74 | ## The css 75 | 76 | ```css 77 | /* 78 | BORDER WIDTHS 79 | 80 | LEGEND 81 | 82 | b = border 83 | 84 | a = all 85 | t = top 86 | b = bottom 87 | l = left 88 | r = right 89 | 90 | w = width 91 | 92 | 0-5 = step in sizing scale 93 | 94 | */ 95 | .baw0 { border-width: 0; } 96 | .baw1 { border-width: .125rem; } 97 | .baw2 { border-width: .25rem; } 98 | .baw3 { border-width: .5rem; } 99 | .baw4 { border-width: .75rem; } 100 | .baw5 { border-width: 1rem; } 101 | .btw0 { border-top-width: 0; } 102 | .btw1 { border-top-width: .125rem; } 103 | .btw2 { border-top-width: .25rem; } 104 | .btw3 { border-top-width: .5rem; } 105 | .btw4 { border-top-width: .75rem; } 106 | .btw5 { border-top-width: 1rem; } 107 | .bbw0 { border-bottom-width: 0; } 108 | .bbw1 { border-bottom-width: .125rem; } 109 | .bbw2 { border-bottom-width: .25rem; } 110 | .bbw3 { border-bottom-width: .5rem; } 111 | .bbw4 { border-bottom-width: .75rem; } 112 | .bbw5 { border-bottom-width: 1rem; } 113 | .blw0 { border-left-width: 0; } 114 | .blw1 { border-left-width: .125rem; } 115 | .blw2 { border-left-width: .25rem; } 116 | .blw3 { border-left-width: .5rem; } 117 | .blw4 { border-left-width: .75rem; } 118 | .blw5 { border-left-width: 1rem; } 119 | .brw0 { border-right-width: 0; } 120 | .brw1 { border-right-width: .125rem; } 121 | .brw2 { border-right-width: .25rem; } 122 | .brw3 { border-right-width: .5rem; } 123 | .brw4 { border-right-width: .75rem; } 124 | .brw5 { border-right-width: 1rem; } 125 | @media screen and (min-width: 48em) { 126 | .baw0-ns { border-width: 0; } 127 | .baw1-ns { border-width: .125rem; } 128 | .baw2-ns { border-width: .25rem; } 129 | .baw3-ns { border-width: .25rem; } 130 | .baw4-ns { border-width: .75rem; } 131 | .baw5-ns { border-width: 1rem; } 132 | .btw0-ns { border-top-width: 0; } 133 | .btw1-ns { border-top-width: .125rem; } 134 | .btw2-ns { border-top-width: .25rem; } 135 | .btw3-ns { border-top-width: .5rem; } 136 | .btw4-ns { border-top-width: .75rem; } 137 | .btw5-ns { border-top-width: 1rem; } 138 | .bbw0-ns { border-bottom-width: 0; } 139 | .bbw1-ns { border-bottom-width: .125rem; } 140 | .bbw2-ns { border-bottom-width: .25rem; } 141 | .bbw3-ns { border-bottom-width: .5rem; } 142 | .bbw4-ns { border-bottom-width: .75rem; } 143 | .bbw5-ns { border-bottom-width: 1rem; } 144 | .blw0-ns { border-left-width: 0; } 145 | .blw1-ns { border-left-width: .125rem; } 146 | .blw2-ns { border-left-width: .25rem; } 147 | .blw3-ns { border-left-width: .5rem; } 148 | .blw4-ns { border-left-width: .75rem; } 149 | .blw5-ns { border-left-width: 1rem; } 150 | .brw0-ns { border-right-width: 0; } 151 | .brw1-ns { border-right-width: .125rem; } 152 | .brw2-ns { border-right-width: .25rem; } 153 | .brw3-ns { border-right-width: .5rem; } 154 | .brw4-ns { border-right-width: .75rem; } 155 | .brw5-ns { border-right-width: 1rem; } 156 | } 157 | @media screen and (min-width:48em) and (max-width: 64em) { 158 | .baw0-m { border-width: 0; } 159 | .baw1-m { border-width: .125rem; } 160 | .baw2-m { border-width: .25rem; } 161 | .baw3-m { border-width: .5rem; } 162 | .baw4-m { border-width: .75rem; } 163 | .baw5-m { border-width: 1rem; } 164 | .btw0-m { border-top-width: 0; } 165 | .btw1-m { border-top-width: .125rem; } 166 | .btw2-m { border-top-width: .25rem; } 167 | .btw3-m { border-top-width: .5rem; } 168 | .btw4-m { border-top-width: .75rem; } 169 | .btw5-m { border-top-width: 1rem; } 170 | .bbw0-m { border-bottom-width: 0; } 171 | .bbw1-m { border-bottom-width: .125rem; } 172 | .bbw2-m { border-bottom-width: .25rem; } 173 | .bbw3-m { border-bottom-width: .5rem; } 174 | .bbw4-m { border-bottom-width: .75rem; } 175 | .bbw5-m { border-bottom-width: 1rem; } 176 | .blw0-m { border-left-width: 0; } 177 | .blw1-m { border-left-width: .125rem; } 178 | .blw2-m { border-left-width: .25rem; } 179 | .blw3-m { border-left-width: .5rem; } 180 | .blw4-m { border-left-width: .75rem; } 181 | .blw5-m { border-left-width: 1rem; } 182 | .brw0-m { border-right-width: 0; } 183 | .brw1-m { border-right-width: .125rem; } 184 | .brw2-m { border-right-width: .25rem; } 185 | .brw3-m { border-right-width: .5rem; } 186 | .brw4-m { border-right-width: .75rem; } 187 | .brw5-m { border-right-width: 1rem; } 188 | } 189 | @media screen and (min-width: 64em) { 190 | .baw0-l { border-width: 0; } 191 | .baw1-l { border-width: .125rem; } 192 | .baw2-l { border-width: .25rem; } 193 | .baw3-l { border-width: .5rem; } 194 | .baw4-l { border-width: .75rem; } 195 | .baw5-l { border-width: 1rem; } 196 | .btw0-l { border-top-width: 0; } 197 | .btw1-l { border-top-width: .125rem; } 198 | .btw2-l { border-top-width: .25rem; } 199 | .btw3-l { border-top-width: .5rem; } 200 | .btw4-l { border-top-width: .75rem; } 201 | .btw5-l { border-top-width: 1rem; } 202 | .bbw0-l { border-bottom-width: 0; } 203 | .bbw1-l { border-bottom-width: .125rem; } 204 | .bbw2-l { border-bottom-width: .25rem; } 205 | .bbw3-l { border-bottom-width: .5rem; } 206 | .bbw4-l { border-bottom-width: .75rem; } 207 | .bbw5-l { border-bottom-width: 1rem; } 208 | .blw0-l { border-left-width: 0; } 209 | .blw1-l { border-left-width: .125rem; } 210 | .blw2-l { border-left-width: .25rem; } 211 | .blw3-l { border-left-width: .5rem; } 212 | .blw4-l { border-left-width: .75rem; } 213 | .blw5-l { border-left-width: 1rem; } 214 | .brw0-l { border-right-width: 0; } 215 | .brw1-l { border-right-width: .125rem; } 216 | .brw2-l { border-right-width: .25rem; } 217 | .brw3-l { border-right-width: .5rem; } 218 | .brw4-l { border-right-width: .75rem; } 219 | .brw5-l { border-right-width: 1rem; } 220 | } 221 | ``` 222 | 223 | ## Contributing 224 | 225 | 1. Fork it 226 | 2. Create your feature branch (`git checkout -b my-new-feature`) 227 | 3. Commit your changes (`git commit -am 'Add some feature'`) 228 | 4. Push to the branch (`git push origin my-new-feature`) 229 | 5. Create new Pull Request 230 | 231 | ## Authors 232 | 233 | * [mrmrs](http://mrmrs.io) 234 | * [johno](http://johnotander.com) 235 | 236 | ## License 237 | 238 | ISC 239 | 240 | --------------------------------------------------------------------------------