├── .editorconfig ├── .gitignore ├── .npmignore ├── LICENSE ├── README.md ├── index.css └── package.json /.editorconfig: -------------------------------------------------------------------------------- 1 | # http://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | indent_style = space 6 | indent_size = 2 7 | end_of_line = lf 8 | charset = utf-8 9 | trim_trailing_whitespace = true 10 | insert_final_newline = true 11 | 12 | [*.md] 13 | trim_trailing_whitespace = false 14 | 15 | [Makefile] 16 | indent_style = tab 17 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | npm-debug.log 3 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .editorconfig 3 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | This software is released under the MIT license: 2 | 3 | Copyright (c) 2015 Antoine Lehurt 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy of 6 | this software and associated documentation files (the "Software"), to deal in 7 | the Software without restriction, including without limitation the rights to 8 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of 9 | the Software, and to permit persons to whom the Software is furnished to do so, 10 | 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, FITNESS 17 | FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR 18 | COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER 19 | IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN 20 | CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 21 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # css-utils 2 | 3 | CSS utils. 4 | 5 | ## Install 6 | 7 | With [npm](http://npmjs.org) do: 8 | 9 | ```bash 10 | $ npm install nk-css-utils --save 11 | ``` 12 | 13 | ## Usage 14 | 15 | ```css 16 | @import "./node_modules/nk-css-utils/index.css"; 17 | ``` 18 | 19 | ## API 20 | 21 | ### Display 22 | 23 | - `.u-inactive` 24 | - `.u-hidden` 25 | 26 | ### Interaction 27 | 28 | - `.u-unselectable` 29 | - `.u-unclickable` 30 | 31 | ### Size & positions 32 | 33 | - `.u-fullSize` 34 | - `.u-fullParent` 35 | 36 | - `.u-fluid--w` 37 | - `.u-fluid--h` 38 | 39 | - `.u-topCorner` 40 | - `.u-topCorner--right` 41 | 42 | ### Center an element 43 | 44 | - `.u-center--rel` 45 | - `.u-center--abs` 46 | - `.u-middle--abs` 47 | 48 | ### Inline list 49 | 50 | - `.u-inlineList` 51 | - `.u-inlineList-item` 52 | - `.u-inlineList-item--top` 53 | - `.u-inlineList-item--middle` 54 | - `.u-inlineList-item--bottom` 55 | 56 | ### Table 57 | 58 | - `.u-table` 59 | - `.u-table-cell` 60 | - `.u-table-cell--center` 61 | - `.u-table-cell--middle` 62 | 63 | ### Other 64 | 65 | - `.u-cf` 66 | - `.u-centerBg` 67 | - `.u-antialiasing` 68 | - `.u-resetBtn` 69 | 70 | ## License 71 | 72 | MIT 73 | -------------------------------------------------------------------------------- /index.css: -------------------------------------------------------------------------------- 1 | /* Display type 2 | ========================================================================== */ 3 | 4 | .u-inactive { 5 | display: none !important; 6 | visibility: hidden !important; 7 | } 8 | 9 | .u-hidden { 10 | visibility: hidden; 11 | pointer-events: none; 12 | } 13 | 14 | /* 15 | Hide only visually, but have it available for screen readers: 16 | http://snook.ca/archives/html_and_css/hiding-content-for-accessibility 17 | */ 18 | .u-visuallyHidden { 19 | position: absolute; 20 | width: 1px; 21 | height: 1px; 22 | padding: 0; 23 | margin: -1px; 24 | overflow: hidden; 25 | clip: rect(0 0 0 0); 26 | border: 0; 27 | color: #757575; 28 | } 29 | 30 | /* 31 | Extends the .visuallyhidden class to allow the element 32 | to be focusable when navigated to via the keyboard: 33 | https://www.drupal.org/node/897638 34 | */ 35 | .u-visuallyHidden--focusable:active, 36 | .u-visuallyHidden--focusable:focus { 37 | position: static; 38 | width: auto; 39 | height: auto; 40 | margin: 0; 41 | overflow: visible; 42 | clip: auto; 43 | opacity: 0; 44 | } 45 | 46 | 47 | /* Interaction utils 48 | ========================================================================== */ 49 | 50 | .u-unselectable { 51 | cursor: default; 52 | -moz-user-select: none; 53 | -webkit-user-select: none; 54 | -ms-user-select: none; 55 | } 56 | 57 | .u-unclickable { 58 | pointer-events: none; 59 | cursor: default; 60 | } 61 | 62 | 63 | /* Size & position utils 64 | ========================================================================== */ 65 | 66 | .u-fullSize, 67 | .u-fullParent { 68 | width: 100%; 69 | height: 100%; 70 | } 71 | 72 | .u-fullParent { 73 | position: absolute; 74 | top: 0; 75 | left: 0; 76 | } 77 | 78 | .u-fluid--w { 79 | width: 100%; 80 | height: auto; 81 | } 82 | 83 | .u-fluid--h { 84 | width: auto; 85 | height: 100%; 86 | } 87 | 88 | .u-topCorner, 89 | .u-topCorner--right { 90 | position: absolute; 91 | top: 0; 92 | } 93 | 94 | .u-topCorner--right { 95 | right: 0; 96 | } 97 | 98 | 99 | /* Center an element 100 | ========================================================================== */ 101 | 102 | .u-center--rel { 103 | display: block; 104 | margin: auto; 105 | } 106 | 107 | .u-center--abs { 108 | position: absolute; 109 | left: 0; 110 | right: 0; 111 | margin: auto; 112 | } 113 | 114 | .u-middle--abs { 115 | position: absolute; 116 | bottom: 0; 117 | left: 0; 118 | right: 0; 119 | top: 0; 120 | margin: auto; 121 | } 122 | 123 | 124 | /* Inline list 125 | ========================================================================== */ 126 | 127 | .u-inlineList { 128 | position: relative; 129 | } 130 | 131 | .u-inlineList-item, 132 | .u-inlineList-item--top, 133 | .u-inlineList-item--middle, 134 | .u-inlineList-item--bottom { 135 | position: relative; 136 | display: inline-block; 137 | } 138 | 139 | .u-inlineList-item--top { 140 | vertical-align: top; 141 | } 142 | 143 | .u-inlineList-item--middle { 144 | vertical-align: middle; 145 | } 146 | 147 | .u-inlineList-item--bottom { 148 | vertical-align: bottom; 149 | } 150 | 151 | 152 | /* Table 153 | ========================================================================== */ 154 | 155 | .u-table { 156 | display: table; 157 | } 158 | 159 | .u-table-cell, 160 | .u-table-cell--center, 161 | .u-table-cell--middle { 162 | display: table-cell; 163 | } 164 | 165 | .u-table-cell--center, 166 | .u-table-cell--middle { 167 | vertical-align: middle; 168 | } 169 | 170 | .u-table-cell--center { 171 | text-align: center; 172 | } 173 | 174 | 175 | /* Helpers 176 | ========================================================================== */ 177 | 178 | /* 179 | Clearfix 180 | */ 181 | .u-cf { 182 | zoom: 1; 183 | } 184 | 185 | .u-cf:before, 186 | .u-cf:after { 187 | content: " "; 188 | display: table; 189 | } 190 | 191 | .u-cf:after { 192 | clear: both; 193 | } 194 | 195 | /* 196 | Background 197 | */ 198 | .u-centerBg { 199 | background-repeat: no-repeat; 200 | background-size: 100%; 201 | background-position: center; 202 | } 203 | 204 | /* 205 | Antialiasing 206 | */ 207 | .u-antialiasing { 208 | text-rendering: optimizeLegibility; 209 | -webkit-font-smoothing: antialiased; 210 | } 211 | 212 | /* 213 | Reset button 214 | */ 215 | .u-resetBtn { 216 | border: none; 217 | margin: 0; 218 | padding: 0; 219 | width: auto; 220 | overflow: visible; 221 | background: transparent; 222 | color: inherit; 223 | font: inherit; 224 | line-height: normal; 225 | text-align: center; 226 | text-decoration: none; 227 | cursor: pointer; 228 | white-space: normal; 229 | -webkit-font-smoothing: inherit; 230 | -moz-osx-font-smoothing: inherit; 231 | -webkit-appearance: none; 232 | } 233 | 234 | /* Prevent Safari input bug */ 235 | .u-resetBtn:not(input) { 236 | user-select: none; 237 | } 238 | 239 | .u-resetBtn::-moz-focus-inner { 240 | border: 0; 241 | padding: 0; 242 | } 243 | 244 | .u-resestBtn--withoutOutline { 245 | outline: none; 246 | } 247 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "nk-css-utils", 3 | "version": "2.0.0", 4 | "description": "CSS utils", 5 | "main": "index.css", 6 | "style": "index.css", 7 | "files": [ 8 | "index.css" 9 | ], 10 | "keywords": [ 11 | "css", 12 | "utils", 13 | "browser" 14 | ], 15 | "license": "MIT", 16 | "author": "Antoine Lehurt (http://kewah.com/)", 17 | "homepage": "https://github.com/nk-components/css-utils", 18 | "repository": { 19 | "type": "git", 20 | "url": "https://github.com/nk-components/css-utils" 21 | }, 22 | "bugs": { 23 | "url": "https://github.com/nk-components/css-utils/issues" 24 | } 25 | } 26 | --------------------------------------------------------------------------------