├── .gitignore ├── .npmrc ├── code-of-conduct.md ├── css ├── tachyons-base.css ├── tachyons-base.min.css ├── tachyons-flexbox.css └── tachyons-flexbox.min.css ├── license ├── package.json ├── readme.md └── src └── tachyons-flexbox.css /.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 | npm-debug.log 31 | 32 | .DS_Store 33 | .AppleDouble 34 | .LSOverride 35 | 36 | # Icon must end with two \r 37 | Icon 38 | 39 | 40 | # Thumbnails 41 | ._* 42 | 43 | # Files that might appear on external disk 44 | .Spotlight-V100 45 | .Trashes 46 | 47 | # Directories potentially created on remote AFP share 48 | .AppleDB 49 | .AppleDesktop 50 | Network Trash Folder 51 | Temporary Items 52 | .apdisk 53 | 54 | # Vim 55 | Session.vim 56 | 57 | # Node 58 | node_modules/* 59 | npm-debug.log 60 | -------------------------------------------------------------------------------- /.npmrc: -------------------------------------------------------------------------------- 1 | package-lock=false 2 | -------------------------------------------------------------------------------- /code-of-conduct.md: -------------------------------------------------------------------------------- 1 | # Contributor Code of Conduct 2 | 3 | ### Our Pledge 4 | 5 | In the interest of fostering an open and welcoming environment, we as 6 | contributors and maintainers pledge to making participation in our project and 7 | our community a harassment-free experience for everyone, regardless of age, 8 | body size, disability, ethnicity, gender identity and expression, level of 9 | experience, nationality, personal appearance, race, religion, or sexual 10 | identity and orientation. 11 | 12 | ### Our Standards 13 | 14 | #### Examples of behavior that contributes to creating a positive environment include: 15 | 16 | * Using welcoming and inclusive language 17 | * Being respectful of differing viewpoints and experiences 18 | * Gracefully accepting constructive criticism 19 | * Focusing on what is best for the community 20 | * Showing empathy towards other community members 21 | 22 | #### Examples of unacceptable behavior by participants include: 23 | 24 | * The use of sexualized language or imagery and unwelcome sexual attention or advances 25 | * Trolling, insulting/derogatory comments, and personal or political attacks 26 | * Public or private harassment 27 | * Publishing others' private information, such as a physical or electronic address, without explicit permission 28 | * Other conduct which could reasonably be considered inappropriate in a professional setting 29 | 30 | ### Our Responsibilities 31 | 32 | Project maintainers are responsible for clarifying the standards of acceptable 33 | behavior and are expected to take appropriate and fair corrective action in 34 | response to any instances of unacceptable behavior. 35 | 36 | Project maintainers have the right and responsibility to remove, edit, or 37 | reject comments, commits, code, wiki edits, issues, and other contributions 38 | that are not aligned to this Code of Conduct, or to ban temporarily or 39 | permanently any contributor for other behaviors that they deem inappropriate, 40 | threatening, offensive, or harmful. 41 | 42 | ### Scope 43 | 44 | This Code of Conduct applies both within project spaces and in public spaces 45 | when an individual is representing the project or its community. Examples of 46 | representing a project or community include using an official project e-mail 47 | address, posting via an official social media account, or acting as an 48 | appointed representative at an online or offline event. Representation of a 49 | project may be further defined and clarified by project maintainers. 50 | 51 | ### Enforcement 52 | 53 | Instances of abusive, harassing, or otherwise unacceptable behavior may be 54 | reported by contacting the project team at hi@mrmrs.cc. All 55 | complaints will be reviewed and investigated and will result in a response that 56 | is deemed necessary and appropriate to the circumstances. The project team is 57 | obligated to maintain confidentiality with regard to the reporter of an 58 | incident. Further details of specific enforcement policies may be posted 59 | separately. 60 | 61 | Project maintainers who do not follow or enforce the Code of Conduct in good 62 | faith may face temporary or permanent repercussions as determined by other 63 | members of the project's leadership. 64 | 65 | ### Attribution 66 | 67 | This Code of Conduct is adapted from the Contributor Covenant, version 1.4, available at http://contributor-covenant.org/version/1/4 68 | 69 | -------------------------------------------------------------------------------- /css/tachyons-base.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | BASE 4 | 5 | */ 6 | html, body { height: 100%; } 7 | 8 | -------------------------------------------------------------------------------- /css/tachyons-base.min.css: -------------------------------------------------------------------------------- 1 | body,html{height:100%} 2 | 3 | -------------------------------------------------------------------------------- /css/tachyons-flexbox.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | FLEXBOX 4 | 5 | Media Query Extensions: 6 | -ns = not-small 7 | -m = medium 8 | -l = large 9 | 10 | */ 11 | .flex { display: flex; } 12 | .inline-flex { display: inline-flex; } 13 | /* 1. Fix for Chrome 44 bug. 14 | * https://code.google.com/p/chromium/issues/detail?id=506893 */ 15 | .flex-auto { flex: 1 1 auto; min-width: 0; /* 1 */ min-height: 0; /* 1 */ } 16 | .flex-none { flex: none; } 17 | .flex-column { flex-direction: column; } 18 | .flex-row { flex-direction: row; } 19 | .flex-wrap { flex-wrap: wrap; } 20 | .flex-nowrap { flex-wrap: nowrap; } 21 | .flex-wrap-reverse { flex-wrap: wrap-reverse; } 22 | .flex-column-reverse { flex-direction: column-reverse; } 23 | .flex-row-reverse { flex-direction: row-reverse; } 24 | .items-start { align-items: flex-start; } 25 | .items-end { align-items: flex-end; } 26 | .items-center { align-items: center; } 27 | .items-baseline { align-items: baseline; } 28 | .items-stretch { align-items: stretch; } 29 | .self-start { align-self: flex-start; } 30 | .self-end { align-self: flex-end; } 31 | .self-center { align-self: center; } 32 | .self-baseline { align-self: baseline; } 33 | .self-stretch { align-self: stretch; } 34 | .justify-start { justify-content: flex-start; } 35 | .justify-end { justify-content: flex-end; } 36 | .justify-center { justify-content: center; } 37 | .justify-between { justify-content: space-between; } 38 | .justify-around { justify-content: space-around; } 39 | .content-start { align-content: flex-start; } 40 | .content-end { align-content: flex-end; } 41 | .content-center { align-content: center; } 42 | .content-between { align-content: space-between; } 43 | .content-around { align-content: space-around; } 44 | .content-stretch { align-content: stretch; } 45 | .order-0 { order: 0; } 46 | .order-1 { order: 1; } 47 | .order-2 { order: 2; } 48 | .order-3 { order: 3; } 49 | .order-4 { order: 4; } 50 | .order-5 { order: 5; } 51 | .order-6 { order: 6; } 52 | .order-7 { order: 7; } 53 | .order-8 { order: 8; } 54 | .order-last { order: 99999; } 55 | .flex-grow-0 { flex-grow: 0; } 56 | .flex-grow-1 { flex-grow: 1; } 57 | .flex-shrink-0 { flex-shrink: 0; } 58 | .flex-shrink-1 { flex-shrink: 1; } 59 | @media screen and (min-width: 30em) { 60 | .flex-ns { display: flex; } 61 | .inline-flex-ns { display: inline-flex; } 62 | .flex-auto-ns { flex: 1 1 auto; min-width: 0; /* 1 */ min-height: 0; /* 1 */ } 63 | .flex-none-ns { flex: none; } 64 | .flex-column-ns { flex-direction: column; } 65 | .flex-row-ns { flex-direction: row; } 66 | .flex-wrap-ns { flex-wrap: wrap; } 67 | .flex-nowrap-ns { flex-wrap: nowrap; } 68 | .flex-wrap-reverse-ns { flex-wrap: wrap-reverse; } 69 | .flex-column-reverse-ns { flex-direction: column-reverse; } 70 | .flex-row-reverse-ns { flex-direction: row-reverse; } 71 | .items-start-ns { align-items: flex-start; } 72 | .items-end-ns { align-items: flex-end; } 73 | .items-center-ns { align-items: center; } 74 | .items-baseline-ns { align-items: baseline; } 75 | .items-stretch-ns { align-items: stretch; } 76 | .self-start-ns { align-self: flex-start; } 77 | .self-end-ns { align-self: flex-end; } 78 | .self-center-ns { align-self: center; } 79 | .self-baseline-ns { align-self: baseline; } 80 | .self-stretch-ns { align-self: stretch; } 81 | .justify-start-ns { justify-content: flex-start; } 82 | .justify-end-ns { justify-content: flex-end; } 83 | .justify-center-ns { justify-content: center; } 84 | .justify-between-ns { justify-content: space-between; } 85 | .justify-around-ns { justify-content: space-around; } 86 | .content-start-ns { align-content: flex-start; } 87 | .content-end-ns { align-content: flex-end; } 88 | .content-center-ns { align-content: center; } 89 | .content-between-ns { align-content: space-between; } 90 | .content-around-ns { align-content: space-around; } 91 | .content-stretch-ns { align-content: stretch; } 92 | .order-0-ns { order: 0; } 93 | .order-1-ns { order: 1; } 94 | .order-2-ns { order: 2; } 95 | .order-3-ns { order: 3; } 96 | .order-4-ns { order: 4; } 97 | .order-5-ns { order: 5; } 98 | .order-6-ns { order: 6; } 99 | .order-7-ns { order: 7; } 100 | .order-8-ns { order: 8; } 101 | .order-last-ns { order: 99999; } 102 | .flex-grow-0-ns { flex-grow: 0; } 103 | .flex-grow-1-ns { flex-grow: 1; } 104 | .flex-shrink-0-ns { flex-shrink: 0; } 105 | .flex-shrink-1-ns { flex-shrink: 1; } 106 | } 107 | @media screen and (min-width: 30em) and (max-width: 60em) { 108 | .flex-m { display: flex; } 109 | .inline-flex-m { display: inline-flex; } 110 | .flex-auto-m { flex: 1 1 auto; min-width: 0; /* 1 */ min-height: 0; /* 1 */ } 111 | .flex-none-m { flex: none; } 112 | .flex-column-m { flex-direction: column; } 113 | .flex-row-m { flex-direction: row; } 114 | .flex-wrap-m { flex-wrap: wrap; } 115 | .flex-nowrap-m { flex-wrap: nowrap; } 116 | .flex-wrap-reverse-m { flex-wrap: wrap-reverse; } 117 | .flex-column-reverse-m { flex-direction: column-reverse; } 118 | .flex-row-reverse-m { flex-direction: row-reverse; } 119 | .items-start-m { align-items: flex-start; } 120 | .items-end-m { align-items: flex-end; } 121 | .items-center-m { align-items: center; } 122 | .items-baseline-m { align-items: baseline; } 123 | .items-stretch-m { align-items: stretch; } 124 | .self-start-m { align-self: flex-start; } 125 | .self-end-m { align-self: flex-end; } 126 | .self-center-m { align-self: center; } 127 | .self-baseline-m { align-self: baseline; } 128 | .self-stretch-m { align-self: stretch; } 129 | .justify-start-m { justify-content: flex-start; } 130 | .justify-end-m { justify-content: flex-end; } 131 | .justify-center-m { justify-content: center; } 132 | .justify-between-m { justify-content: space-between; } 133 | .justify-around-m { justify-content: space-around; } 134 | .content-start-m { align-content: flex-start; } 135 | .content-end-m { align-content: flex-end; } 136 | .content-center-m { align-content: center; } 137 | .content-between-m { align-content: space-between; } 138 | .content-around-m { align-content: space-around; } 139 | .content-stretch-m { align-content: stretch; } 140 | .order-0-m { order: 0; } 141 | .order-1-m { order: 1; } 142 | .order-2-m { order: 2; } 143 | .order-3-m { order: 3; } 144 | .order-4-m { order: 4; } 145 | .order-5-m { order: 5; } 146 | .order-6-m { order: 6; } 147 | .order-7-m { order: 7; } 148 | .order-8-m { order: 8; } 149 | .order-last-m { order: 99999; } 150 | .flex-grow-0-m { flex-grow: 0; } 151 | .flex-grow-1-m { flex-grow: 1; } 152 | .flex-shrink-0-m { flex-shrink: 0; } 153 | .flex-shrink-1-m { flex-shrink: 1; } 154 | } 155 | @media screen and (min-width: 60em) { 156 | .flex-l { display: flex; } 157 | .inline-flex-l { display: inline-flex; } 158 | .flex-auto-l { flex: 1 1 auto; min-width: 0; /* 1 */ min-height: 0; /* 1 */ } 159 | .flex-none-l { flex: none; } 160 | .flex-column-l { flex-direction: column; } 161 | .flex-row-l { flex-direction: row; } 162 | .flex-wrap-l { flex-wrap: wrap; } 163 | .flex-nowrap-l { flex-wrap: nowrap; } 164 | .flex-wrap-reverse-l { flex-wrap: wrap-reverse; } 165 | .flex-column-reverse-l { flex-direction: column-reverse; } 166 | .flex-row-reverse-l { flex-direction: row-reverse; } 167 | .items-start-l { align-items: flex-start; } 168 | .items-end-l { align-items: flex-end; } 169 | .items-center-l { align-items: center; } 170 | .items-baseline-l { align-items: baseline; } 171 | .items-stretch-l { align-items: stretch; } 172 | .self-start-l { align-self: flex-start; } 173 | .self-end-l { align-self: flex-end; } 174 | .self-center-l { align-self: center; } 175 | .self-baseline-l { align-self: baseline; } 176 | .self-stretch-l { align-self: stretch; } 177 | .justify-start-l { justify-content: flex-start; } 178 | .justify-end-l { justify-content: flex-end; } 179 | .justify-center-l { justify-content: center; } 180 | .justify-between-l { justify-content: space-between; } 181 | .justify-around-l { justify-content: space-around; } 182 | .content-start-l { align-content: flex-start; } 183 | .content-end-l { align-content: flex-end; } 184 | .content-center-l { align-content: center; } 185 | .content-between-l { align-content: space-between; } 186 | .content-around-l { align-content: space-around; } 187 | .content-stretch-l { align-content: stretch; } 188 | .order-0-l { order: 0; } 189 | .order-1-l { order: 1; } 190 | .order-2-l { order: 2; } 191 | .order-3-l { order: 3; } 192 | .order-4-l { order: 4; } 193 | .order-5-l { order: 5; } 194 | .order-6-l { order: 6; } 195 | .order-7-l { order: 7; } 196 | .order-8-l { order: 8; } 197 | .order-last-l { order: 99999; } 198 | .flex-grow-0-l { flex-grow: 0; } 199 | .flex-grow-1-l { flex-grow: 1; } 200 | .flex-shrink-0-l { flex-shrink: 0; } 201 | .flex-shrink-1-l { flex-shrink: 1; } 202 | } 203 | 204 | -------------------------------------------------------------------------------- /css/tachyons-flexbox.min.css: -------------------------------------------------------------------------------- 1 | .flex{display:flex}.inline-flex{display:inline-flex}.flex-auto{flex:1 1 auto;min-width:0;min-height:0}.flex-none{flex:none}.flex-column{flex-direction:column}.flex-row{flex-direction:row}.flex-wrap{flex-wrap:wrap}.flex-nowrap{flex-wrap:nowrap}.flex-wrap-reverse{flex-wrap:wrap-reverse}.flex-column-reverse{flex-direction:column-reverse}.flex-row-reverse{flex-direction:row-reverse}.items-start{align-items:flex-start}.items-end{align-items:flex-end}.items-center{align-items:center}.items-baseline{align-items:baseline}.items-stretch{align-items:stretch}.self-start{align-self:flex-start}.self-end{align-self:flex-end}.self-center{align-self:center}.self-baseline{align-self:baseline}.self-stretch{align-self:stretch}.justify-start{justify-content:flex-start}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.justify-around{justify-content:space-around}.content-start{align-content:flex-start}.content-end{align-content:flex-end}.content-center{align-content:center}.content-between{align-content:space-between}.content-around{align-content:space-around}.content-stretch{align-content:stretch}.order-0{order:0}.order-1{order:1}.order-2{order:2}.order-3{order:3}.order-4{order:4}.order-5{order:5}.order-6{order:6}.order-7{order:7}.order-8{order:8}.order-last{order:99999}.flex-grow-0{flex-grow:0}.flex-grow-1{flex-grow:1}.flex-shrink-0{flex-shrink:0}.flex-shrink-1{flex-shrink:1}@media screen and (min-width:30em){.flex-ns{display:flex}.inline-flex-ns{display:inline-flex}.flex-auto-ns{flex:1 1 auto;min-width:0;min-height:0}.flex-none-ns{flex:none}.flex-column-ns{flex-direction:column}.flex-row-ns{flex-direction:row}.flex-wrap-ns{flex-wrap:wrap}.flex-nowrap-ns{flex-wrap:nowrap}.flex-wrap-reverse-ns{flex-wrap:wrap-reverse}.flex-column-reverse-ns{flex-direction:column-reverse}.flex-row-reverse-ns{flex-direction:row-reverse}.items-start-ns{align-items:flex-start}.items-end-ns{align-items:flex-end}.items-center-ns{align-items:center}.items-baseline-ns{align-items:baseline}.items-stretch-ns{align-items:stretch}.self-start-ns{align-self:flex-start}.self-end-ns{align-self:flex-end}.self-center-ns{align-self:center}.self-baseline-ns{align-self:baseline}.self-stretch-ns{align-self:stretch}.justify-start-ns{justify-content:flex-start}.justify-end-ns{justify-content:flex-end}.justify-center-ns{justify-content:center}.justify-between-ns{justify-content:space-between}.justify-around-ns{justify-content:space-around}.content-start-ns{align-content:flex-start}.content-end-ns{align-content:flex-end}.content-center-ns{align-content:center}.content-between-ns{align-content:space-between}.content-around-ns{align-content:space-around}.content-stretch-ns{align-content:stretch}.order-0-ns{order:0}.order-1-ns{order:1}.order-2-ns{order:2}.order-3-ns{order:3}.order-4-ns{order:4}.order-5-ns{order:5}.order-6-ns{order:6}.order-7-ns{order:7}.order-8-ns{order:8}.order-last-ns{order:99999}.flex-grow-0-ns{flex-grow:0}.flex-grow-1-ns{flex-grow:1}.flex-shrink-0-ns{flex-shrink:0}.flex-shrink-1-ns{flex-shrink:1}}@media screen and (min-width:30em) and (max-width:60em){.flex-m{display:flex}.inline-flex-m{display:inline-flex}.flex-auto-m{flex:1 1 auto;min-width:0;min-height:0}.flex-none-m{flex:none}.flex-column-m{flex-direction:column}.flex-row-m{flex-direction:row}.flex-wrap-m{flex-wrap:wrap}.flex-nowrap-m{flex-wrap:nowrap}.flex-wrap-reverse-m{flex-wrap:wrap-reverse}.flex-column-reverse-m{flex-direction:column-reverse}.flex-row-reverse-m{flex-direction:row-reverse}.items-start-m{align-items:flex-start}.items-end-m{align-items:flex-end}.items-center-m{align-items:center}.items-baseline-m{align-items:baseline}.items-stretch-m{align-items:stretch}.self-start-m{align-self:flex-start}.self-end-m{align-self:flex-end}.self-center-m{align-self:center}.self-baseline-m{align-self:baseline}.self-stretch-m{align-self:stretch}.justify-start-m{justify-content:flex-start}.justify-end-m{justify-content:flex-end}.justify-center-m{justify-content:center}.justify-between-m{justify-content:space-between}.justify-around-m{justify-content:space-around}.content-start-m{align-content:flex-start}.content-end-m{align-content:flex-end}.content-center-m{align-content:center}.content-between-m{align-content:space-between}.content-around-m{align-content:space-around}.content-stretch-m{align-content:stretch}.order-0-m{order:0}.order-1-m{order:1}.order-2-m{order:2}.order-3-m{order:3}.order-4-m{order:4}.order-5-m{order:5}.order-6-m{order:6}.order-7-m{order:7}.order-8-m{order:8}.order-last-m{order:99999}.flex-grow-0-m{flex-grow:0}.flex-grow-1-m{flex-grow:1}.flex-shrink-0-m{flex-shrink:0}.flex-shrink-1-m{flex-shrink:1}}@media screen and (min-width:60em){.flex-l{display:flex}.inline-flex-l{display:inline-flex}.flex-auto-l{flex:1 1 auto;min-width:0;min-height:0}.flex-none-l{flex:none}.flex-column-l{flex-direction:column}.flex-row-l{flex-direction:row}.flex-wrap-l{flex-wrap:wrap}.flex-nowrap-l{flex-wrap:nowrap}.flex-wrap-reverse-l{flex-wrap:wrap-reverse}.flex-column-reverse-l{flex-direction:column-reverse}.flex-row-reverse-l{flex-direction:row-reverse}.items-start-l{align-items:flex-start}.items-end-l{align-items:flex-end}.items-center-l{align-items:center}.items-baseline-l{align-items:baseline}.items-stretch-l{align-items:stretch}.self-start-l{align-self:flex-start}.self-end-l{align-self:flex-end}.self-center-l{align-self:center}.self-baseline-l{align-self:baseline}.self-stretch-l{align-self:stretch}.justify-start-l{justify-content:flex-start}.justify-end-l{justify-content:flex-end}.justify-center-l{justify-content:center}.justify-between-l{justify-content:space-between}.justify-around-l{justify-content:space-around}.content-start-l{align-content:flex-start}.content-end-l{align-content:flex-end}.content-center-l{align-content:center}.content-between-l{align-content:space-between}.content-around-l{align-content:space-around}.content-stretch-l{align-content:stretch}.order-0-l{order:0}.order-1-l{order:1}.order-2-l{order:2}.order-3-l{order:3}.order-4-l{order:4}.order-5-l{order:5}.order-6-l{order:6}.order-7-l{order:7}.order-8-l{order:8}.order-last-l{order:99999}.flex-grow-0-l{flex-grow:0}.flex-grow-1-l{flex-grow:1}.flex-shrink-0-l{flex-shrink:0}.flex-shrink-1-l{flex-shrink:1}} 2 | 3 | -------------------------------------------------------------------------------- /license: -------------------------------------------------------------------------------- 1 | ISC License (ISC) 2 | Copyright (c) 2016, 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": "tachyons-flexbox", 3 | "description": "Flexbox CSS module for Tachyons", 4 | "version": "2.1.1", 5 | "author": { 6 | "name": "mrmrs", 7 | "email": "hi@mrmrs.cc", 8 | "url": "http://mrmrs.cc" 9 | }, 10 | "style": "src/tachyons-flexbox.css", 11 | "main": "src/tachyons-flexbox.css", 12 | "files": [ 13 | "src", 14 | "css" 15 | ], 16 | "keywords": [ 17 | "tachyons", 18 | "tachyons-css", 19 | "css", 20 | "flexbox" 21 | ], 22 | "repository": "tachyons-css/tachyons-flexbox", 23 | "license": "ISC", 24 | "devDependencies": { 25 | "tachyons-cli": "^1.3.2", 26 | "watch": "^1.0.2" 27 | }, 28 | "scripts": { 29 | "start": "npm run build:watch", 30 | "build:css": "tachyons src/tachyons-flexbox.css > css/tachyons-flexbox.css", 31 | "build:minify": "tachyons src/tachyons-flexbox.css --minify > css/tachyons-flexbox.min.css", 32 | "build:docs": "tachyons src/tachyons-flexbox.css --generate-docs --package=../../package.json > readme.md", 33 | "build": "npm run build:css && npm run build:minify && npm run build:docs", 34 | "build:watch": "watch 'npm run build' ./src" 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /readme.md: -------------------------------------------------------------------------------- 1 | # tachyons-flexbox 2.1.1 2 | 3 | Flexbox CSS module for Tachyons 4 | 5 | ### Stats 6 | 7 | 1217 | 184 | 192 8 | ---|---|--- 9 | bytes | selectors | declarations 10 | 11 | ## Installation 12 | 13 | #### With [npm](https://npmjs.com) 14 | 15 | ``` 16 | npm install --save-dev tachyons-flexbox 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/tachyons-flexbox 28 | ``` 29 | 30 | ssh: 31 | ``` 32 | git clone git@github.com:tachyons-css/tachyons-flexbox.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 "tachyons-flexbox"; 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 | FLEXBOX 80 | 81 | Media Query Extensions: 82 | -ns = not-small 83 | -m = medium 84 | -l = large 85 | 86 | */ 87 | .flex { display: flex; } 88 | .inline-flex { display: inline-flex; } 89 | /* 1. Fix for Chrome 44 bug. 90 | * https://code.google.com/p/chromium/issues/detail?id=506893 */ 91 | .flex-auto { flex: 1 1 auto; min-width: 0; /* 1 */ min-height: 0; /* 1 */ } 92 | .flex-none { flex: none; } 93 | .flex-column { flex-direction: column; } 94 | .flex-row { flex-direction: row; } 95 | .flex-wrap { flex-wrap: wrap; } 96 | .flex-nowrap { flex-wrap: nowrap; } 97 | .flex-wrap-reverse { flex-wrap: wrap-reverse; } 98 | .flex-column-reverse { flex-direction: column-reverse; } 99 | .flex-row-reverse { flex-direction: row-reverse; } 100 | .items-start { align-items: flex-start; } 101 | .items-end { align-items: flex-end; } 102 | .items-center { align-items: center; } 103 | .items-baseline { align-items: baseline; } 104 | .items-stretch { align-items: stretch; } 105 | .self-start { align-self: flex-start; } 106 | .self-end { align-self: flex-end; } 107 | .self-center { align-self: center; } 108 | .self-baseline { align-self: baseline; } 109 | .self-stretch { align-self: stretch; } 110 | .justify-start { justify-content: flex-start; } 111 | .justify-end { justify-content: flex-end; } 112 | .justify-center { justify-content: center; } 113 | .justify-between { justify-content: space-between; } 114 | .justify-around { justify-content: space-around; } 115 | .content-start { align-content: flex-start; } 116 | .content-end { align-content: flex-end; } 117 | .content-center { align-content: center; } 118 | .content-between { align-content: space-between; } 119 | .content-around { align-content: space-around; } 120 | .content-stretch { align-content: stretch; } 121 | .order-0 { order: 0; } 122 | .order-1 { order: 1; } 123 | .order-2 { order: 2; } 124 | .order-3 { order: 3; } 125 | .order-4 { order: 4; } 126 | .order-5 { order: 5; } 127 | .order-6 { order: 6; } 128 | .order-7 { order: 7; } 129 | .order-8 { order: 8; } 130 | .order-last { order: 99999; } 131 | .flex-grow-0 { flex-grow: 0; } 132 | .flex-grow-1 { flex-grow: 1; } 133 | .flex-shrink-0 { flex-shrink: 0; } 134 | .flex-shrink-1 { flex-shrink: 1; } 135 | @media screen and (min-width: 30em) { 136 | .flex-ns { display: flex; } 137 | .inline-flex-ns { display: inline-flex; } 138 | .flex-auto-ns { flex: 1 1 auto; min-width: 0; /* 1 */ min-height: 0; /* 1 */ } 139 | .flex-none-ns { flex: none; } 140 | .flex-column-ns { flex-direction: column; } 141 | .flex-row-ns { flex-direction: row; } 142 | .flex-wrap-ns { flex-wrap: wrap; } 143 | .flex-nowrap-ns { flex-wrap: nowrap; } 144 | .flex-wrap-reverse-ns { flex-wrap: wrap-reverse; } 145 | .flex-column-reverse-ns { flex-direction: column-reverse; } 146 | .flex-row-reverse-ns { flex-direction: row-reverse; } 147 | .items-start-ns { align-items: flex-start; } 148 | .items-end-ns { align-items: flex-end; } 149 | .items-center-ns { align-items: center; } 150 | .items-baseline-ns { align-items: baseline; } 151 | .items-stretch-ns { align-items: stretch; } 152 | .self-start-ns { align-self: flex-start; } 153 | .self-end-ns { align-self: flex-end; } 154 | .self-center-ns { align-self: center; } 155 | .self-baseline-ns { align-self: baseline; } 156 | .self-stretch-ns { align-self: stretch; } 157 | .justify-start-ns { justify-content: flex-start; } 158 | .justify-end-ns { justify-content: flex-end; } 159 | .justify-center-ns { justify-content: center; } 160 | .justify-between-ns { justify-content: space-between; } 161 | .justify-around-ns { justify-content: space-around; } 162 | .content-start-ns { align-content: flex-start; } 163 | .content-end-ns { align-content: flex-end; } 164 | .content-center-ns { align-content: center; } 165 | .content-between-ns { align-content: space-between; } 166 | .content-around-ns { align-content: space-around; } 167 | .content-stretch-ns { align-content: stretch; } 168 | .order-0-ns { order: 0; } 169 | .order-1-ns { order: 1; } 170 | .order-2-ns { order: 2; } 171 | .order-3-ns { order: 3; } 172 | .order-4-ns { order: 4; } 173 | .order-5-ns { order: 5; } 174 | .order-6-ns { order: 6; } 175 | .order-7-ns { order: 7; } 176 | .order-8-ns { order: 8; } 177 | .order-last-ns { order: 99999; } 178 | .flex-grow-0-ns { flex-grow: 0; } 179 | .flex-grow-1-ns { flex-grow: 1; } 180 | .flex-shrink-0-ns { flex-shrink: 0; } 181 | .flex-shrink-1-ns { flex-shrink: 1; } 182 | } 183 | @media screen and (min-width: 30em) and (max-width: 60em) { 184 | .flex-m { display: flex; } 185 | .inline-flex-m { display: inline-flex; } 186 | .flex-auto-m { flex: 1 1 auto; min-width: 0; /* 1 */ min-height: 0; /* 1 */ } 187 | .flex-none-m { flex: none; } 188 | .flex-column-m { flex-direction: column; } 189 | .flex-row-m { flex-direction: row; } 190 | .flex-wrap-m { flex-wrap: wrap; } 191 | .flex-nowrap-m { flex-wrap: nowrap; } 192 | .flex-wrap-reverse-m { flex-wrap: wrap-reverse; } 193 | .flex-column-reverse-m { flex-direction: column-reverse; } 194 | .flex-row-reverse-m { flex-direction: row-reverse; } 195 | .items-start-m { align-items: flex-start; } 196 | .items-end-m { align-items: flex-end; } 197 | .items-center-m { align-items: center; } 198 | .items-baseline-m { align-items: baseline; } 199 | .items-stretch-m { align-items: stretch; } 200 | .self-start-m { align-self: flex-start; } 201 | .self-end-m { align-self: flex-end; } 202 | .self-center-m { align-self: center; } 203 | .self-baseline-m { align-self: baseline; } 204 | .self-stretch-m { align-self: stretch; } 205 | .justify-start-m { justify-content: flex-start; } 206 | .justify-end-m { justify-content: flex-end; } 207 | .justify-center-m { justify-content: center; } 208 | .justify-between-m { justify-content: space-between; } 209 | .justify-around-m { justify-content: space-around; } 210 | .content-start-m { align-content: flex-start; } 211 | .content-end-m { align-content: flex-end; } 212 | .content-center-m { align-content: center; } 213 | .content-between-m { align-content: space-between; } 214 | .content-around-m { align-content: space-around; } 215 | .content-stretch-m { align-content: stretch; } 216 | .order-0-m { order: 0; } 217 | .order-1-m { order: 1; } 218 | .order-2-m { order: 2; } 219 | .order-3-m { order: 3; } 220 | .order-4-m { order: 4; } 221 | .order-5-m { order: 5; } 222 | .order-6-m { order: 6; } 223 | .order-7-m { order: 7; } 224 | .order-8-m { order: 8; } 225 | .order-last-m { order: 99999; } 226 | .flex-grow-0-m { flex-grow: 0; } 227 | .flex-grow-1-m { flex-grow: 1; } 228 | .flex-shrink-0-m { flex-shrink: 0; } 229 | .flex-shrink-1-m { flex-shrink: 1; } 230 | } 231 | @media screen and (min-width: 60em) { 232 | .flex-l { display: flex; } 233 | .inline-flex-l { display: inline-flex; } 234 | .flex-auto-l { flex: 1 1 auto; min-width: 0; /* 1 */ min-height: 0; /* 1 */ } 235 | .flex-none-l { flex: none; } 236 | .flex-column-l { flex-direction: column; } 237 | .flex-row-l { flex-direction: row; } 238 | .flex-wrap-l { flex-wrap: wrap; } 239 | .flex-nowrap-l { flex-wrap: nowrap; } 240 | .flex-wrap-reverse-l { flex-wrap: wrap-reverse; } 241 | .flex-column-reverse-l { flex-direction: column-reverse; } 242 | .flex-row-reverse-l { flex-direction: row-reverse; } 243 | .items-start-l { align-items: flex-start; } 244 | .items-end-l { align-items: flex-end; } 245 | .items-center-l { align-items: center; } 246 | .items-baseline-l { align-items: baseline; } 247 | .items-stretch-l { align-items: stretch; } 248 | .self-start-l { align-self: flex-start; } 249 | .self-end-l { align-self: flex-end; } 250 | .self-center-l { align-self: center; } 251 | .self-baseline-l { align-self: baseline; } 252 | .self-stretch-l { align-self: stretch; } 253 | .justify-start-l { justify-content: flex-start; } 254 | .justify-end-l { justify-content: flex-end; } 255 | .justify-center-l { justify-content: center; } 256 | .justify-between-l { justify-content: space-between; } 257 | .justify-around-l { justify-content: space-around; } 258 | .content-start-l { align-content: flex-start; } 259 | .content-end-l { align-content: flex-end; } 260 | .content-center-l { align-content: center; } 261 | .content-between-l { align-content: space-between; } 262 | .content-around-l { align-content: space-around; } 263 | .content-stretch-l { align-content: stretch; } 264 | .order-0-l { order: 0; } 265 | .order-1-l { order: 1; } 266 | .order-2-l { order: 2; } 267 | .order-3-l { order: 3; } 268 | .order-4-l { order: 4; } 269 | .order-5-l { order: 5; } 270 | .order-6-l { order: 6; } 271 | .order-7-l { order: 7; } 272 | .order-8-l { order: 8; } 273 | .order-last-l { order: 99999; } 274 | .flex-grow-0-l { flex-grow: 0; } 275 | .flex-grow-1-l { flex-grow: 1; } 276 | .flex-shrink-0-l { flex-shrink: 0; } 277 | .flex-shrink-1-l { flex-shrink: 1; } 278 | } 279 | ``` 280 | 281 | ## Contributing 282 | 283 | 1. Fork it 284 | 2. Create your feature branch (`git checkout -b my-new-feature`) 285 | 3. Commit your changes (`git commit -am 'Add some feature'`) 286 | 4. Push to the branch (`git push origin my-new-feature`) 287 | 5. Create new Pull Request 288 | 289 | ## Authors 290 | 291 | * [mrmrs](http://mrmrs.io) 292 | * [johno](http://johnotander.com) 293 | 294 | ## License 295 | 296 | ISC 297 | 298 | -------------------------------------------------------------------------------- /src/tachyons-flexbox.css: -------------------------------------------------------------------------------- 1 | @custom-media --breakpoint-not-small screen and (min-width: 30em); 2 | @custom-media --breakpoint-medium screen and (min-width: 30em) and (max-width: 60em); 3 | @custom-media --breakpoint-large screen and (min-width: 60em); 4 | 5 | /* 6 | 7 | FLEXBOX 8 | 9 | Media Query Extensions: 10 | -ns = not-small 11 | -m = medium 12 | -l = large 13 | 14 | */ 15 | 16 | .flex { display: flex; } 17 | .inline-flex { display: inline-flex; } 18 | 19 | /* 1. Fix for Chrome 44 bug. 20 | * https://code.google.com/p/chromium/issues/detail?id=506893 */ 21 | .flex-auto { 22 | flex: 1 1 auto; 23 | min-width: 0; /* 1 */ 24 | min-height: 0; /* 1 */ 25 | } 26 | 27 | .flex-none { flex: none; } 28 | 29 | .flex-column { flex-direction: column; } 30 | .flex-row { flex-direction: row; } 31 | .flex-wrap { flex-wrap: wrap; } 32 | .flex-nowrap { flex-wrap: nowrap; } 33 | .flex-wrap-reverse { flex-wrap: wrap-reverse; } 34 | .flex-column-reverse { flex-direction: column-reverse; } 35 | .flex-row-reverse { flex-direction: row-reverse; } 36 | 37 | .items-start { align-items: flex-start; } 38 | .items-end { align-items: flex-end; } 39 | .items-center { align-items: center; } 40 | .items-baseline { align-items: baseline; } 41 | .items-stretch { align-items: stretch; } 42 | 43 | .self-start { align-self: flex-start; } 44 | .self-end { align-self: flex-end; } 45 | .self-center { align-self: center; } 46 | .self-baseline { align-self: baseline; } 47 | .self-stretch { align-self: stretch; } 48 | 49 | .justify-start { justify-content: flex-start; } 50 | .justify-end { justify-content: flex-end; } 51 | .justify-center { justify-content: center; } 52 | .justify-between { justify-content: space-between; } 53 | .justify-around { justify-content: space-around; } 54 | 55 | .content-start { align-content: flex-start; } 56 | .content-end { align-content: flex-end; } 57 | .content-center { align-content: center; } 58 | .content-between { align-content: space-between; } 59 | .content-around { align-content: space-around; } 60 | .content-stretch { align-content: stretch; } 61 | 62 | .order-0 { order: 0; } 63 | .order-1 { order: 1; } 64 | .order-2 { order: 2; } 65 | .order-3 { order: 3; } 66 | .order-4 { order: 4; } 67 | .order-5 { order: 5; } 68 | .order-6 { order: 6; } 69 | .order-7 { order: 7; } 70 | .order-8 { order: 8; } 71 | .order-last { order: 99999; } 72 | 73 | .flex-grow-0 { flex-grow: 0; } 74 | .flex-grow-1 { flex-grow: 1; } 75 | 76 | .flex-shrink-0 { flex-shrink: 0; } 77 | .flex-shrink-1 { flex-shrink: 1; } 78 | 79 | @media (--breakpoint-not-small) { 80 | .flex-ns { display: flex; } 81 | .inline-flex-ns { display: inline-flex; } 82 | .flex-auto-ns { 83 | flex: 1 1 auto; 84 | min-width: 0; /* 1 */ 85 | min-height: 0; /* 1 */ 86 | } 87 | .flex-none-ns { flex: none; } 88 | .flex-column-ns { flex-direction: column; } 89 | .flex-row-ns { flex-direction: row; } 90 | .flex-wrap-ns { flex-wrap: wrap; } 91 | .flex-nowrap-ns { flex-wrap: nowrap; } 92 | .flex-wrap-reverse-ns { flex-wrap: wrap-reverse; } 93 | .flex-column-reverse-ns { flex-direction: column-reverse; } 94 | .flex-row-reverse-ns { flex-direction: row-reverse; } 95 | .items-start-ns { align-items: flex-start; } 96 | .items-end-ns { align-items: flex-end; } 97 | .items-center-ns { align-items: center; } 98 | .items-baseline-ns { align-items: baseline; } 99 | .items-stretch-ns { align-items: stretch; } 100 | 101 | .self-start-ns { align-self: flex-start; } 102 | .self-end-ns { align-self: flex-end; } 103 | .self-center-ns { align-self: center; } 104 | .self-baseline-ns { align-self: baseline; } 105 | .self-stretch-ns { align-self: stretch; } 106 | 107 | .justify-start-ns { justify-content: flex-start; } 108 | .justify-end-ns { justify-content: flex-end; } 109 | .justify-center-ns { justify-content: center; } 110 | .justify-between-ns { justify-content: space-between; } 111 | .justify-around-ns { justify-content: space-around; } 112 | 113 | .content-start-ns { align-content: flex-start; } 114 | .content-end-ns { align-content: flex-end; } 115 | .content-center-ns { align-content: center; } 116 | .content-between-ns { align-content: space-between; } 117 | .content-around-ns { align-content: space-around; } 118 | .content-stretch-ns { align-content: stretch; } 119 | 120 | .order-0-ns { order: 0; } 121 | .order-1-ns { order: 1; } 122 | .order-2-ns { order: 2; } 123 | .order-3-ns { order: 3; } 124 | .order-4-ns { order: 4; } 125 | .order-5-ns { order: 5; } 126 | .order-6-ns { order: 6; } 127 | .order-7-ns { order: 7; } 128 | .order-8-ns { order: 8; } 129 | .order-last-ns { order: 99999; } 130 | 131 | .flex-grow-0-ns { flex-grow: 0; } 132 | .flex-grow-1-ns { flex-grow: 1; } 133 | 134 | .flex-shrink-0-ns { flex-shrink: 0; } 135 | .flex-shrink-1-ns { flex-shrink: 1; } 136 | } 137 | @media (--breakpoint-medium) { 138 | .flex-m { display: flex; } 139 | .inline-flex-m { display: inline-flex; } 140 | .flex-auto-m { 141 | flex: 1 1 auto; 142 | min-width: 0; /* 1 */ 143 | min-height: 0; /* 1 */ 144 | } 145 | .flex-none-m { flex: none; } 146 | .flex-column-m { flex-direction: column; } 147 | .flex-row-m { flex-direction: row; } 148 | .flex-wrap-m { flex-wrap: wrap; } 149 | .flex-nowrap-m { flex-wrap: nowrap; } 150 | .flex-wrap-reverse-m { flex-wrap: wrap-reverse; } 151 | .flex-column-reverse-m { flex-direction: column-reverse; } 152 | .flex-row-reverse-m { flex-direction: row-reverse; } 153 | .items-start-m { align-items: flex-start; } 154 | .items-end-m { align-items: flex-end; } 155 | .items-center-m { align-items: center; } 156 | .items-baseline-m { align-items: baseline; } 157 | .items-stretch-m { align-items: stretch; } 158 | 159 | .self-start-m { align-self: flex-start; } 160 | .self-end-m { align-self: flex-end; } 161 | .self-center-m { align-self: center; } 162 | .self-baseline-m { align-self: baseline; } 163 | .self-stretch-m { align-self: stretch; } 164 | 165 | .justify-start-m { justify-content: flex-start; } 166 | .justify-end-m { justify-content: flex-end; } 167 | .justify-center-m { justify-content: center; } 168 | .justify-between-m { justify-content: space-between; } 169 | .justify-around-m { justify-content: space-around; } 170 | 171 | .content-start-m { align-content: flex-start; } 172 | .content-end-m { align-content: flex-end; } 173 | .content-center-m { align-content: center; } 174 | .content-between-m { align-content: space-between; } 175 | .content-around-m { align-content: space-around; } 176 | .content-stretch-m { align-content: stretch; } 177 | 178 | .order-0-m { order: 0; } 179 | .order-1-m { order: 1; } 180 | .order-2-m { order: 2; } 181 | .order-3-m { order: 3; } 182 | .order-4-m { order: 4; } 183 | .order-5-m { order: 5; } 184 | .order-6-m { order: 6; } 185 | .order-7-m { order: 7; } 186 | .order-8-m { order: 8; } 187 | .order-last-m { order: 99999; } 188 | 189 | .flex-grow-0-m { flex-grow: 0; } 190 | .flex-grow-1-m { flex-grow: 1; } 191 | 192 | .flex-shrink-0-m { flex-shrink: 0; } 193 | .flex-shrink-1-m { flex-shrink: 1; } 194 | } 195 | 196 | @media (--breakpoint-large) { 197 | .flex-l { display: flex; } 198 | .inline-flex-l { display: inline-flex; } 199 | .flex-auto-l { 200 | flex: 1 1 auto; 201 | min-width: 0; /* 1 */ 202 | min-height: 0; /* 1 */ 203 | } 204 | .flex-none-l { flex: none; } 205 | .flex-column-l { flex-direction: column; } 206 | .flex-row-l { flex-direction: row; } 207 | .flex-wrap-l { flex-wrap: wrap; } 208 | .flex-nowrap-l { flex-wrap: nowrap; } 209 | .flex-wrap-reverse-l { flex-wrap: wrap-reverse; } 210 | .flex-column-reverse-l { flex-direction: column-reverse; } 211 | .flex-row-reverse-l { flex-direction: row-reverse; } 212 | 213 | .items-start-l { align-items: flex-start; } 214 | .items-end-l { align-items: flex-end; } 215 | .items-center-l { align-items: center; } 216 | .items-baseline-l { align-items: baseline; } 217 | .items-stretch-l { align-items: stretch; } 218 | 219 | .self-start-l { align-self: flex-start; } 220 | .self-end-l { align-self: flex-end; } 221 | .self-center-l { align-self: center; } 222 | .self-baseline-l { align-self: baseline; } 223 | .self-stretch-l { align-self: stretch; } 224 | 225 | .justify-start-l { justify-content: flex-start; } 226 | .justify-end-l { justify-content: flex-end; } 227 | .justify-center-l { justify-content: center; } 228 | .justify-between-l { justify-content: space-between; } 229 | .justify-around-l { justify-content: space-around; } 230 | 231 | .content-start-l { align-content: flex-start; } 232 | .content-end-l { align-content: flex-end; } 233 | .content-center-l { align-content: center; } 234 | .content-between-l { align-content: space-between; } 235 | .content-around-l { align-content: space-around; } 236 | .content-stretch-l { align-content: stretch; } 237 | 238 | .order-0-l { order: 0; } 239 | .order-1-l { order: 1; } 240 | .order-2-l { order: 2; } 241 | .order-3-l { order: 3; } 242 | .order-4-l { order: 4; } 243 | .order-5-l { order: 5; } 244 | .order-6-l { order: 6; } 245 | .order-7-l { order: 7; } 246 | .order-8-l { order: 8; } 247 | .order-last-l { order: 99999; } 248 | 249 | .flex-grow-0-l { flex-grow: 0; } 250 | .flex-grow-1-l { flex-grow: 1; } 251 | 252 | .flex-shrink-0-l { flex-shrink: 0; } 253 | .flex-shrink-1-l { flex-shrink: 1; } 254 | } 255 | --------------------------------------------------------------------------------