├── .gitignore ├── LICENSE.txt ├── package.json ├── css ├── breaks.css ├── breaks.min.css ├── css-breaks.min.css └── css-breaks.css ├── src └── css-breaks.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-breaks", 3 | "style": "breaks.css", 4 | "version": "1.0.8", 5 | "homepage": "http://github.com/mrmrs/css-breaks", 6 | "description": "Css module of single purpose classes for breaks", 7 | "keywords": [ 8 | "css", 9 | "oocss", 10 | "breaks" 11 | ], 12 | "css-breaks": { 13 | "type": "git", 14 | "url": "http://github.com/mrmrs/css-breaks.git" 15 | }, 16 | "bugs": { 17 | "url": "https://github.com/mrmrs/css-breaks/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-breaks.css > css/css-breaks.css && tachyons src/css-breaks.css --minify > css/css-breaks.min.css && tachyons src/css-breaks.css --generate-docs --package=../../package.json > readme.md" 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /css/breaks.css: -------------------------------------------------------------------------------- 1 | /* 2 | BREAKS 3 | */ 4 | 5 | /* Break After */ 6 | 7 | .ba-aut { break-after: auto; } 8 | .ba-al { break-after: always; } 9 | .ba-l { break-after: left; } 10 | .ba-r { break-after: right; } 11 | .ba-rect { break-after: recto; } 12 | .ba-vers { break-after: verso; } 13 | .ba-page { break-after: page; } 14 | .ba-col { break-after: column; } 15 | .ba-reg { break-after: region; } 16 | .ba-avoid { break-after: avoid; } 17 | .ba-avoid-page { break-after: avoid-page; } 18 | .ba-avoid-column { break-after: avoid-column; } 19 | .ba-avoid-region { break-after: avoid-region; } 20 | 21 | /* Break Before */ 22 | 23 | .bb-aut { break-before: auto; } 24 | .bb-al { break-before: always; } 25 | .bb-l { break-before: left; } 26 | .bb-r { break-before: right; } 27 | .bb-rect { break-before: recto; } 28 | .bb-vers { break-before: verso; } 29 | .bb-page { break-before: page; } 30 | .bb-col { break-before: column; } 31 | .bb-reg { break-before: region; } 32 | .bb-avoid { break-before: avoid; } 33 | .bb-avoid-page { break-before: avoid-page; } 34 | .bb-avoid-column { break-before: avoid-column; } 35 | .bb-avoid-region { break-before: avoid-region; } 36 | 37 | -------------------------------------------------------------------------------- /css/breaks.min.css: -------------------------------------------------------------------------------- 1 | /* 2 | BREAKS 3 | */ 4 | 5 | /* Break After */ 6 | 7 | .ba-aut { break-after: auto; } 8 | .ba-al { break-after: always; } 9 | .ba-l { break-after: left; } 10 | .ba-r { break-after: right; } 11 | .ba-rect { break-after: recto; } 12 | .ba-vers { break-after: verso; } 13 | .ba-page { break-after: page; } 14 | .ba-col { break-after: column; } 15 | .ba-reg { break-after: region; } 16 | .ba-avoid { break-after: avoid; } 17 | .ba-avoid-page { break-after: avoid-page; } 18 | .ba-avoid-column { break-after: avoid-column; } 19 | .ba-avoid-region { break-after: avoid-region; } 20 | 21 | /* Break Before */ 22 | 23 | .bb-aut { break-before: auto; } 24 | .bb-al { break-before: always; } 25 | .bb-l { break-before: left; } 26 | .bb-r { break-before: right; } 27 | .bb-rect { break-before: recto; } 28 | .bb-vers { break-before: verso; } 29 | .bb-page { break-before: page; } 30 | .bb-col { break-before: column; } 31 | .bb-reg { break-before: region; } 32 | .bb-avoid { break-before: avoid; } 33 | .bb-avoid-page { break-before: avoid-page; } 34 | .bb-avoid-column { break-before: avoid-column; } 35 | .bb-avoid-region { break-before: avoid-region; } 36 | 37 | -------------------------------------------------------------------------------- /src/css-breaks.css: -------------------------------------------------------------------------------- 1 | /* 2 | BREAKS 3 | */ 4 | 5 | /* Break After */ 6 | 7 | .ba-aut { break-after: auto; } 8 | .ba-al { break-after: always; } 9 | .ba-l { break-after: left; } 10 | .ba-r { break-after: right; } 11 | .ba-rect { break-after: recto; } 12 | .ba-vers { break-after: verso; } 13 | .ba-page { break-after: page; } 14 | .ba-col { break-after: column; } 15 | .ba-reg { break-after: region; } 16 | .ba-avoid { break-after: avoid; } 17 | .ba-avoid-page { break-after: avoid-page; } 18 | .ba-avoid-column { break-after: avoid-column; } 19 | .ba-avoid-region { break-after: avoid-region; } 20 | 21 | /* Break Before */ 22 | 23 | .bb-aut { break-before: auto; } 24 | .bb-al { break-before: always; } 25 | .bb-l { break-before: left; } 26 | .bb-r { break-before: right; } 27 | .bb-rect { break-before: recto; } 28 | .bb-vers { break-before: verso; } 29 | .bb-page { break-before: page; } 30 | .bb-col { break-before: column; } 31 | .bb-reg { break-before: region; } 32 | .bb-avoid { break-before: avoid; } 33 | .bb-avoid-page { break-before: avoid-page; } 34 | .bb-avoid-column { break-before: avoid-column; } 35 | .bb-avoid-region { break-before: avoid-region; } 36 | 37 | -------------------------------------------------------------------------------- /css/css-breaks.min.css: -------------------------------------------------------------------------------- 1 | .ba-aut{-webkit-column-break-after:auto;page-break-after:auto;break-after:auto}.ba-al{-webkit-column-break-after:always;page-break-after:always;break-after:always}.ba-l{-webkit-column-break-after:left;page-break-after:left;break-after:left}.ba-r{-webkit-column-break-after:right;page-break-after:right;break-after:right}.ba-rect{-webkit-column-break-after:recto;page-break-after:recto;break-after:recto}.ba-vers{-webkit-column-break-after:verso;page-break-after:verso;break-after:verso}.ba-page{-webkit-column-break-after:page;page-break-after:page;break-after:page}.ba-col{-webkit-column-break-after:column;page-break-after:column;break-after:column}.ba-reg{-webkit-column-break-after:region;page-break-after:region;break-after:region}.ba-avoid{break-after:avoid}.ba-avoid,.ba-avoid-page{-webkit-column-break-after:avoid;page-break-after:avoid}.ba-avoid-page{break-after:avoid-page}.ba-avoid-column{-webkit-column-break-after:avoid-column;page-break-after:avoid-column;break-after:avoid-column}.ba-avoid-region{-webkit-column-break-after:avoid-region;page-break-after:avoid-region;break-after:avoid-region}.bb-aut{-webkit-column-break-before:auto;page-break-before:auto;break-before:auto}.bb-al{-webkit-column-break-before:always;page-break-before:always;break-before:always}.bb-l{-webkit-column-break-before:left;page-break-before:left;break-before:left}.bb-r{-webkit-column-break-before:right;page-break-before:right;break-before:right}.bb-rect{-webkit-column-break-before:recto;page-break-before:recto;break-before:recto}.bb-vers{-webkit-column-break-before:verso;page-break-before:verso;break-before:verso}.bb-page{-webkit-column-break-before:page;page-break-before:page;break-before:page}.bb-col{-webkit-column-break-before:column;page-break-before:column;break-before:column}.bb-reg{-webkit-column-break-before:region;page-break-before:region;break-before:region}.bb-avoid{break-before:avoid}.bb-avoid,.bb-avoid-page{-webkit-column-break-before:avoid;page-break-before:avoid}.bb-avoid-page{break-before:avoid-page}.bb-avoid-column{-webkit-column-break-before:avoid-column;page-break-before:avoid-column;break-before:avoid-column}.bb-avoid-region{-webkit-column-break-before:avoid-region;page-break-before:avoid-region;break-before:avoid-region} 2 | 3 | -------------------------------------------------------------------------------- /css/css-breaks.css: -------------------------------------------------------------------------------- 1 | /* 2 | BREAKS 3 | */ 4 | /* Break After */ 5 | .ba-aut { -webkit-column-break-after: auto; page-break-after: auto; break-after: auto; } 6 | .ba-al { -webkit-column-break-after: always; page-break-after: always; break-after: always; } 7 | .ba-l { -webkit-column-break-after: left; page-break-after: left; break-after: left; } 8 | .ba-r { -webkit-column-break-after: right; page-break-after: right; break-after: right; } 9 | .ba-rect { -webkit-column-break-after: recto; page-break-after: recto; break-after: recto; } 10 | .ba-vers { -webkit-column-break-after: verso; page-break-after: verso; break-after: verso; } 11 | .ba-page { -webkit-column-break-after: page; page-break-after: page; break-after: page; } 12 | .ba-col { -webkit-column-break-after: column; page-break-after: column; break-after: column; } 13 | .ba-reg { -webkit-column-break-after: region; page-break-after: region; break-after: region; } 14 | .ba-avoid { -webkit-column-break-after: avoid; page-break-after: avoid; break-after: avoid; } 15 | .ba-avoid-page { -webkit-column-break-after: avoid; page-break-after: avoid; break-after: avoid-page; } 16 | .ba-avoid-column { -webkit-column-break-after: avoid-column; page-break-after: avoid-column; break-after: avoid-column; } 17 | .ba-avoid-region { -webkit-column-break-after: avoid-region; page-break-after: avoid-region; break-after: avoid-region; } 18 | /* Break Before */ 19 | .bb-aut { -webkit-column-break-before: auto; page-break-before: auto; break-before: auto; } 20 | .bb-al { -webkit-column-break-before: always; page-break-before: always; break-before: always; } 21 | .bb-l { -webkit-column-break-before: left; page-break-before: left; break-before: left; } 22 | .bb-r { -webkit-column-break-before: right; page-break-before: right; break-before: right; } 23 | .bb-rect { -webkit-column-break-before: recto; page-break-before: recto; break-before: recto; } 24 | .bb-vers { -webkit-column-break-before: verso; page-break-before: verso; break-before: verso; } 25 | .bb-page { -webkit-column-break-before: page; page-break-before: page; break-before: page; } 26 | .bb-col { -webkit-column-break-before: column; page-break-before: column; break-before: column; } 27 | .bb-reg { -webkit-column-break-before: region; page-break-before: region; break-before: region; } 28 | .bb-avoid { -webkit-column-break-before: avoid; page-break-before: avoid; break-before: avoid; } 29 | .bb-avoid-page { -webkit-column-break-before: avoid; page-break-before: avoid; break-before: avoid-page; } 30 | .bb-avoid-column { -webkit-column-break-before: avoid-column; page-break-before: avoid-column; break-before: avoid-column; } 31 | .bb-avoid-region { -webkit-column-break-before: avoid-region; page-break-before: avoid-region; break-before: avoid-region; } 32 | 33 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # css-breaks 1.0.6 2 | 3 | Css module of single purpose classes for breaks 4 | 5 | #### Stats 6 | 7 | 411 | 26 | 78 8 | ---|---|--- 9 | bytes | selectors | declarations 10 | 11 | ## Installation 12 | 13 | #### With [npm](https://npmjs.com) 14 | 15 | ``` 16 | npm install --save-dev css-breaks 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-breaks 28 | ``` 29 | 30 | ssh: 31 | ``` 32 | git clone git@github.com:tachyons-css/css-breaks.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-breaks"; 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 | BREAKS 79 | */ 80 | /* Break After */ 81 | .ba-aut { -webkit-column-break-after: auto; page-break-after: auto; break-after: auto; } 82 | .ba-al { -webkit-column-break-after: always; page-break-after: always; break-after: always; } 83 | .ba-l { -webkit-column-break-after: left; page-break-after: left; break-after: left; } 84 | .ba-r { -webkit-column-break-after: right; page-break-after: right; break-after: right; } 85 | .ba-rect { -webkit-column-break-after: recto; page-break-after: recto; break-after: recto; } 86 | .ba-vers { -webkit-column-break-after: verso; page-break-after: verso; break-after: verso; } 87 | .ba-page { -webkit-column-break-after: page; page-break-after: page; break-after: page; } 88 | .ba-col { -webkit-column-break-after: column; page-break-after: column; break-after: column; } 89 | .ba-reg { -webkit-column-break-after: region; page-break-after: region; break-after: region; } 90 | .ba-avoid { -webkit-column-break-after: avoid; page-break-after: avoid; break-after: avoid; } 91 | .ba-avoid-page { -webkit-column-break-after: avoid; page-break-after: avoid; break-after: avoid-page; } 92 | .ba-avoid-column { -webkit-column-break-after: avoid-column; page-break-after: avoid-column; break-after: avoid-column; } 93 | .ba-avoid-region { -webkit-column-break-after: avoid-region; page-break-after: avoid-region; break-after: avoid-region; } 94 | /* Break Before */ 95 | .bb-aut { -webkit-column-break-before: auto; page-break-before: auto; break-before: auto; } 96 | .bb-al { -webkit-column-break-before: always; page-break-before: always; break-before: always; } 97 | .bb-l { -webkit-column-break-before: left; page-break-before: left; break-before: left; } 98 | .bb-r { -webkit-column-break-before: right; page-break-before: right; break-before: right; } 99 | .bb-rect { -webkit-column-break-before: recto; page-break-before: recto; break-before: recto; } 100 | .bb-vers { -webkit-column-break-before: verso; page-break-before: verso; break-before: verso; } 101 | .bb-page { -webkit-column-break-before: page; page-break-before: page; break-before: page; } 102 | .bb-col { -webkit-column-break-before: column; page-break-before: column; break-before: column; } 103 | .bb-reg { -webkit-column-break-before: region; page-break-before: region; break-before: region; } 104 | .bb-avoid { -webkit-column-break-before: avoid; page-break-before: avoid; break-before: avoid; } 105 | .bb-avoid-page { -webkit-column-break-before: avoid; page-break-before: avoid; break-before: avoid-page; } 106 | .bb-avoid-column { -webkit-column-break-before: avoid-column; page-break-before: avoid-column; break-before: avoid-column; } 107 | .bb-avoid-region { -webkit-column-break-before: avoid-region; page-break-before: avoid-region; break-before: avoid-region; } 108 | ``` 109 | 110 | ## Contributing 111 | 112 | 1. Fork it 113 | 2. Create your feature branch (`git checkout -b my-new-feature`) 114 | 3. Commit your changes (`git commit -am 'Add some feature'`) 115 | 4. Push to the branch (`git push origin my-new-feature`) 116 | 5. Create new Pull Request 117 | 118 | ## Authors 119 | 120 | * [mrmrs](http://mrmrs.io) 121 | * [johno](http://johnotander.com) 122 | 123 | ## License 124 | 125 | ISC 126 | 127 | --------------------------------------------------------------------------------