├── .gitignore ├── package.json ├── css ├── css-display.min.css ├── css-display.css ├── display.css └── display.min.css ├── src └── css-display.css ├── README.md └── compositor.json /.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 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "css-display", 3 | "style": "display.css", 4 | "version": "2.0.5", 5 | "homepage": "http://github.com/mrmrs/css-display", 6 | "description": "Css module of single purpose classes for display", 7 | "keywords": [ 8 | "css", 9 | "oocss", 10 | "display" 11 | ], 12 | "css-display": { 13 | "type": "git", 14 | "url": "http://github.com/mrmrs/css-display.git" 15 | }, 16 | "bugs": { 17 | "url": "https://github.com/mrmrs/css-display/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-display.css > css/css-display.css && tachyons src/css-display.css --minify > css/css-display.min.css && tachyons src/css-display.css --generate-docs --package=../../package.json > readme.md" 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /css/css-display.min.css: -------------------------------------------------------------------------------- 1 | .display-none{display:none}.display-inline{display:inline}.display-block{display:block}.display-inline-block{display:inline-block}.display-contents{display:contents}.display-list-item{display:list-item}.display-inline-list-item{display:inline-list-item}.display-table{display:table}.display-inline-table{display:inline-table}.display-table-cell{display:table-cell}.display-table-column{display:table-column}.display-table-column-group{display:table-column-group}.display-table-footer-group{display:table-footer-group}.display-table-header-group{display:table-header-group}.display-table-row{display:table-row}.display-table-row-group{display:table-row-group}.display-table-caption{display:table-caption}.display-flex{display:-webkit-box;display:-ms-flexbox;display:flex}.display-inline-flex{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex}.display-grid{display:-ms-grid;display:grid}.display-inline-grid{display:-ms-inline-grid;display:inline-grid}.display-ruby{display:ruby}.display-ruby-base{display:ruby-base}.display-ruby-text{display:ruby-text}.display-ruby-base-container{display:ruby-base-container}.display-ruby-text-container{display:ruby-text-container}.display-run-in{display:run-in}.display-inherit{display:inherit}.display-initial{display:initial}.display-unset{display:unset} 2 | 3 | -------------------------------------------------------------------------------- /src/css-display.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | DISPLAY 4 | 5 | https://developer.mozilla.org/en-US/docs/Web/CSS/display 6 | 7 | */ 8 | 9 | .display-none { display: none; } 10 | 11 | .display-inline { display: inline; } 12 | .display-block { display: block; } 13 | .display-inline-block { display: inline-block; } 14 | .display-contents { display: contents; } 15 | .display-list-item { display: list-item; } 16 | .display-inline-list-item { display: inline-list-item; } 17 | .display-table { display: table; } 18 | .display-inline-table { display: inline-table; } 19 | .display-table-cell { display: table-cell; } 20 | .display-table-column { display: table-column; } 21 | .display-table-column-group { display: table-column-group; } 22 | .display-table-footer-group { display: table-footer-group; } 23 | .display-table-header-group { display: table-header-group; } 24 | .display-table-row { display: table-row; } 25 | .display-table-row-group { display: table-row-group; } 26 | .display-table-caption { display: table-caption; } 27 | .display-flex { display: flex; } 28 | .display-inline-flex { display: inline-flex; } 29 | .display-grid { display: grid; } 30 | .display-inline-grid { display: inline-grid; } 31 | .display-ruby { display: ruby; } 32 | .display-ruby-base { display: ruby-base; } 33 | .display-ruby-text { display: ruby-text; } 34 | .display-ruby-base-container { display: ruby-base-container; } 35 | .display-ruby-text-container { display: ruby-text-container; } 36 | .display-run-in { display: run-in; } 37 | 38 | /* Global values */ 39 | .display-inherit { display: inherit; } 40 | .display-initial { display: initial; } 41 | .display-unset { display: unset; } 42 | -------------------------------------------------------------------------------- /css/css-display.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | DISPLAY 4 | 5 | https://developer.mozilla.org/en-US/docs/Web/CSS/display 6 | 7 | */ 8 | .display-none { display: none; } 9 | .display-inline { display: inline; } 10 | .display-block { display: block; } 11 | .display-inline-block { display: inline-block; } 12 | .display-contents { display: contents; } 13 | .display-list-item { display: list-item; } 14 | .display-inline-list-item { display: inline-list-item; } 15 | .display-table { display: table; } 16 | .display-inline-table { display: inline-table; } 17 | .display-table-cell { display: table-cell; } 18 | .display-table-column { display: table-column; } 19 | .display-table-column-group { display: table-column-group; } 20 | .display-table-footer-group { display: table-footer-group; } 21 | .display-table-header-group { display: table-header-group; } 22 | .display-table-row { display: table-row; } 23 | .display-table-row-group { display: table-row-group; } 24 | .display-table-caption { display: table-caption; } 25 | .display-flex { display: -webkit-box; display: -ms-flexbox; display: flex; } 26 | .display-inline-flex { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; } 27 | .display-grid { display: -ms-grid; display: grid; } 28 | .display-inline-grid { display: -ms-inline-grid; display: inline-grid; } 29 | .display-ruby { display: ruby; } 30 | .display-ruby-base { display: ruby-base; } 31 | .display-ruby-text { display: ruby-text; } 32 | .display-ruby-base-container { display: ruby-base-container; } 33 | .display-ruby-text-container { display: ruby-text-container; } 34 | .display-run-in { display: run-in; } 35 | /* Global values */ 36 | .display-inherit { display: inherit; } 37 | .display-initial { display: initial; } 38 | .display-unset { display: unset; } 39 | 40 | -------------------------------------------------------------------------------- /css/display.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | DISPLAY 4 | 5 | - Mobile First 6 | - Breakpoint: not-small 7 | - Breakpoint: medium 8 | - Breakpoint: large 9 | 10 | */ 11 | 12 | .dn { display: none; } 13 | .di { display: inline; } 14 | .db { display: block; } 15 | .dib { display: inline-block; } 16 | .dli { display: list-item; } 17 | .dit { display: inline-table; } 18 | .dt { display: table; } 19 | .dtc { display: table-cell; } 20 | .dtcol { display: table-column; } 21 | .dtcolg { display: table-column-group; } 22 | .dtfg { display: table-footer-group; } 23 | .dthg { display: table-header-group; } 24 | .dtr { display: table-row; } 25 | .dtrg { display: table-row-group; } 26 | .df { display: flex; } 27 | .dif { display: inline-flex; } 28 | .dg { display: grid; } 29 | .dig { display: inline-grid; } 30 | .dri { display: run-in; } 31 | 32 | @media screen and (min-width: 48em) { 33 | .dn-ns { display: none; } 34 | .di-ns { display: inline; } 35 | .db-ns { display: block; } 36 | .dib-ns { display: inline-block; } 37 | .dli-ns { display: list-item; } 38 | .dit-ns { display: inline-table; } 39 | .dt-ns { display: table; } 40 | .dtc-ns { display: table-cell; } 41 | .dtcol-ns { display: table-column; } 42 | .dtcolg-ns { display: table-column-group; } 43 | .dtfg-ns { display: table-footer-group; } 44 | .dthg-ns { display: table-header-group; } 45 | .dtr-ns { display: table-row; } 46 | .dtrg-ns { display: table-row-group; } 47 | .df-ns { display: flex; } 48 | .dif-ns { display: inline-flex; } 49 | .dg-ns { display: grid; } 50 | .dig-ns { display: inline-grid; } 51 | .dri-ns { display: run-in; } 52 | } 53 | 54 | @media screen and (min-width:48em) and (max-width: 64em) { 55 | .dn-m { display: none; } 56 | .di-m { display: inline; } 57 | .db-m { display: block; } 58 | .dib-m { display: inline-block; } 59 | .dli-m { display: list-item; } 60 | .dit-m { display: inline-table; } 61 | .dt-m { display: table; } 62 | .dtc-m { display: table-cell; } 63 | .dtcol-m { display: table-column; } 64 | .dtcolg-m { display: table-column-group; } 65 | .dtfg-m { display: table-footer-group; } 66 | .dthg-m { display: table-header-group; } 67 | .dtr-m { display: table-row; } 68 | .dtrg-m { display: table-row-group; } 69 | .df-m { display: flex; } 70 | .dif-m { display: inline-flex; } 71 | .dg-m { display: grid; } 72 | .dig-m { display: inline-grid; } 73 | .dri-m { display: run-in; } 74 | } 75 | 76 | @media screen and (min-width: 64em) { 77 | .dn-l { display: none; } 78 | .di-l { display: inline; } 79 | .db-l { display: block; } 80 | .dib-l { display: inline-block; } 81 | .dli-l { display: list-item; } 82 | .dit-l { display: inline-table; } 83 | .dt-l { display: table; } 84 | .dtc-l { display: table-cell; } 85 | .dtcol-l { display: table-column; } 86 | .dtcolg-l { display: table-column-group; } 87 | .dtfg-l { display: table-footer-group; } 88 | .dthg-l { display: table-header-group; } 89 | .dtr-l { display: table-row; } 90 | .dtrg-l { display: table-row-group; } 91 | .df-l { display: flex; } 92 | .dif-l { display: inline-flex; } 93 | .dg-l { display: grid; } 94 | .dig-l { display: inline-grid; } 95 | .dri-l { display: run-in; } 96 | } 97 | 98 | -------------------------------------------------------------------------------- /css/display.min.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | DISPLAY 4 | 5 | - Mobile First 6 | - Breakpoint: not-small 7 | - Breakpoint: medium 8 | - Breakpoint: large 9 | 10 | */ 11 | 12 | .dn { display: none; } 13 | .di { display: inline; } 14 | .db { display: block; } 15 | .dib { display: inline-block; } 16 | .dli { display: list-item; } 17 | .dit { display: inline-table; } 18 | .dt { display: table; } 19 | .dtc { display: table-cell; } 20 | .dtcol { display: table-column; } 21 | .dtcolg { display: table-column-group; } 22 | .dtfg { display: table-footer-group; } 23 | .dthg { display: table-header-group; } 24 | .dtr { display: table-row; } 25 | .dtrg { display: table-row-group; } 26 | .df { display: flex; } 27 | .dif { display: inline-flex; } 28 | .dg { display: grid; } 29 | .dig { display: inline-grid; } 30 | .dri { display: run-in; } 31 | 32 | @media screen and (min-width: 48em) { 33 | .dn-ns { display: none; } 34 | .di-ns { display: inline; } 35 | .db-ns { display: block; } 36 | .dib-ns { display: inline-block; } 37 | .dli-ns { display: list-item; } 38 | .dit-ns { display: inline-table; } 39 | .dt-ns { display: table; } 40 | .dtc-ns { display: table-cell; } 41 | .dtcol-ns { display: table-column; } 42 | .dtcolg-ns { display: table-column-group; } 43 | .dtfg-ns { display: table-footer-group; } 44 | .dthg-ns { display: table-header-group; } 45 | .dtr-ns { display: table-row; } 46 | .dtrg-ns { display: table-row-group; } 47 | .df-ns { display: flex; } 48 | .dif-ns { display: inline-flex; } 49 | .dg-ns { display: grid; } 50 | .dig-ns { display: inline-grid; } 51 | .dri-ns { display: run-in; } 52 | } 53 | 54 | @media screen and (min-width:48em) and (max-width: 64em) { 55 | .dn-m { display: none; } 56 | .di-m { display: inline; } 57 | .db-m { display: block; } 58 | .dib-m { display: inline-block; } 59 | .dli-m { display: list-item; } 60 | .dit-m { display: inline-table; } 61 | .dt-m { display: table; } 62 | .dtc-m { display: table-cell; } 63 | .dtcol-m { display: table-column; } 64 | .dtcolg-m { display: table-column-group; } 65 | .dtfg-m { display: table-footer-group; } 66 | .dthg-m { display: table-header-group; } 67 | .dtr-m { display: table-row; } 68 | .dtrg-m { display: table-row-group; } 69 | .df-m { display: flex; } 70 | .dif-m { display: inline-flex; } 71 | .dg-m { display: grid; } 72 | .dig-m { display: inline-grid; } 73 | .dri-m { display: run-in; } 74 | } 75 | 76 | @media screen and (min-width: 64em) { 77 | .dn-l { display: none; } 78 | .di-l { display: inline; } 79 | .db-l { display: block; } 80 | .dib-l { display: inline-block; } 81 | .dli-l { display: list-item; } 82 | .dit-l { display: inline-table; } 83 | .dt-l { display: table; } 84 | .dtc-l { display: table-cell; } 85 | .dtcol-l { display: table-column; } 86 | .dtcolg-l { display: table-column-group; } 87 | .dtfg-l { display: table-footer-group; } 88 | .dthg-l { display: table-header-group; } 89 | .dtr-l { display: table-row; } 90 | .dtrg-l { display: table-row-group; } 91 | .df-l { display: flex; } 92 | .dif-l { display: inline-flex; } 93 | .dg-l { display: grid; } 94 | .dig-l { display: inline-grid; } 95 | .dri-l { display: run-in; } 96 | } 97 | 98 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # css-display 2.0.3 2 | 3 | Css module of single purpose classes for display 4 | 5 | #### Stats 6 | 7 | 404 | 30 | 36 8 | ---|---|--- 9 | bytes | selectors | declarations 10 | 11 | ## Installation 12 | 13 | #### With [npm](https://npmjs.com) 14 | 15 | ``` 16 | npm install --save-dev css-display 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-display 28 | ``` 29 | 30 | ssh: 31 | ``` 32 | git clone git@github.com:tachyons-css/css-display.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-display"; 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 | 79 | DISPLAY 80 | 81 | https://developer.mozilla.org/en-US/docs/Web/CSS/display 82 | 83 | */ 84 | .display-none { display: none; } 85 | .display-inline { display: inline; } 86 | .display-block { display: block; } 87 | .display-inline-block { display: inline-block; } 88 | .display-contents { display: contents; } 89 | .display-list-item { display: list-item; } 90 | .display-inline-list-item { display: inline-list-item; } 91 | .display-table { display: table; } 92 | .display-inline-table { display: inline-table; } 93 | .display-table-cell { display: table-cell; } 94 | .display-table-column { display: table-column; } 95 | .display-table-column-group { display: table-column-group; } 96 | .display-table-footer-group { display: table-footer-group; } 97 | .display-table-header-group { display: table-header-group; } 98 | .display-table-row { display: table-row; } 99 | .display-table-row-group { display: table-row-group; } 100 | .display-table-caption { display: table-caption; } 101 | .display-flex { display: -webkit-box; display: -ms-flexbox; display: flex; } 102 | .display-inline-flex { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; } 103 | .display-grid { display: -ms-grid; display: grid; } 104 | .display-inline-grid { display: -ms-inline-grid; display: inline-grid; } 105 | .display-ruby { display: ruby; } 106 | .display-ruby-base { display: ruby-base; } 107 | .display-ruby-text { display: ruby-text; } 108 | .display-ruby-base-container { display: ruby-base-container; } 109 | .display-ruby-text-container { display: ruby-text-container; } 110 | .display-run-in { display: run-in; } 111 | /* Global values */ 112 | .display-inherit { display: inherit; } 113 | .display-initial { display: initial; } 114 | .display-unset { display: unset; } 115 | ``` 116 | 117 | ## Contributing 118 | 119 | 1. Fork it 120 | 2. Create your feature branch (`git checkout -b my-new-feature`) 121 | 3. Commit your changes (`git commit -am 'Add some feature'`) 122 | 4. Push to the branch (`git push origin my-new-feature`) 123 | 5. Create new Pull Request 124 | 125 | ## Authors 126 | 127 | * [mrmrs](http://mrmrs.io) 128 | * [johno](http://johnotander.com) 129 | 130 | ## License 131 | 132 | ISC 133 | 134 | -------------------------------------------------------------------------------- /compositor.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "mrmrs/css-display", 3 | "version": "0.1.3", 4 | "libraries": { 5 | "xv": "^1.0.27" 6 | }, 7 | "title": "css display", 8 | "branch": "", 9 | "style": { 10 | "name": "Default", 11 | "componentSet": { 12 | "nav": "nav/BasicNav", 13 | "header": "header/BannerHeader", 14 | "article": "article/BasicArticle", 15 | "footer": "footer/BasicFooter" 16 | }, 17 | "fontFamily": "-apple-system, BlinkMacSystemFont, sans-serif", 18 | "fontWeight": 400, 19 | "bold": 600, 20 | "lineHeight": 1.5, 21 | "typeScale": [ 22 | 72, 23 | 48, 24 | 24, 25 | 20, 26 | 16, 27 | 14, 28 | 12 29 | ], 30 | "monospace": "Menlo, monospace", 31 | "heading": { 32 | "fontFamily": null, 33 | "fontStyle": null, 34 | "fontWeight": 600, 35 | "lineHeight": 1.25, 36 | "textTransform": null, 37 | "letterSpacing": null 38 | }, 39 | "h0": {}, 40 | "h1": {}, 41 | "h2": {}, 42 | "h3": {}, 43 | "h4": {}, 44 | "h5": {}, 45 | "h6": {}, 46 | "alternativeText": {}, 47 | "space": [ 48 | 0, 49 | 8, 50 | 16, 51 | 32, 52 | 48, 53 | 64, 54 | 96 55 | ], 56 | "layout": { 57 | "maxWidth": 1024, 58 | "centered": false 59 | }, 60 | "colors": { 61 | "text": "#111", 62 | "background": "#fff", 63 | "primary": "#08e", 64 | "secondary": "#059", 65 | "highlight": "#e08", 66 | "border": "#ddd", 67 | "muted": "#eee" 68 | }, 69 | "border": { 70 | "width": 1, 71 | "radius": 2 72 | }, 73 | "link": {}, 74 | "button": { 75 | "hover": { 76 | "boxShadow": "inset 0 0 0 999px rgba(0, 0, 0, .125)" 77 | } 78 | }, 79 | "input": {}, 80 | "body": { 81 | "margin": 0 82 | }, 83 | "breakpoints": { 84 | "xs": "@media screen and (max-width:40em)", 85 | "sm": "@media screen and (min-width:40em)", 86 | "md": "@media screen and (min-width:52em)", 87 | "lg": "@media screen and (min-width:64em)" 88 | } 89 | }, 90 | "content": [ 91 | { 92 | "component": "header/BannerHeader", 93 | "heading": "display.css", 94 | "subhead": "A functional css micro library", 95 | "links": [ 96 | { 97 | "text": "Tweet", 98 | "href": "https://twitter.com/intent/tweet?text=css-display%253A%2520Responsive%2520CSS%2520module%2520for%2520setting%2520display&url=https%253A%252F%252Fwww.npmjs.com%252Fpackage%252Fcss-display" 99 | }, 100 | { 101 | "href": "https://github.com/mrmrs/css-display/archive/master.zip", 102 | "text": "Download" 103 | } 104 | ], 105 | "text": "Set display on any element at any breakpoint", 106 | "backgroundImage": "https://media.giphy.com/media/vcB9QRaLUHYw8/giphy.gif", 107 | "image": "", 108 | "slug": "" 109 | }, 110 | { 111 | "component": "article/BasicArticle", 112 | "text": "

css-display 1.0.0

\n

Css module of single purpose classes for display

\n

Stats

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
3713030
bytesselectorsdeclarations
\n

Installation

\n

With npm

\n
npm install --save-dev css-display\n

With Git

\n
git clone https://github.com/tachyons-css/css-display\n

Usage

\n

Using with PostCSS

\n

Import the css module

\n
@import "css-display";\n
\n

Then process the CSS using the tachyons-cli

\n
$ npm i -g tachyons-cli\n$ tachyons-cli path/to/css-file.css > dist/t.css\n
\n

Using the CSS

\n

The built CSS is located in the css directory. It contains an unminified and minified version.\nYou can either cut and paste that css or link to it directly in your html.

\n
<link rel="stylesheet" href="path/to/module/css/css-display">\n
\n

Development

\n

The source CSS files can be found in the src directory.\nRunning $ npm start will process the source CSS and place the built CSS in the css directory.

\n

The CSS

\n
/*\n\n   DISPLAY\n\n   https://developer.mozilla.org/en-US/docs/Web/CSS/display\n\n*/\n.display-none { display: none; }\n.display-inline { display: inline; }\n.display-block { display: block; }\n.display-inline-block { display: inline-block; }\n.display-contents { display: contents; }\n.display-list-item { display: list-item; }\n.display-inline-list-item { display: inline-list-item; }\n.display-table { display: table; }\n.display-inline-table { display: inline-table; }\n.display-table-cell { display: table-cell; }\n.display-table-column { display: table-column; }\n.display-table-column-group { display: table-column-group; }\n.display-table-footer-group { display: table-footer-group; }\n.display-table-header-group { display: table-header-group; }\n.display-table-row { display: table-row; }\n.display-table-row-group { display: table-row-group; }\n.display-table-caption { display: table-caption; }\n.display-flex { display: flex; }\n.display-inline-flex { display: inline-flex; }\n.display-grid { display: grid; }\n.display-inline-grid { display: inline-grid; }\n.display-ruby { display: ruby; }\n.display-ruby-base { display: ruby-base; }\n.display-ruby-text { display: ruby-text; }\n.display-ruby-base-container { display: ruby-base-container; }\n.display-ruby-text-container { display: ruby-text-container; }\n.display-run-in { display: run-in; }\n/* Global values */\n.display-inherit { display: inherit; }\n.display-initial { display: initial; }\n.display-unset { display: unset; }\n
\n

Contributing

\n
    \n
  1. Fork it
    2. \n
  2. Create your feature branch (git checkout -b my-new-feature)
    3. \n
  3. Commit your changes (git commit -am 'Add some feature')
    4. \n
  4. Push to the branch (git push origin my-new-feature)
    5. \n
  5. Create new Pull Request
    6. \n
\n

Authors

\n\n

License

\n

MIT

\n", 113 | "html": "

css-display 1.0.0

\n

Css module of single purpose classes for display

\n

Stats

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
3713030
bytesselectorsdeclarations
\n

Installation

\n

With npm

\n
npm install --save-dev css-display\n

With Git

\n
git clone https://github.com/tachyons-css/css-display\n

Usage

\n

Using with PostCSS

\n

Import the css module

\n
@import "css-display";\n
\n

Then process the CSS using the tachyons-cli

\n
$ npm i -g tachyons-cli\n$ tachyons-cli path/to/css-file.css > dist/t.css\n
\n

Using the CSS

\n

The built CSS is located in the css directory. It contains an unminified and minified version.\nYou can either cut and paste that css or link to it directly in your html.

\n
<link rel="stylesheet" href="path/to/module/css/css-display">\n
\n

Development

\n

The source CSS files can be found in the src directory.\nRunning $ npm start will process the source CSS and place the built CSS in the css directory.

\n

The CSS

\n
/*\n\n   DISPLAY\n\n   https://developer.mozilla.org/en-US/docs/Web/CSS/display\n\n*/\n.display-none { display: none; }\n.display-inline { display: inline; }\n.display-block { display: block; }\n.display-inline-block { display: inline-block; }\n.display-contents { display: contents; }\n.display-list-item { display: list-item; }\n.display-inline-list-item { display: inline-list-item; }\n.display-table { display: table; }\n.display-inline-table { display: inline-table; }\n.display-table-cell { display: table-cell; }\n.display-table-column { display: table-column; }\n.display-table-column-group { display: table-column-group; }\n.display-table-footer-group { display: table-footer-group; }\n.display-table-header-group { display: table-header-group; }\n.display-table-row { display: table-row; }\n.display-table-row-group { display: table-row-group; }\n.display-table-caption { display: table-caption; }\n.display-flex { display: flex; }\n.display-inline-flex { display: inline-flex; }\n.display-grid { display: grid; }\n.display-inline-grid { display: inline-grid; }\n.display-ruby { display: ruby; }\n.display-ruby-base { display: ruby-base; }\n.display-ruby-text { display: ruby-text; }\n.display-ruby-base-container { display: ruby-base-container; }\n.display-ruby-text-container { display: ruby-text-container; }\n.display-run-in { display: run-in; }\n/* Global values */\n.display-inherit { display: inherit; }\n.display-initial { display: initial; }\n.display-unset { display: unset; }\n
\n

Contributing

\n
    \n
  1. Fork it
    2. \n
  2. Create your feature branch (git checkout -b my-new-feature)
    3. \n
  3. Commit your changes (git commit -am 'Add some feature')
    4. \n
  4. Push to the branch (git push origin my-new-feature)
    5. \n
  5. Create new Pull Request
    6. \n
\n

Authors

\n\n

License

\n

MIT

\n" 114 | }, 115 | { 116 | "component": "footer/BasicFooter", 117 | "links": [ 118 | { 119 | "href": "https://github.com/mrmrs/", 120 | "text": "Built by Mrmrs" 121 | }, 122 | { 123 | "href": "https://github.com/mrmrs/colors", 124 | "text": "Colors" 125 | }, 126 | { 127 | "href": "https://github.com/tachyons-css/tachyons", 128 | "text": "Tachyons" 129 | }, 130 | { 131 | "href": "https://github.com/mrmrs/css-widths", 132 | "text": "Widths" 133 | }, 134 | { 135 | "href": "Borders", 136 | "text": "https://github.com/mrmrs/css-borders" 137 | } 138 | ], 139 | "meta": "© 2016 ", 140 | "heading": "Related Modules" 141 | } 142 | ] 143 | } --------------------------------------------------------------------------------