├── .github ├── FUNDING.yml └── workflows │ ├── automated.yml │ └── manual.yml ├── .gitignore ├── CHANGELOG.md ├── CONTRIBUTING.md ├── CoCreate.config.js ├── LICENSE ├── README.md ├── demo ├── CoCreate-card.html ├── CoCreate-navbar.1.html ├── CoCreate-navbar.html ├── CoCreate-smooth-scroll.html ├── avatar.html ├── flip-item.html └── progress-bar.html ├── docs ├── avatar.html ├── flip-item.html ├── index.html └── utility.html ├── package.json ├── prettier.config.js ├── release.config.js ├── src ├── css │ ├── avatar.css │ ├── badge.css │ ├── box-shadow.css │ ├── card.css │ ├── checkbox.css │ ├── core.css │ ├── flip-item.css │ ├── menu-icon.css │ ├── overlay-content.css │ ├── progressbar.css │ └── scroll.css └── index.js ├── testCompileTimeCss.js └── webpack.config.js /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | # These are supported funding model platforms 2 | 3 | github: CoCreate-app 4 | -------------------------------------------------------------------------------- /.github/workflows/automated.yml: -------------------------------------------------------------------------------- 1 | name: Automated Workflow 2 | on: 3 | push: 4 | branches: 5 | - master 6 | jobs: 7 | about: 8 | runs-on: ubuntu-latest 9 | steps: 10 | - name: Checkout 11 | uses: actions/checkout@v3 12 | - name: Setup Node.js 13 | uses: actions/setup-node@v3 14 | with: 15 | node-version: 16 16 | - name: Jaid/action-sync-node-meta 17 | uses: jaid/action-sync-node-meta@v1.4.0 18 | with: 19 | direction: overwrite-github 20 | githubToken: "${{ secrets.GITHUB }}" 21 | release: 22 | runs-on: ubuntu-latest 23 | steps: 24 | - name: Checkout 25 | uses: actions/checkout@v3 26 | - name: Setup Node.js 27 | uses: actions/setup-node@v3 28 | with: 29 | node-version: 14 30 | - name: Semantic Release 31 | uses: cycjimmy/semantic-release-action@v3 32 | id: semantic 33 | with: 34 | extra_plugins: | 35 | @semantic-release/changelog 36 | @semantic-release/git 37 | @semantic-release/github 38 | env: 39 | GITHUB_TOKEN: "${{ secrets.GITHUB }}" 40 | NPM_TOKEN: "${{ secrets.NPM_TOKEN }}" 41 | outputs: 42 | new_release_published: "${{ steps.semantic.outputs.new_release_published }}" 43 | new_release_version: "${{ steps.semantic.outputs.new_release_version }}" 44 | 45 | -------------------------------------------------------------------------------- /.github/workflows/manual.yml: -------------------------------------------------------------------------------- 1 | name: Manual Workflow 2 | on: 3 | workflow_dispatch: 4 | inputs: 5 | invalidations: 6 | description: | 7 | If set to 'true', invalidates previous upload. 8 | default: "true" 9 | required: true 10 | 11 | jobs: 12 | cdn: 13 | runs-on: ubuntu-latest 14 | env: 15 | DRY_RUN: ${{ github.event.inputs.dry_run }} 16 | GITHUB_TOKEN: "${{ secrets.GITHUB }}" 17 | NPM_TOKEN: "${{ secrets.NPM_TOKEN }}" 18 | 19 | steps: 20 | - name: Checkout 21 | uses: actions/checkout@v3 22 | - name: setup nodejs 23 | uses: actions/setup-node@v3 24 | with: 25 | node-version: 16 26 | - name: yarn install 27 | run: > 28 | echo "//registry.npmjs.org/:_authToken=${{ secrets.NPM_TOKEN }}" > 29 | .npmrc 30 | 31 | yarn install 32 | - name: yarn build 33 | run: yarn build 34 | - name: upload latest bundle 35 | uses: CoCreate-app/CoCreate-s3@master 36 | with: 37 | aws-key-id: "${{ secrets.AWSACCESSKEYID }}" 38 | aws-access-key: "${{ secrets.AWSSECERTACCESSKEY }}" 39 | distributionId: "${{ secrets.DISTRIBUTION_ID }}" 40 | bucket: testcrudbucket 41 | source: ./dist 42 | destination: /CoCreateCSS/latest 43 | acl: public-read 44 | invalidations: ${{ github.event.inputs.invalidations }} 45 | - name: upload css to latest 46 | uses: CoCreate-app/CoCreate-s3@master 47 | with: 48 | aws-key-id: "${{ secrets.AWSACCESSKEYID }}" 49 | aws-access-key: "${{ secrets.AWSSECERTACCESSKEY }}" 50 | bucket: testcrudbucket 51 | source: ./dist 52 | destination: /latest 53 | acl: public-read 54 | invalidations: true 55 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # ignore 2 | node_modules 3 | dist 4 | package-lock.json 5 | yarn.lock 6 | pnpm-lock.yaml 7 | 8 | logs 9 | *.log 10 | npm-debug.log* 11 | yarn-debug.log* 12 | yarn-error.log* 13 | lerna-debug.log* 14 | .pnpm-debug.log* 15 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contributing to CoCreate-CSS 2 | 3 | This project is work of [many contributors](https://github.com/CoCreate-app/CoCreate-CSS/graphs/contributors). 4 | You're encouraged to submit [pull requests](https://github.com/CoCreate-app/CoCreate-CSS/pulls), 5 | [propose features and discuss issues](https://github.com/CoCreate-app/CoCreate-CSS/issues). 6 | 7 | In the examples below, substitute your Github username for `contributor` in URLs. 8 | 9 | ## Fork the Project 10 | 11 | Fork the [project on Github](https://github.com/CoCreate-app/CoCreate-CSS) and check out your copy. 12 | 13 | ``` 14 | git CSS https://github.com/contributor/CoCreate-CSS.git 15 | cd CoCreate-CSS 16 | git remote add upstream https://github.com/CoCreate-app/CoCreate-CSS.git 17 | ``` 18 | 19 | ## Create a Topic Branch 20 | 21 | Make sure your fork is up-to-date and create a topic branch for your feature or bug fix on dev branch. 22 | 23 | ``` 24 | git checkout dev 25 | git pull upstream dev 26 | git checkout -b my-feature-branch 27 | ``` 28 | 29 | ## Write Tests 30 | 31 | Try to write a test that reproduces the problem you're trying to fix or describes a feature that you want to build. 32 | 33 | We definitely appreciate pull requests that highlight or reproduce a problem, even without a fix. 34 | 35 | ## Write Code 36 | 37 | Implement your feature or bug fix. 38 | 39 | ## Write Documentation 40 | 41 | Document any external behavior in the [README](README.md). 42 | 43 | ## Commit Changes 44 | 45 | Make sure git knows your name and email address: 46 | 47 | ``` 48 | git config --global user.name "Your Name" 49 | git config --global user.email "contributor@example.com" 50 | ``` 51 | 52 | We use [semantic-release](https://github.com/semantic-release/semantic-release) as process to generate changelog 53 | and to release. Write meaningful commits according to 54 | [Commit Message Formats](https://github.com/semantic-release/semantic-release#commit-message-format) is important. 55 | 56 | ``` 57 | git add ... 58 | git commit -am "commit-type(optional topic): a meaningful message" 59 | ``` 60 | 61 | Here is an example of the release type that should be done based on a [semantic-release](https://github.com/semantic-release/semantic-release): 62 | 63 | | Commit message | Release type | 64 | | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------- | 65 | | `fix(pencil): stop graphite breaking when too much pressure applied` | Patch Release | 66 | | `feat(pencil): add 'graphiteWidth' option` | ~~Minor~~ Feature Release | 67 | | `perf(pencil): remove graphiteWidth option`

`BREAKING CHANGE: The graphiteWidth option has been removed.`
`The default graphite width of 10mm is always used for performance reasons.` | ~~Major~~ Breaking Release | 68 | 69 | 70 | ## Push 71 | 72 | ``` 73 | git push origin my-feature-branch 74 | ``` 75 | 76 | ## Make a Pull Request 77 | 78 | Go to [https://github.com/CoCreate-app/CoCreate-CSS](https://github.com/CoCreate-app/CoCreate-CSS) and select your feature branch. 79 | Click the 'Pull Request' button and fill out the form. Pull requests are usually reviewed within a few days. 80 | 81 | ## Rebase 82 | 83 | If you've been working on a change for a while, rebase with upstream/dev. 84 | 85 | ``` 86 | git fetch upstream 87 | git rebase upstream/dev 88 | git push origin my-feature-branch -f 89 | ``` 90 | 91 | ## Be Patient 92 | 93 | It's likely that your change will not be merged and that the nitpicky maintainers will ask you to do more, or fix seemingly benign problems. Hang in there! 94 | 95 | ## Thank You 96 | 97 | Please do know that we really appreciate and value your time and work. We love you, really. -------------------------------------------------------------------------------- /CoCreate.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | "organization_id": "", 3 | "key": "", 4 | "host": "", 5 | "directories": [ 6 | { 7 | "entry": "./docs", 8 | "array": "files", 9 | "object": { 10 | "name": "{{name}}", 11 | "src": "{{source}}", 12 | "host": [ 13 | "*" 14 | ], 15 | "directory": "docs", 16 | "path": "/docs/CoCreateCSS/{{path}}", 17 | "pathname": "{{pathname}}", 18 | "content-type": "{{content-type}}", 19 | "public": "true" 20 | } 21 | }, 22 | { 23 | "entry": "./dist", 24 | "exclude": [ 25 | ".txt", ".js" 26 | ], 27 | "array": "files", 28 | "object": { 29 | "name": "{{name}}", 30 | "src": "{{source}}", 31 | "host": [ 32 | "*" 33 | ], 34 | "directory": "{{directory}}", 35 | "path": "{{path}}", 36 | "pathname": "{{pathname}}", 37 | "content-type": "{{content-type}}", 38 | "public": "true" 39 | } 40 | }, 41 | ] 42 | } -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2020 CoCreate LLC 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, 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, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # CoCreateCSS 2 | 3 | A lightweight utility-first Atomic CSS framework promoting rapid UI development. No learning curve... Apply your native css property:value directly in class, then extract and transform it.. Take it for a spin in our [playground!](https://cocreate.app/docs/CoCreateCSS) 4 | 5 | ![minified](https://img.badgesize.io/https://cdn.cocreate.app/CoCreateCSS/latest/CoCreateCSS.min.js?style=flat-square&label=minified&color=orange) 6 | ![gzip](https://img.badgesize.io/https://cdn.cocreate.app/CoCreateCSS/latest/CoCreateCSS.min.js?compression=gzip&style=flat-square&label=gzip&color=yellow) 7 | ![brotli](https://img.badgesize.io/https://cdn.cocreate.app/CoCreateCSS/latest/CoCreateCSS.min.js?compression=brotli&style=flat-square&label=brotli) 8 | ![GitHub latest release](https://img.shields.io/github/v/release/CoCreate-app/CoCreateCSS?style=flat-square) 9 | ![License](https://img.shields.io/github/license/CoCreate-app/CoCreateCSS?style=flat-square) 10 | ![Hiring](https://img.shields.io/static/v1?style=flat-square&label=&message=Hiring&color=blueviolet) 11 | 12 | ![CoCreateCSS](https://cdn.cocreate.app/docs/CoCreateCSS.gif) 13 | 14 | ## [Docs & Demo](https://cocreate.app/docs/CoCreateCSS) 15 | 16 | For a complete guide and working demo refer to the [doumentation](https://cocreate.app/docs/CoCreateCSS) 17 | 18 | ## CDN 19 | 20 | ```html 21 | 22 | ``` 23 | 24 | ```html 25 | 26 | ``` 27 | 28 | ## NPM 29 | 30 | ```shell 31 | $ npm i @cocreate/cocreatecss 32 | ``` 33 | 34 | ## yarn 35 | 36 | ```shell 37 | $ yarn install @cocreate/cocreatecss 38 | ``` 39 | 40 | # Table of Contents 41 | 42 | - [Table of Contents](#table-of-contents) 43 | - [Announcements](#announcements) 44 | - [Roadmap](#roadmap) 45 | - [How to Contribute](#how-to-contribute) 46 | - [About](#about) 47 | - [License](#license) 48 | 49 | 50 | 51 | # Announcements 52 | 53 | All updates to this library are documented in our [CHANGELOG](https://github.com/CoCreate-app/CoCreateCSS/blob/master/CHANGELOG.md) and [releases](https://github.com/CoCreate-app/CoCreateCSS/releases). You may also subscribe to email for releases and breaking changes. 54 | 55 | 56 | 57 | # Roadmap 58 | 59 | If you are interested in the future direction of this project, please take a look at our open [issues](https://github.com/CoCreate-app/CoCreateCSS/issues) and [pull requests](https://github.com/CoCreate-app/CoCreateCSS/pulls). We would love to hear your feedback. 60 | 61 | 62 | 63 | # About 64 | 65 | CoCreateCSS is guided and supported by the CoCreate Developer Experience Team. 66 | 67 | Please Email the Developer Experience Team [here](mailto:develop@cocreate.app) in case of any queries. 68 | 69 | CoCreateCSS is maintained and funded by CoCreate. The names and logos for CoCreate are trademarks of CoCreate, LLC. 70 | 71 | 72 | 73 | # How to Contribute 74 | 75 | We encourage contribution to our libraries (you might even score some nifty swag), please see our [CONTRIBUTING](https://github.com/CoCreate-app/CoCreateCSS/blob/master/CONTRIBUTING.md) guide for details. 76 | 77 | We want this library to be community-driven, and CoCreate led. We need your help to realize this goal. To help make sure we are building the right things in the right order, we ask that you create [issues](https://github.com/CoCreate-app/CoCreateCSS/issues) and [pull requests](https://github.com/CoCreate-app/CoCreateCSS/pulls) or merely upvote or comment on existing issues or pull requests. 78 | 79 | We appreciate your continued support, thank you! 80 | 81 | 82 | 83 | # License 84 | 85 | [The MIT License (MIT)](https://github.com/CoCreate-app/CoCreateCSS/blob/master/LICENSE) 86 | 87 | 88 | -------------------------------------------------------------------------------- /demo/CoCreate-card.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 12 | Card | CoCreate 13 | 14 | 15 | 19 | 20 | 21 | 22 | 23 | 24 | 25 |
30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 101 |
102 |
103 |
106 |
107 | 114 | 118 |
120 | Template Name 127 |
128 |
129 |
130 |

135 | Description 136 |

137 |
138 |
139 | 140 | 144 |
145 | 146 | 147 | 148 | 149 | 150 | 151 | 152 | -------------------------------------------------------------------------------- /demo/CoCreate-navbar.1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 12 | Navbar | CoCreate 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 |
26 | 27 | 28 | 29 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 110 | 111 | 112 |
116 |
117 | 127 | B 134 | 139 | 142 | 143 | 144 |
145 |
146 |
147 | 148 | 149 | 150 | 158 | 159 | 160 | 161 | 162 | 163 | -------------------------------------------------------------------------------- /demo/CoCreate-navbar.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 12 | Navbar | CoCreate 13 | 14 | 15 | 19 | 20 | 21 | 22 | 23 | 24 | 25 |
31 | 32 | 33 | 34 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 115 | 116 | 117 |
121 |
122 | 132 | B 139 | 144 | 147 | 148 | 149 |
150 |
151 |
152 | 153 | 154 | 155 | 163 | 164 | 165 | 166 | 167 | 168 | -------------------------------------------------------------------------------- /demo/CoCreate-smooth-scroll.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 12 | Smooth Scroll | CoCreate 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 |
28 | 29 | 30 | 31 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 112 | 113 | 114 |
118 |
119 | 129 | B 136 | 141 | 144 | 145 | 146 |
147 |
148 |
149 | 150 |
151 |
152 |

Smooth Page Scrolling

153 | 154 | 158 | 159 |

Section One

160 | 161 |

162 | Pellentesque habitant morbi tristique senectus et netus et 163 | malesuada fames ac turpis egestas. Vestibulum tortor quam, 164 | feugiat vitae, ultricies eget, tempor sit amet, ante. Donec 165 | eu libero sit amet quam egestas semper. Aenean ultricies mi 166 | vitae est. Mauris placerat eleifend leo. Quisque sit amet 167 | est et sapien ullamcorper pharetra. Vestibulum erat wisi, 168 | condimentum sed, commodo vitae, ornare sit amet, wisi. 169 | Aenean fermentum, elit eget tincidunt condimentum, eros 170 | ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec 171 | non enim in turpis pulvinar facilisis. Ut felis. Praesent 172 | dapibus, neque id cursus faucibus, tortor neque egestas 173 | augue, eu vulputate magna eros eu erat. Aliquam erat 174 | volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, 175 | facilisis luctus, metus 176 |

177 | 178 |

179 | Pellentesque habitant morbi tristique senectus et netus et 180 | malesuada fames ac turpis egestas. Vestibulum tortor quam, 181 | feugiat vitae, ultricies eget, tempor sit amet, ante. Donec 182 | eu libero sit amet quam egestas semper. Aenean ultricies mi 183 | vitae est. Mauris placerat eleifend leo. Quisque sit amet 184 | est et sapien ullamcorper pharetra. Vestibulum erat wisi, 185 | condimentum sed, commodo vitae, ornare sit amet, wisi. 186 | Aenean fermentum, elit eget tincidunt condimentum, eros 187 | ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec 188 | non enim in turpis pulvinar facilisis. Ut felis. Praesent 189 | dapibus, neque id cursus faucibus, tortor neque egestas 190 | augue, eu vulputate magna eros eu erat. Aliquam erat 191 | volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, 192 | facilisis luctus, metus 193 |

194 | 195 |

196 | Pellentesque habitant morbi tristique senectus et netus et 197 | malesuada fames ac turpis egestas. Vestibulum tortor quam, 198 | feugiat vitae, ultricies eget, tempor sit amet, ante. Donec 199 | eu libero sit amet quam egestas semper. Aenean ultricies mi 200 | vitae est. Mauris placerat eleifend leo. Quisque sit amet 201 | est et sapien ullamcorper pharetra. Vestibulum erat wisi, 202 | condimentum sed, commodo vitae, ornare sit amet, wisi. 203 | Aenean fermentum, elit eget tincidunt condimentum, eros 204 | ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec 205 | non enim in turpis pulvinar facilisis. Ut felis. Praesent 206 | dapibus, neque id cursus faucibus, tortor neque egestas 207 | augue, eu vulputate magna eros eu erat. Aliquam erat 208 | volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, 209 | facilisis luctus, metus 210 |

211 | 212 |

213 | Pellentesque habitant morbi tristique senectus et netus et 214 | malesuada fames ac turpis egestas. Vestibulum tortor quam, 215 | feugiat vitae, ultricies eget, tempor sit amet, ante. Donec 216 | eu libero sit amet quam egestas semper. Aenean ultricies mi 217 | vitae est. Mauris placerat eleifend leo. Quisque sit amet 218 | est et sapien ullamcorper pharetra. Vestibulum erat wisi, 219 | condimentum sed, commodo vitae, ornare sit amet, wisi. 220 | Aenean fermentum, elit eget tincidunt condimentum, eros 221 | ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec 222 | non enim in turpis pulvinar facilisis. Ut felis. Praesent 223 | dapibus, neque id cursus faucibus, tortor neque egestas 224 | augue, eu vulputate magna eros eu erat. Aliquam erat 225 | volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, 226 | facilisis luctus, metus 227 |

228 | 229 |

Section Two

230 | 231 |

Top

232 | 233 |

234 | quam, feugiat vitae, ultricies eget, tempor sit amet, ante. 235 | Donec eu libero sit amet quam egestas semper. Aenean 236 | ultricies mi vitae est. Mauris placerat eleifend leo. 237 | Quisque sit amet est et sapien ullamcorper pharetra. 238 | Vestibulum erat wisi, condimentum sed, commodo vitae, ornare 239 | sit amet, wisi. Aenean fermentum, elit eget tincidunt 240 | condimentum, eros ipsum rutrum orci, sagittis tempus lacus 241 | enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut 242 | felis. Praesent dapibus, neque id cursus faucibus, tortor 243 | neque egestas augue, eu vulputate magna eros eu erat. 244 | Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan 245 | porttitor, facilisis luctus, metus 246 |

247 | 248 |

249 | Pellentesque habitant morbi tristique senectus et netus et 250 | malesuada fames ac turpis egestas. Vestibulum tortor quam, 251 | feugiat vitae, ultricies eget, tempor sit amet, ante. Donec 252 | eu libero sit amet quam egestas semper. Aenean ultricies mi 253 | vitae est. Mauris placerat eleifend leo. Quisque sit amet 254 | est et sapien ullamcorper pharetra. Vestibulum erat wisi, 255 | condimentum sed, commodo vitae, ornare sit amet, wisi. 256 | Aenean fermentum, elit eget tincidunt condimentum, eros 257 | ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec 258 | non enim in turpis pulvinar facilisis. Ut felis. Praesent 259 | dapibus, neque id cursus faucibus, tortor neque egestas 260 | augue, eu vulputate magna eros eu erat. Aliquam erat 261 | volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, 262 | facilisis luctus, metus 263 |

264 | 265 |

Section Three

266 | 267 |

Top

268 | 269 |

270 | quam, feugiat vitae, ultricies eget, tempor sit amet, ante. 271 | Donec eu libero sit amet quam egestas semper. Aenean 272 | ultricies mi vitae est. Mauris placerat eleifend leo. 273 | Quisque sit amet est et sapien ullamcorper pharetra. 274 | Vestibulum erat wisi, condimentum sed, commodo vitae, ornare 275 | sit amet, wisi. Aenean fermentum, elit eget tincidunt 276 | condimentum, eros ipsum rutrum orci, sagittis tempus lacus 277 | enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut 278 | felis. Praesent dapibus, neque id cursus faucibus, tortor 279 | neque egestas augue, eu vulputate magna eros eu erat. 280 | Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan 281 | porttitor, facilisis luctus, metus 282 |

283 | 284 |

285 | Pellentesque habitant morbi tristique senectus et netus et 286 | malesuada fames ac turpis egestas. Vestibulum tortor quam, 287 | feugiat vitae, ultricies eget, tempor sit amet, ante. Donec 288 | eu libero sit amet quam egestas semper. Aenean ultricies mi 289 | vitae est. Mauris placerat eleifend leo. Quisque sit amet 290 | est et sapien ullamcorper pharetra. Vestibulum erat wisi, 291 | condimentum sed, commodo vitae, ornare sit amet, wisi. 292 | Aenean fermentum, elit eget tincidunt condimentum, eros 293 | ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec 294 | non enim in turpis pulvinar facilisis. Ut felis. Praesent 295 | dapibus, neque id cursus faucibus, tortor neque egestas 296 | augue, eu vulputate magna eros eu erat. Aliquam erat 297 | volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, 298 | facilisis luctus, metus 299 |

300 | 301 |

302 | quam, feugiat vitae, ultricies eget, tempor sit amet, ante. 303 | Donec eu libero sit amet quam egestas semper. Aenean 304 | ultricies mi vitae est. Mauris placerat eleifend leo. 305 | Quisque sit amet est et sapien ullamcorper pharetra. 306 | Vestibulum erat wisi, condimentum sed, commodo vitae, ornare 307 | sit amet, wisi. Aenean fermentum, elit eget tincidunt 308 | condimentum, eros ipsum rutrum orci, sagittis tempus lacus 309 | enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut 310 | felis. Praesent dapibus, neque id cursus faucibus, tortor 311 | neque egestas augue, eu vulputate magna eros eu erat. 312 | Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan 313 | porttitor, facilisis luctus, metus 314 |

315 | 316 |

317 | Pellentesque habitant morbi tristique senectus et netus et 318 | malesuada fames ac turpis egestas. Vestibulum tortor quam, 319 | feugiat vitae, ultricies eget, tempor sit amet, ante. Donec 320 | eu libero sit amet quam egestas semper. Aenean ultricies mi 321 | vitae est. Mauris placerat eleifend leo. Quisque sit amet 322 | est et sapien ullamcorper pharetra. Vestibulum erat wisi, 323 | condimentum sed, commodo vitae, ornare sit amet, wisi. 324 | Aenean fermentum, elit eget tincidunt condimentum, eros 325 | ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec 326 | non enim in turpis pulvinar facilisis. Ut felis. Praesent 327 | dapibus, neque id cursus faucibus, tortor neque egestas 328 | augue, eu vulputate magna eros eu erat. Aliquam erat 329 | volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, 330 | facilisis luctus, metus 331 |

332 |
333 |
334 | 335 | 343 | 344 | 345 | 346 | 347 | 348 | 349 | 350 | -------------------------------------------------------------------------------- /demo/avatar.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | CoCreate-avatar Documentation | CoCreateCSS 8 | 13 | 16 | 19 | 20 | 23 | 24 | 32 | 33 | 34 | 35 | 36 | 45 | 52 | 56 |
57 | 58 |
62 |
64 |
65 |

CoCreate-avatar

66 |
67 |
69 |
79 | 99 | 105 |
106 | 112 |
113 |
114 |

115 | A headless vinilla javascript micro component. Easy 116 | configuration using HTML5 attributes or Javscript api. 117 |

118 |
119 |
121 |
127 | 131 |

Usage

132 | 137 | 138 |
139 | 140 |
141 |

142 | This is xxxxx usage 143 |

144 | 145 |
146 | 
147 | 												
148 | <div class="avatar-wrapper">
149 | 		<a class="avatar round">
150 | 				<span key="name" class="avatar-name">B</span>
151 | 				<span key="profile_image" class="avatar-image">
152 | 						<img src="images/Velazquez.jpg" onerror="this.style.display='none'"/>
153 | 				</span>
154 | 		</a>
155 | 		<div class="avatar-status on"></div>
156 | 		<div class="avatar-label">3</div>
157 | </div>
158 | 												
159 |
160 |
161 |

162 | This is xxxxx usage 163 |

164 |

165 | This is xxxxx usage 166 |

167 |
168 |
174 | 178 |

Attributes

179 | 184 | 185 |
186 |
    187 |
  • 189 |

    avatar-wrapper

    190 |

    Wrapper div of avatar

    191 |
    • 192 |
  • 194 |

    avatar

    195 |

    Tag for avatar

    196 |
    • 197 |
  • 199 |

    round

    200 |

    201 | In same tag as avatar and makes avatar rounded. 202 |

    203 |
    • 204 |
  • 206 |

    avatar-image

    207 |

    208 | Inner tag of avatar tag and it sets avatar 209 | image. 210 |

    211 |
    • 212 |
  • 214 |

    avatar-status on(off)

    215 |

    This is for the status of avatar.

    216 |
    • 217 |
  • 219 |

    avatar-label

    220 |

    This is for the label of avatar.

    221 |
    • 222 |
223 |
224 | 225 |
227 | 228 |
234 | 238 |

Demo

239 | 244 | 245 |
246 |
248 | 249 |
252 |
256 | 268 |
271 |
272 | 273 |
276 |
277 |
278 | 279 |
281 | 292 | 302 | 309 | 319 | 323 |
324 |
325 | 326 |
327 |
328 |
329 | 335 |
336 | 337 | 338 | 339 | 340 | -------------------------------------------------------------------------------- /demo/flip-item.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 12 | Avatar | CoCreate 13 | 14 | 15 | 16 | 17 | 18 |
19 |
20 |
21 |
some text
22 |
23 |
24 |
25 | 26 | 27 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /demo/progress-bar.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 10 | 11 | 12 | 16 | 17 | 22 | 23 | 24 | CodePen - Pure CSS (SCSS) Bootstrap compatible circular progress 25 | bars 26 | 27 | 28 | 31 | 32 | 35 | 36 | 242 | 243 | 244 | 245 | 246 | 247 |
248 |

Pure CSS (SCSS) Bootstrap compatible circular progress bars

249 |

250 | This uses a data-attribute to create the progress bar. Forked 251 | from 252 | circle-progress-bar. This functions based on increments defined in the the scss. 256 | Change the $howManySteps var and the for loops below will 257 | generate the CSS. The data attributes will need to be changed to 258 | reflect the newly generated CSS. This doesn't require Bootstrap. 259 | Let me know if you use it your project, I'd love to see it in 260 | the wild. 261 |

262 |
263 |
264 |
265 |
266 |
267 | 268 | 269 | 270 | 271 | 272 | 273 |
274 |
275 | 20%
276 | completed 277 |
278 |
279 |
280 |
281 |
282 |
283 | 284 | 285 | 286 | 287 | 288 | 289 |
290 |
291 | 40%
292 | completed 293 |
294 |
295 |
296 |
297 | 298 |
299 |
300 | 301 | 302 | 303 | 304 | 305 | 306 |
307 |
308 | 80%
309 | completed 310 |
311 |
312 |
313 |
314 | 315 |
316 |
317 | 318 | 319 | 320 | 321 | 322 | 323 |
324 |
325 | 100%
326 | completed 327 |
328 |
329 |
330 |
331 | 332 |
333 |
334 | 335 | 336 | 337 | 338 | 339 | 340 |
341 |
342 | 0%
343 | completed 344 |
345 |
346 |
347 |
348 |
349 |
350 | 351 | 352 | -------------------------------------------------------------------------------- /docs/avatar.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | CoCreate-avatar Documentation | CoCreateCSS 8 | 13 | 16 | 19 | 20 | 23 | 24 | 32 | 40 | 41 | 42 | 43 | 44 | 45 | 53 | 60 | 64 |
65 | 66 |
70 |
72 |
73 |

CoCreate-avatar

74 |
75 |
77 |
87 | 107 | 113 |
114 | 120 |
121 |
122 |

124 | A headless vinilla javascript micro component. Easy 125 | configuration using HTML5 attributes or Javscript api. 126 |

127 |
128 |
130 |
136 | 140 |

Usage

141 | 146 | 147 |
148 | 149 |
150 |

151 | This is xxxxx usage 152 |

153 | 154 |
155 | 
156 |                         
157 | <div class="avatar-wrapper">
158 |     <a class="avatar round">
159 |         <span key="name" class="avatar-name">B</span>
160 |         <span key="profile_image" class="avatar-image">
161 |             <img src="images/Velazquez.jpg" onerror="this.style.display='none'"/>
162 |         </span>
163 |     </a>
164 |     <div class="avatar-status on"></div>
165 |     <div class="avatar-label">3</div>
166 | </div>
167 |                         
168 |
169 |
170 |

171 | This is xxxxx usage 172 |

173 |

174 | This is xxxxx usage 175 |

176 |
177 |
183 | 187 |

Attributes

188 | 193 | 194 |
195 |
    196 |
  • 198 |

    avatar-wrapper

    199 |

    Wrapper div of avatar

    200 |
    • 201 |
  • 203 |

    avatar

    204 |

    Tag for avatar

    205 |
    • 206 |
  • 208 |

    round

    209 |

    210 | In same tag as avatar and makes avatar rounded. 211 |

    212 |
    • 213 |
  • 215 |

    avatar-image

    216 |

    217 | Inner tag of avatar tag and it sets avatar 218 | image. 219 |

    220 |
    • 221 |
  • 223 |

    avatar-status on(off)

    224 |

    This is for the status of avatar.

    225 |
    • 226 |
  • 228 |

    avatar-label

    229 |

    This is for the label of avatar.

    230 |
    • 231 |
232 |
233 | 234 |
236 | 237 |
243 | 247 |

Demo

248 | 253 | 254 |
255 |
257 | 258 |
261 |
265 | 277 |
280 |
281 | 282 |
285 |
286 |
287 | 288 |
290 | 301 | 311 | 318 | 328 | 332 |
333 |
334 | 335 |
336 |
337 |
338 | 344 |
345 | 346 | 347 | 348 | 349 | -------------------------------------------------------------------------------- /docs/flip-item.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | CoCreate-flip-item Documentation | CoCreateCSS 8 | 13 | 16 | 19 | 20 | 23 | 24 | 32 | 33 | 34 | 35 | 36 | 37 | 45 | 52 | 56 |
57 | 58 |
62 |
64 |
65 |

CoCreate-flip-item

66 |
67 |
69 |
79 | 99 | 105 |
106 | 112 |
113 |
114 |

116 | A headless vinilla javascript micro component. Easy 117 | configuration using HTML5 attributes or Javscript api. 118 |

119 |
120 |
122 |
128 | 132 |

Usage

133 | 138 | 139 |
140 | 141 |
142 |

143 | This is xxxxx usage 144 |

145 | 146 |
147 | 
<div></div>
148 |
149 |

150 | This is xxxxx usage 151 |

152 |

153 | This is xxxxx usage 154 |

155 |
156 |
162 | 166 |

Attributes

167 | 172 | 173 |
174 |
    175 |
  • 177 |

    178 | xxxxx 179 | string 182 | optional 185 |

    186 |

    XXXXX-attribute

    187 |
    • 188 |
  • 190 |

    191 | xxxxx 192 | string 195 | optional 198 |

    199 |

    XXXXX-attribute

    200 |
    • 201 |
202 |
203 | 204 |
206 | 207 |
213 | 217 |

Demo

218 | 223 | 224 |
225 |
227 | 228 |
231 |
235 | 247 |
250 |
251 | 252 |
255 |
256 |
257 | 258 |
260 | 271 | 281 | 288 | 298 | 302 |
303 |
304 | 305 |
306 |
307 |
308 | 314 |
315 | 316 | 317 | 318 | 319 | -------------------------------------------------------------------------------- /docs/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | CoCreateCSS - A utility first, atomic CSS framework 8 | 11 | 16 | 17 | 20 | 28 | 29 | 30 | 54 | 55 | 56 | 57 | 65 | 66 | 67 | 77 | 78 | 79 | 83 | 84 | 85 |
86 |
87 |
88 |
90 |
91 | 96 |
97 |
99 |

100 | A Utility First, 101 | Atomic CSS Framework 104 |

105 | For Building Collaborative Apps, Platforms and 107 | UI's 109 | 110 | 115 |
116 |
117 |
118 |
119 | 120 | 121 |
122 |
124 |
125 | 128 |
129 |
130 | 133 |
134 |
135 | 138 |
139 |
140 | 143 |
144 |
145 | 148 |
149 |
150 | 153 |
154 |
155 |
156 | 157 | 158 |
159 |
160 |
161 |
162 | 167 |
168 |
170 |

172 | Micro Component Architecture 173 |

174 |

175 | Vanilla javascript, lightweight, single purpose 176 | micro components. Easily modify, remove and/or 177 | replace components. Highly configuarable using 178 | HTML5 attributes. HTML5 developers can use a 179 | combination of attributes to create a dynamic 180 | experience. Javascript developers still have 181 | access to API, callbacks and events. 182 |

183 |

184 | 185 |
186 |
187 |
188 |
189 | 190 | 191 |
193 |
194 |
196 |
197 | 202 |
203 |
205 |

207 | Collaborative Headless CMS 208 |

209 |

210 | A lighting fast headless CMS over websocket, 211 | providing CRUD and CRDT functionality. Create, 212 | Read, Update, Delete and Filter lists. 213 | Collaborate on Text, DOM and Objects. Configure 214 | using HTML5 data-attibutes. Supports offline 215 | editing and user cursor positions in Inputs, 216 | Textareas, Rich Text Editors and Code Editors. 217 | But of course... Javascript developers still 218 | have access to API, callbacks and events. 219 |

220 | Get Your API Key 224 |
225 |
226 |
227 |
228 | 229 | 230 |
231 |
232 |
233 |
234 | 239 |
240 |
242 |

244 | Fully Customizable Admin Panel 245 |

246 |

247 | HTML5 Admin dashboard UI powered by CoCreateJS. 248 | It is 100% editable and used to manage and 249 | create views for your data and content. Use it 250 | as a Collaborative CRM, CMS and ERP. Can be 251 | modified, replaced or used as an example to 252 | build your own custom HTML5 admin dashboard. 253 |

254 |

255 | 256 |
257 |
258 |
259 |
260 | 261 | 262 |
264 |
265 |
267 |
268 | 273 |
274 |
276 |

278 | Collaborative Drag-n-Drop Builder 279 |

280 |

281 | We are in the process of using CoCreateJS 282 | components to create an experimental NO Code 283 | expereince. Every page of the adminUI can be 284 | edited in the drag and drop builder. CoCreate 285 | builder UI is completely customizable and 286 | supports editing of any html5 template. Can be 287 | modified, replaced or used as an example to 288 | build your own custom drang and drop builder. 289 |

290 |
291 |
292 |
293 |
294 | 295 | 296 |
297 |
298 |
299 |
300 | 305 |
306 |
308 |

310 | Thirdparty API Intergration 311 |

312 |

313 | We have put together a few thirdparty APIs and 314 | developed them to be used and configured with 315 | HTML5 attributes. Build custom flows and logic 316 | without ever leaving the html page... The 317 | CoCreate Way... Almost forgot, Javascript 318 | developers still have access to API, callbacks 319 | and events. 320 |

321 |

322 | 323 |
324 |
325 |
326 |
327 | 328 | 334 |
335 | 336 | 337 | 345 | 346 | 347 | 348 | 349 | -------------------------------------------------------------------------------- /docs/utility.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | CoCreate Utility CSS Documentation | CoCreateCSS 8 | 13 | 16 | 19 | 20 | 23 | 24 | 32 | 33 | 34 | 35 | 44 | 45 | 46 | 47 | 55 | 62 | 66 |
67 | 68 |
72 |
74 |
75 |

CoCreate utility CSS

76 |
77 |
79 |
89 | 109 | 115 |
116 | 122 |
123 |
124 |

125 | CoCreate provides the most convenient utility class. 126 |

127 |
130 |
132 |
138 | 142 |

Usage

143 | 148 | 149 |
150 | 151 |
152 |

153 | CoCreate utility Classes are very easy to use. 154 |

155 |

156 | We can use exactly same class names with 157 | "style:value". 158 |

159 |
160 | 
 161 |                                 
 162 | <div class="padding:16px"></div>
 163 | <div class="font-size:0.5rem color:red"></div>
 164 |                                 
 165 |
166 |
167 |

168 | Main styles and values provided as utility classes 169 | are as follows. 170 |

171 |
172 |
173 |
175 | 178 |
179 |

181 | direction 182 |

183 |
184 | 
<div class="direction:ltr"></div>
186 |

ltr

187 |

rtl

188 |
189 |

191 | display 192 |

193 |
194 | 
<div class="display:block"></div>
196 |

block

197 |

inline-block

198 |

inline

199 |

none

200 |

inherit

201 |

table

202 |

table-cell

203 |

flex

204 |
205 |

207 | overflow 208 |

209 |
210 | 
<div class="overflow:auto"></div>
212 |

auto

213 |

visible

214 |

scroll

215 |

hidden

216 |
217 |

219 | float 220 |

221 |
222 | 
<div class="float:left"></div>
224 |

left

225 |

right

226 |

none

227 |
228 |

230 | position 231 |

232 |
233 | 
<div class="position:relative"></div>
235 |

inherit

236 |

relative

237 |

absolute

238 |

fixed

239 |

sticky

240 |
241 |

243 | z-index 244 |

245 |
246 | 
<div class="z-index:auto"></div>
248 |

auto

249 |

inherit

250 |

initial

251 |

-2

252 |

-5

253 |

1 ~ 15

254 |

100

255 |

101

256 |

111

257 |

1000

258 |

1111

259 |
260 |

262 | top / bottom / left / right 263 |

264 |
265 | 
<div class="top:auto"></div>
267 |

auto

268 |

0

269 |

1px ~ 50px

270 |

55px

271 |

60px

272 |

65px

273 |

...

274 |

100px

275 |

150px

276 |

200px

277 |

...

278 |

400px

279 |

-1px ~ -50px

280 |

-55px

281 |

-60px

282 |

-65px

283 |

...

284 |

-100px

285 |

-150px

286 |

-200px

287 |

...

288 |

-400px

289 |
290 |

292 | bottom 293 |

294 |
295 | 
<div class="bottom:auto"></div>
297 |

auto

298 |

0

299 |

1px ~ 50px

300 |

55px

301 |

60px

302 |

65px

303 |

...

304 |

100px

305 |

150px

306 |

200px

307 |

...

308 |

400px

309 |

-1px ~ -50px

310 |

-55px

311 |

-60px

312 |

-65px

313 |

...

314 |

-100px

315 |

-150px

316 |

-200px

317 |

...

318 |

-400px

319 |
320 |

322 | left 323 |

324 |
325 | 
<div class="left:auto"></div>
327 |

auto

328 |

0

329 |

1px ~ 50px

330 |

55px

331 |

60px

332 |

65px

333 |

...

334 |

100px

335 |

150px

336 |

200px

337 |

...

338 |

400px

339 |

-1px ~ -50px

340 |

-55px

341 |

-60px

342 |

-65px

343 |

...

344 |

-100px

345 |

-150px

346 |

-200px

347 |

...

348 |

-400px

349 |
350 |

352 | right 353 |

354 |
355 | 
<div class="right:auto"></div>
357 |

auto

358 |

0

359 |

1px ~ 50px

360 |

55px

361 |

60px

362 |

65px

363 |

...

364 |

100px

365 |

150px

366 |

200px

367 |

...

368 |

400px

369 |

-1px ~ -50px

370 |

-55px

371 |

-60px

372 |

-65px

373 |

...

374 |

-100px

375 |

-150px

376 |

-200px

377 |

...

378 |

-400px

379 |
380 |

382 | height 383 |

384 |
385 | 
<div class="height:0"></div>
387 |

0

388 |

1px ~ 10px

389 |

20px

390 |

30px

391 |

40px

392 |

45px

393 |

48px

394 |

50px

395 |

70px

396 |

80px

397 |

90px

398 |

100px

399 |

130px

400 |

150px

401 |

200px

402 |

250px

403 |

300px

404 |

350px

405 |

...

406 |

700px

407 |

auto

408 |

25%

409 |

33%

410 |

50%

411 |

66%

412 |

75%

413 |

100%

414 |

100%-120px

415 |

100vh-120px

416 |

100vh-100px

417 |

100vh-90px

418 |

100vh-70px

419 |

100vh-50px

420 |

80vh

421 |

90vh

422 |

100vh

423 |

fill-available

424 |

fit-content

425 |
426 |

428 | min-height 429 |

430 |
431 | 
<div class="min-height:100px"></div>
433 |

100px

434 |

200px

435 |

...

436 |

700px

437 |
438 |

440 | max-height 441 |

442 |
443 | 
<div class="max-height:300px"></div>
445 |

60px

446 |

100%

447 |
448 |

450 | width 451 |

452 |
453 | 
<div class="width:0"></div>
455 |

0

456 |

1px ~ 10px

457 |

15px

458 |

20px

459 |

25px

460 |

...

461 |

90px

462 |

100px

463 |

110px

464 |

120px

465 |

130px

466 |

150px

467 |

180px

468 |

200px

469 |

250px

470 |

300px

471 |

350px

472 |

...

473 |

1000px

474 |

10%

475 |

12%

476 |

15%

477 |

20%

478 |

25%

479 |

30%

480 |

35%

481 |

40%

482 |

41% ~ 50%

483 |

55%

484 |

60%

485 |

65%

486 |

70%

487 |

75%

488 |

80%

489 |

85%

490 |

90%

491 |

95%

492 |

100%

493 |

auto

494 |

unset

495 |

fill-available

496 |
497 |

499 | min-width 500 |

501 |
502 | 
<div class="min-width:75px"></div>
504 |

75px

505 |

100px

506 |

200px

507 |

250px

508 |

300px

509 |
510 |

512 | max-width 513 |

514 |
515 | 
<div class="max-width:300px"></div>
517 |

75px

518 |

100px

519 |

300px

520 |

400px

521 |

500px

522 |

600px

523 |

1050px

524 |
525 |

527 | margin 528 |

529 |
530 | 
<div class="margin:auto"></div>
532 |

auto

533 |

0

534 |

5px

535 |

10px

536 |

15px

537 |

...

538 |

100px

539 |

540 | auto-lr(left & right) 541 |

542 |

0-lr

543 |

0px_5px

544 |

0px_10px

545 |

10px_5px

546 |

...

547 |

100px-lr

548 |

549 | auto_0px(top & bottom) 550 |

551 |

0_0px

552 |

5px_0px

553 |

10px_0px

554 |

15px_0px

555 |

...

556 |

100px_0px

557 |
558 |

560 | margin-top 561 |

562 |
563 | 
<div class="margin=top:auto"></div>
565 |

auto

566 |

0

567 |

5px

568 |

10px

569 |

15px

570 |

...

571 |

100px

572 |
573 |

575 | margin-bottom 576 |

577 |
578 | 
<div class="margin-bottom:auto"></div>
580 |

auto

581 |

0

582 |

5px

583 |

10px

584 |

15px

585 |

...

586 |

100px

587 |
588 |

590 | margin-left 591 |

592 |
593 | 
<div class="margin-left:auto"></div>
595 |

auto

596 |

0

597 |

5px

598 |

10px

599 |

15px

600 |

...

601 |

100px

602 |
603 |

605 | margin-right 606 |

607 |
608 | 
<div class="margin-right:auto"></div>
610 |

auto

611 |

0

612 |

5px

613 |

10px

614 |

15px

615 |

...

616 |

100px

617 |
618 |

620 | padding 621 |

622 |
623 | 
<div class="padding:0"></div>
625 |

0

626 |

5px

627 |

10px

628 |

15px

629 |

...

630 |

100px

631 |

632 | 0_0px(top & bottom) 633 |

634 |

5px_0px

635 |

10px_0px

636 |

15px_0px

637 |

...

638 |

100px_0px

639 |

0-lr(left & right)

640 |

1px-lr ~ 10px_5px

641 |

20px-lr

642 |

20px_5px

643 |

30px-lr

644 |

...

645 |

100px-lr

646 |
647 |

649 | padding-top 650 |

651 |
652 | 
<div class="padding-top:0"></div>
654 |

0

655 |

5px

656 |

10px

657 |

15px

658 |

...

659 |

100px

660 |
661 |

663 | padding-bottom 664 |

665 |
666 | 
<div class="padding-bottom:15px"></div>
668 |

0

669 |

5px

670 |

10px

671 |

15px

672 |

...

673 |

100px

674 |
675 |

677 | padding-left 678 |

679 |
680 | 
<div class="padding-left:15px"></div>
682 |

0

683 |

5px

684 |

10px

685 |

15px

686 |

...

687 |

100px

688 |
689 |

691 | padding-right 692 |

693 |
694 | 
<div class="padding-right:15px"></div>
696 |

0

697 |

5px

698 |

10px

699 |

15px

700 |

...

701 |

100px

702 |
703 |

705 | border-width 706 |

707 |
708 | 
<div class="border-width:0"></div>
710 |

0

711 |

1px ~ 10px

712 |

20px

713 |
714 |

716 | border-color 717 |

718 |
719 | 
<div class="border-color:black"></div>
721 |

white

722 |

black

723 |

extra-dark-gray

724 |

medium-dark-gray

725 |

dark-gray

726 |

extra-medium-gray

727 |

medium-gray

728 |

extra-light-gray

729 |

light-gray

730 |

light-pink

731 |

deep-pink

732 |

transparent-pink

733 |
734 |

736 | border-style 737 |

738 |
739 | 
<div class="border-style:dotted"></div>
741 |

dotted

742 |

dashed

743 |

solid

744 |

double

745 |

groove

746 |

ridge

747 |

inset

748 |

outset

749 |

none

750 |

hidden

751 |

transparent

752 |
753 |

755 | border-radius 756 |

757 |
758 | 
<div class="border-radius:0"></div>
760 |

0

761 |

1px ~ 10px

762 |

50px

763 |

50%

764 |

100%

765 |
766 |

768 | font-size 769 |

770 |
771 | 
<div class="font-size:18px"></div>
773 |

6px ~ 25px

774 |

30px

775 |

40px

776 |

50px

777 |

...

778 |

80px

779 |

01rem

780 |

02rem

781 |

03rem

782 |

04rem

783 |

05rem

784 |

1rem

785 |

2rem

786 |
787 |

789 | font-weight 790 |

791 |
792 | 
<div class="font-weight:800"></div>
794 |

100

795 |

200

796 |

300

797 |

...

798 |

900

799 |

bold

800 |
801 |

803 | font-align 804 |

805 |
806 | 
<div class="font-align:center"></div>
808 |

center

809 |

left

810 |

right

811 |
812 |

814 | color 815 |

816 |
817 | 
<div class="color:blue"></div>
819 |

white

820 |

black

821 |

extra-dark-gray

822 |

dark-gray

823 |

extra-medium-gray

824 |

medium-gray

825 |

extra-light-gray

826 |

light-gray

827 |

light-gray

828 |

very-light-gray

829 |

deep-pink

830 |

light-blue

831 |

blue

832 |
833 |

835 | text-overflow 836 |

837 |
838 | 
<div class="text-overflow:ellipsis"></div>
840 |

ellipsis

841 |
842 |

844 | text-transform 845 |

846 |
847 | 
<div class="text-transform:uppercase"></div>
849 |

uppercase

850 |
851 |

853 | text-decoration 854 |

855 |
856 | 
<div class="text-decoration:underline"></div>
858 |

underline

859 |
860 |

862 | background-attachment 863 |

864 |
865 | 
<div class="background-attachment:scroll"></div>
867 |

scroll

868 |

fixed

869 |

local

870 |

initial

871 |

inherit

872 |
873 |

875 | background-repeat 876 |

877 |
878 | 
<div class="background-repeat:repeat"></div>
880 |

repeat

881 |

repeat-x

882 |

repeat-y

883 |

no-repeat

884 |

initial

885 |

inherit

886 |
887 |

889 | background-size 890 |

891 |
892 | 
<div class="background-size:auto"></div>
894 |

auto

895 |

cover

896 |

contain

897 |

initial

898 |

inherit

899 |
900 |

902 | background-position 903 |

904 |
905 | 
<div class="background-position:center"></div>
907 |

left-top

908 |

left-center

909 |

left-bottom

910 |

right-top

911 |

right-center

912 |

right-bottom

913 |

center

914 |

center-top

915 |

center-center

916 |

center-bottom

917 |

initial

918 |

inherit

919 |
920 |

922 | bg (background) 923 |

924 |
925 | 
<div class="background:blue"></div>
927 |

transparent

928 |

white

929 |

black

930 |

dark-blue

931 |

extra-dark-gray

932 |

dark-gray

933 |

extra-medium-gray

934 |

medium-gray

935 |

extra-light-gray

936 |

medium-light-gray

937 |

light-gray

938 |

very-light-gray

939 |

deep-pink

940 |

transparent-white

941 |

transparent-black

942 |

white-opacity

943 |

black-opacity

944 |

black-opacity-light

945 |

deep-pink-opacity

946 |

charcoal-gray

947 |

blue

948 |
949 |

951 | background 952 |

953 |
954 | 
<div class="background:black"></div>
956 |

transparent

957 |

white

958 |

black

959 |

dark-blue

960 |
961 |

963 | opacity 964 |

965 |
966 | 
<div class="opacity:block"></div>
968 |

0

969 |

0.1

970 |

0.2

971 |

0.3

972 |

...

973 |

0.9

974 |

1

975 |
976 |

978 | cursor 979 |

980 |
981 | 
<div class="cursor:auto"></div>
983 |

alias

984 |

all-scroll

985 |

auto

986 |

cell

987 |

context-menu

988 |

col-resize

989 |

copy

990 |

crosshair

991 |

default

992 |

e-resize

993 |

ew-resize

994 |

grab

995 |

grabbing

996 |

help

997 |

move

998 |

n-resize

999 |

ne-resize

1000 |

nesw-resize

1001 |

ns-resize

1002 |

nw-resize

1003 |

nwse-resize

1004 |

no-drop

1005 |

none

1006 |

not-allowed

1007 |

pointer

1008 |

progress

1009 |

row-resize

1010 |

s-resize

1011 |

se-resize

1012 |

sw-resize

1013 |

text

1014 |

url

1015 |

w-resize

1016 |

wait

1017 |

zoom-in

1018 |

zoom-out

1019 |
1020 |
1021 |
1022 |
1024 | 1025 |
1031 | 1035 |

Demo

1036 | 1041 | 1042 |
1043 |
1045 | 1046 |
1049 |
1053 | 1065 |
1068 |
1069 | 1070 |
1073 |
1074 |
1075 | 1076 |
1078 | 1089 | 1099 | 1106 | 1116 | 1120 |
1121 |
1122 | 1123 |
1124 |
1125 |
1126 | 1132 |
1133 | 1134 | 1150 | 1151 | 1154 | 1155 | 1156 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@cocreate/cocreatecss", 3 | "version": "1.21.2", 4 | "description": "A lightweight utility-first Atomic CSS framework promoting rapid UI development. No learning curve... Apply your native css property:value directly in class, then extract and transform it.", 5 | "keywords": [ 6 | "cocreatecss", 7 | "cocreate", 8 | "low-code-framework", 9 | "no-code-framework", 10 | "cocreatejs", 11 | "cocreatejs-component", 12 | "cocreate-framework", 13 | "no-code", 14 | "low-code", 15 | "collaborative-framework", 16 | "realtime", 17 | "realtime-framework", 18 | "collaboration", 19 | "shared-editing", 20 | "html5-framework", 21 | "javascript-framework" 22 | ], 23 | "publishConfig": { 24 | "access": "public" 25 | }, 26 | "scripts": { 27 | "start": "npx webpack --config webpack.config.js", 28 | "build": "npx webpack --mode=production --config webpack.config.js", 29 | "dev": "npx webpack --config webpack.config.js --watch", 30 | "postinstall": "node -e \"const { execSync } = require('child_process'); try { execSync('coc --version', { stdio: 'ignore' }); } catch (error) { try { execSync('npm install -g @cocreate/cli', { stdio: 'inherit' }); console.log('Installed \"@cocreate/cli\" globally.'); } catch (error) { console.error('Failed to install \"@cocreate/cli\" globally:', error); } }\"" 31 | }, 32 | "repository": { 33 | "type": "git", 34 | "url": "git+https://github.com/CoCreate-app/CoCreateCSS.git" 35 | }, 36 | "author": "CoCreate LLC", 37 | "license": "MIT", 38 | "bugs": { 39 | "url": "https://github.com/CoCreate-app/CoCreateCSS/issues" 40 | }, 41 | "homepage": "https://cocreate.app/css/", 42 | "funding": { 43 | "type": "GitHub Sponsors ❤", 44 | "url": "https://github.com/sponsors/CoCreate-app" 45 | }, 46 | "main": "./src/index.js", 47 | "devDependencies": { 48 | "css-loader": "^5.1.3", 49 | "esbuild": "^0.25.2", 50 | "esbuild-loader": "^4.3.0", 51 | "mini-css-extract-plugin": "^1.5.0", 52 | "webpack": "^5.24.4", 53 | "webpack-cli": "^4.6.0", 54 | "webpack-log": "^3.0.1" 55 | } 56 | } 57 | -------------------------------------------------------------------------------- /prettier.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | tabWidth: 4, 3 | semi: true, 4 | trailingComma: "none", 5 | bracketSameLine: true, 6 | useTabs: true, 7 | overrides: [ 8 | { 9 | files: ["*.json", "*.yml", "*.yaml"], 10 | options: { 11 | tabWidth: 2, 12 | useTabs: false 13 | }, 14 | } 15 | ], 16 | }; -------------------------------------------------------------------------------- /release.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | dryRun: false, 3 | branches: ["master"], 4 | plugins: [ 5 | "@semantic-release/commit-analyzer", 6 | "@semantic-release/release-notes-generator", 7 | [ 8 | "@semantic-release/changelog", 9 | { 10 | changelogFile: "CHANGELOG.md", 11 | }, 12 | ], 13 | "@semantic-release/npm", 14 | "@semantic-release/github", 15 | [ 16 | "@semantic-release/git", 17 | { 18 | assets: ["CHANGELOG.md", "package.json"], 19 | }, 20 | ], 21 | ], 22 | }; -------------------------------------------------------------------------------- /src/css/avatar.css: -------------------------------------------------------------------------------- 1 | .avatar-wrapper{ 2 | height:40px; 3 | width:40px; 4 | position: relative; 5 | } 6 | .avatar { 7 | background-color: #1f99ff; 8 | overflow: hidden; 9 | width: 40px; 10 | height: 40px; 11 | flex-shrink: 0; 12 | display: flex; 13 | align-items: center; 14 | justify-content: center; 15 | font-size: 18px; 16 | font-weight: 700; 17 | color: #fff; 18 | position: relative; 19 | } 20 | 21 | .avatar.round { 22 | border-radius: 50%; 23 | } 24 | 25 | .avatar > .avatar-image { 26 | width: 100%; 27 | height: 100%; 28 | position:absolute; 29 | left: 0px; 30 | top: 0px; 31 | z-index: 2; 32 | } 33 | 34 | .avatar > .avatar-image > img { 35 | width: 100%; 36 | } 37 | 38 | .avatar > .avatar-name { 39 | z-index: 1; 40 | writing-mode: vertical-rl; 41 | text-orientation: upright; 42 | text-transform: uppercase; 43 | overflow: hidden; 44 | text-overflow: clip; 45 | white-space: nowrap; 46 | height: 20px; 47 | width: 20px; 48 | letter-spacing: 1em; 49 | } 50 | 51 | .avatar-status { 52 | position: absolute; 53 | left: 30px; 54 | bottom: 0px; 55 | display: flex; 56 | height: 12px; 57 | width: 12px; 58 | border: 2px solid #F7F7F7; 59 | border-radius: 50%; 60 | z-index: 3; 61 | background-color: #f44336; 62 | 63 | } 64 | 65 | .avatar-status.on { 66 | background-color: #4caf50; 67 | } 68 | 69 | .avatar-status.off { 70 | background-color: #f44336; 71 | } 72 | -------------------------------------------------------------------------------- /src/css/badge.css: -------------------------------------------------------------------------------- 1 | /* CoCreate Badges */ 2 | .cocreate-badge{ 3 | display:inline-block; 4 | background-color: #777; 5 | color: #fff; 6 | font-size: 10px; 7 | font-weight: 400; 8 | height:fit-content; 9 | min-width: fit-content; 10 | padding: 0.1em 0.4em; 11 | text-align: center; 12 | transition: opacity 0.3s linear 0s; 13 | -webkit-transition: opacity 0.3s linear 0s; 14 | -ms-transition: opacity 0.3s linear 0s; 15 | -moz-transition: opacity 0.3s linear 0s; 16 | -o-transition: opacity 0.3s linear 0s; 17 | vertical-align: middle; 18 | visibility: visible; 19 | white-space: nowrap; 20 | } 21 | -------------------------------------------------------------------------------- /src/css/box-shadow.css: -------------------------------------------------------------------------------- 1 | .box-shadow-100 { 2 | box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); 3 | transition: all 0.3s cubic-bezier(.25,.8,.25,1); 4 | } 5 | 6 | .box-shadow-200 { 7 | box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23); 8 | } 9 | 10 | .box-shadow-300 { 11 | box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23); 12 | } 13 | 14 | .box-shadow-400 { 15 | box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22); 16 | } 17 | 18 | .box-shadow-500 { 19 | box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22); 20 | } 21 | 22 | .box-shadow-top{ 23 | -webkit-box-shadow: 0px -4px 4px rgba(0,0,0,0.22); 24 | box-shadow: 0px -4px 4px rgba(0,0,0,0.22); 25 | } 26 | 27 | .box-shadow-bottom{ 28 | -webkit-box-shadow: 0 10px 6px -6px #777; 29 | /*-moz-box-shadow: 0 10px 6px -6px #777;*/ 30 | box-shadow: 0 10px 6px -6px #777; 31 | } 32 | 33 | .box-shadow-bottom-4 { 34 | /*-moz-box-shadow: 0 4px 4px rgba(0, 0, 0, 0.4);*/ 35 | -webkit-box-shadow: 0 4px 4px rgba(0, 0, 0, 0.4); 36 | box-shadow: 0 4px 4px rgba(0, 0, 0, 0.4); 37 | } 38 | -------------------------------------------------------------------------------- /src/css/card.css: -------------------------------------------------------------------------------- 1 | /* CoCreate card */ 2 | .card { 3 | box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); 4 | } 5 | 6 | .card\:hover { 7 | box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22); 8 | } 9 | -------------------------------------------------------------------------------- /src/css/checkbox.css: -------------------------------------------------------------------------------- 1 | /** 2 | check box 3 | **/ 4 | 5 | .checkbox { 6 | position:relative; 7 | padding-left: 35px; 8 | cursor: pointer; 9 | font-size: 20px; 10 | min-height: 20px; 11 | } 12 | 13 | .checkbox input[type="checkbox"] { 14 | position: absolute; 15 | opacity: 0; 16 | cursor: pointer; 17 | height: 0; 18 | width: 0; 19 | } 20 | 21 | .checkbox > span.mark { 22 | position: absolute; 23 | top: 0; 24 | left: 0; 25 | height: 20px; 26 | width: 20px; 27 | border: 2px solid #999; 28 | } 29 | 30 | .checkbox > input:checked ~ span.mark { 31 | background-color: #61dafb; 32 | border: 0; 33 | } 34 | 35 | .checkbox > span.mark:after { 36 | content: ""; 37 | position: absolute; 38 | display: none; 39 | left: 6px; 40 | top: 2px; 41 | width: 5px; 42 | height: 10px; 43 | border: solid white; 44 | border-width: 0 3px 3px 0; 45 | -webkit-transform: rotate(45deg); 46 | -ms-transform: rotate(45deg); 47 | transform: rotate(45deg); 48 | } 49 | 50 | .checkbox > input:checked ~ span.mark:after { 51 | display:block; 52 | } -------------------------------------------------------------------------------- /src/css/core.css: -------------------------------------------------------------------------------- 1 | /*=============================== 2 | CoCreateCSS 3 | =================================*/ 4 | * { 5 | padding: 0px; 6 | margin: 0px; 7 | scrollbar-width: thin; 8 | } 9 | 10 | *, 11 | *:before, 12 | *:after { 13 | -webkit-box-sizing: border-box; 14 | -moz-box-sizing: border-box; 15 | box-sizing: border-box; 16 | } 17 | 18 | html { 19 | scroll-behavior: smooth; 20 | } 21 | 22 | body { 23 | background-color: #fff; 24 | font-family: 'Open Sans', sans-serif; 25 | font-size: 1rem; 26 | color: #505050; 27 | font-weight: 100; 28 | -webkit-font-smoothing: antialiased; 29 | -webkit-text-size-adjust: 100%; 30 | } 31 | 32 | a { 33 | text-decoration: none; 34 | cursor: pointer; 35 | align-items: center; 36 | color: inherit; 37 | } 38 | 39 | svg { 40 | height: inherit; 41 | width: inherit; 42 | fill: inherit; 43 | stroke: inherit; 44 | } 45 | 46 | textarea { 47 | resize: vertical; 48 | } 49 | 50 | [hidden] { 51 | display: none!important; 52 | } 53 | 54 | .hidden { 55 | display: none!important; 56 | } 57 | 58 | .template, [template] { 59 | display: none!important; 60 | } 61 | 62 | 63 | /*=============================== 64 | toggle order icons transform filter.js 65 | =================================*/ 66 | 67 | .success { 68 | background-color: #70ca63; 69 | color: #fff; 70 | } 71 | 72 | .warning { 73 | background-color: #fecd33; 74 | color: #fff; 75 | } 76 | 77 | .danger, .failed { 78 | background-color: #f13b48; 79 | color: #fff; 80 | } 81 | 82 | [unique='true'], [validation='true'] { 83 | border-color: green!important; 84 | color: green!important; 85 | -webkit-text-fill-color: green!important; 86 | } 87 | 88 | [unique='false'], [validation='false'] { 89 | border-color: red!important; 90 | color: red!important; 91 | -webkit-text-fill-color: red!important; 92 | } 93 | 94 | /** 95 | * TODO: Requires away for CoCreateJS to add to min.css as it is minimum required csss for rendering 96 | */ 97 | cocreate-select:not(.open) > input~* { 98 | display: none; 99 | } 100 | 101 | floating-label, .floating-label_field { 102 | position: relative; 103 | margin-top:10px; 104 | display: block; 105 | box-sizing: border-box; 106 | border-width: 1px; 107 | border-style: solid; 108 | border-radius: 4px 4px 4px 4px; 109 | border-color: rgba(0, 0, 0, 0.24) 110 | 111 | } 112 | 113 | floating-label .floating-label, 114 | .floating-label_field .floating-label { 115 | padding: 8px 14px 8px 14px; 116 | border: none !important; 117 | outline: none !important; 118 | font-size: 16px; 119 | line-height: 1.5; 120 | } 121 | -------------------------------------------------------------------------------- /src/css/flip-item.css: -------------------------------------------------------------------------------- 1 | .flip-container > .flip-item { 2 | position: absolute; 3 | left: 0; 4 | top: 0; 5 | transition: 0.3s; 6 | backface-visibility: hidden; 7 | } 8 | 9 | .flip-container > .flip-item.flipped {transform: rotateY(180deg);} 10 | .flip-container.active > .flip-item {transform: rotateY(180deg);} 11 | .flip-container.active > .flip-item.flipped {transform: rotateY(0deg);} 12 | 13 | -------------------------------------------------------------------------------- /src/css/menu-icon.css: -------------------------------------------------------------------------------- 1 | /* Menu Toggles */ 2 | 3 | .menu_icon { 4 | display: block; 5 | min-width: 30px; 6 | cursor: pointer; 7 | margin: 0px 15px; 8 | 9 | } 10 | .menu_icon span { 11 | position: relative; 12 | display: block; 13 | height: 2px; 14 | width: 100%; 15 | margin-top: 6px; 16 | margin-bottom: 6px; 17 | transition: all .25s; 18 | background-color: #555; 19 | } 20 | .menu_icon.active span:first-child { 21 | transform: rotate(45deg) translate(-1px, 6px); 22 | } 23 | .menu_icon.active span:nth-child(2) { 24 | display:none; 25 | } 26 | .menu_icon.active span:last-child { 27 | transform: rotate(-45deg) translate(-1px, -6px); 28 | } 29 | 30 | /* Left arrow */ 31 | .menu_icon.arrow-left span:first-child { 32 | width:15px; 33 | } 34 | .menu_icon.active.arrow-left span:first-child { 35 | transform: rotate(-45deg) translate(-5px, 1px); 36 | width:12px; 37 | 38 | } 39 | .menu_icon.arrow-left.active span:nth-child(2) { 40 | display:block; 41 | } 42 | 43 | .menu_icon.active.arrow-left span:last-child { 44 | transform: rotate(45deg) translate(-5px, -1px); 45 | width:12px; 46 | } 47 | /* Left-right arrow */ 48 | /*.menu_icon .arrow-left span:first-child {*/ 49 | /* transform: rotate(45deg) translate(12px, -6px);*/ 50 | /* width:12px;*/ 51 | /* margin-right:auto;*/ 52 | 53 | /*}*/ 54 | /*.menu_icon .arrow-left span:last-child {*/ 55 | /* transform: rotate(-45deg) translate(12px, 6px);*/ 56 | /* width:12px;*/ 57 | /* margin-right: auto;*/ 58 | /*}*/ 59 | 60 | 61 | /* right arrow */ 62 | .menu_icon.arrow-right span:first-child { 63 | width:15px; 64 | margin-left:auto; 65 | } 66 | .menu_icon.arrow-right.active span:first-child { 67 | transform: rotate(45deg) translate(14px, -8px); 68 | width:12px; 69 | margin-left: unset; 70 | margin-right:auto; 71 | left:5px; 72 | } 73 | .menu_icon.arrow-right.active span:nth-child(2) { 74 | display:block; 75 | } 76 | .menu_icon.arrow-right.active span:last-child { 77 | transform: rotate(-45deg) translate(14px, 8px); 78 | width:12px; 79 | margin-right: auto; 80 | left:5px; 81 | } 82 | 83 | /* dots to X */ 84 | .circle { 85 | width: 4px; 86 | height: 4px; 87 | margin: 4px; 88 | background: black; 89 | border-radius: 50%; 90 | display: block; 91 | } 92 | .menu_icon--Vdots { 93 | display: inline-block; 94 | flex-direction: column; 95 | position: relative; 96 | transition: all 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275); 97 | padding: 10px 8px; 98 | margin: 0px 10px; 99 | } 100 | .menu_icon--Vdots .circle:nth-child(4), 101 | .menu_icon--Vdots .circle:nth-child(5) { 102 | position: absolute; 103 | opacity: 0; 104 | bottom: 18px; 105 | } 106 | .menu_icon--Vdots .circle:nth-child(4) { 107 | left: 0px; 108 | } 109 | .menu_icon--Vdots .circle:nth-child(5) { 110 | left: 16px; 111 | } 112 | .menu_icon--Vdots.active { 113 | transform: rotate(45deg); 114 | } 115 | .menu_icon--Vdots.active .circle, .menu_icon--Vdots:focus .circle { 116 | opacity: 1; 117 | } 118 | /* Menu Toggles End */ 119 | -------------------------------------------------------------------------------- /src/css/overlay-content.css: -------------------------------------------------------------------------------- 1 | /* overlays content with new content */ 2 | .overlay-content { 3 | padding: 24px; 4 | position: absolute; 5 | background-color: #fff; 6 | width: 100%; 7 | overflow-y: auto; 8 | left: 0; 9 | /*top:0px;*/ 10 | top: 100%; 11 | height: 100%; 12 | z-index: 6; 13 | display: none; 14 | transition: all .3s ease-out; 15 | transition-property: all; 16 | transition-duration: .5s; 17 | transition-timing-function: cubic-bezier(0, 1, 0.5, 1); 18 | } 19 | 20 | .overlay-hover:hover > .overlay-content{ 21 | top: 0; 22 | display:block; 23 | } -------------------------------------------------------------------------------- /src/css/progressbar.css: -------------------------------------------------------------------------------- 1 | /** 2 | Progress bar 3 | **/ 4 | .progressbar { 5 | flex-grow: 1; 6 | height: 4px; 7 | border: none; 8 | position: relative; 9 | background-color: rgb(194, 240, 253); 10 | overflow: hidden; 11 | } 12 | 13 | .progressbar > div { 14 | position: absolute; 15 | top: 0; 16 | left: 0; 17 | width: 100%; 18 | bottom: 0; 19 | transform-origin: left; 20 | transition: transform .4s linear; 21 | background-color: #61dafb; 22 | } 23 | 24 | progress.progressbar { 25 | -webkit-appearance: none; 26 | appearance: none; 27 | } 28 | 29 | progress.progressbar::-webkit-progress-bar{ 30 | background-color: rgb(194, 240, 253) !important; 31 | } 32 | 33 | progress.progressbar::-webkit-progress-value{ 34 | background-color: #61dafb !important; 35 | } 36 | 37 | progress.progressbar::-moz-progress-bar { 38 | background-color: #61dafb !important; 39 | } 40 | 41 | -------------------------------------------------------------------------------- /src/css/scroll.css: -------------------------------------------------------------------------------- 1 | /* WebKit browsers (Chrome, Edge, Safari, Opera) */ 2 | ::-webkit-scrollbar { 3 | width: 5px; 4 | height: 5px; 5 | } 6 | 7 | ::-webkit-scrollbar-thumb { 8 | background: rgba(0, 0, 0, 0.09); 9 | } 10 | 11 | ::-webkit-scrollbar-thumb:hover { 12 | background: #3790ff; 13 | opacity: 0.08; 14 | } 15 | 16 | ::-webkit-scrollbar-track { 17 | background: rgba(0, 0, 0, 0.03); 18 | width: 5px; 19 | height: 5px; 20 | } 21 | 22 | ::-webkit-scrollbar-track:hover { 23 | background: rgba(0, 0, 0, 0.06); 24 | } 25 | 26 | /* Firefox browsers */ 27 | * { 28 | scrollbar-width: thin; 29 | /* Options: auto, thin, none */ 30 | scrollbar-color: rgba(0, 0, 0, 0.09) rgba(0, 0, 0, 0.03); 31 | } -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import './css/avatar.css'; 2 | import './css/badge.css'; 3 | import './css/box-shadow.css'; 4 | import './css/card.css'; 5 | import './css/checkbox.css'; 6 | import './css/core.css'; 7 | import './css/flip-item.css'; 8 | import './css/menu-icon.css'; 9 | import './css/overlay-content.css'; 10 | import './css/progressbar.css'; 11 | import './css/scroll.css'; 12 | -------------------------------------------------------------------------------- /testCompileTimeCss.js: -------------------------------------------------------------------------------- 1 | let { parse } = require('node-html-parser'); 2 | const fs = require('fs') 3 | const path = require('path') 4 | 5 | 6 | var utilityClassList = []; 7 | let myStyle = []; 8 | 9 | 10 | function goThrough(el) { 11 | if (el.classNames) 12 | addParsingClassList(el.classNames); 13 | 14 | if (el.childNodes) 15 | for (let child of el.childNodes) 16 | goThrough(child) 17 | } 18 | 19 | 20 | 21 | const range_names = ["xs", "sm", "md", "lg", "xl"]; 22 | const ranges = [ 23 | [0, 567], 24 | [576, 768], 25 | [769, 992], 26 | [993, 1200], 27 | [1201, 0], 28 | ]; 29 | 30 | function addParsingClassList(classList) { 31 | let re = /.+:.+/; 32 | for (let classname of classList) { 33 | try { 34 | if (re.exec(classname)) { 35 | if (utilityClassList.indexOf(classname) == -1) { 36 | let re_at = /.+@.+/; 37 | if (re_at.exec(classname)) { 38 | let parts = classname.split("@"); 39 | let main_rule = parseClass(classname); 40 | 41 | for (let i = 1; i < parts.length; i++) { 42 | let range_num = range_names.indexOf(parts[i]); 43 | if (range_num == -1) continue; 44 | let range = ranges[range_num]; 45 | let prefix = "@media screen"; 46 | if (range[0] != 0) { 47 | prefix += " and (min-width:" + range[0] + "px)"; 48 | } 49 | if (range[1] != 0) { 50 | prefix += " and (max-width:" + range[1] + "px)"; 51 | } 52 | let rule = prefix + "{" + main_rule + "}"; 53 | myStyle.push(rule); 54 | utilityClassList.push(classname); 55 | } 56 | } else { 57 | let rule = parseClass(classname); 58 | myStyle.push(rule); 59 | utilityClassList.push(classname); 60 | } 61 | } 62 | } 63 | } catch (e) {} 64 | } 65 | } 66 | 67 | function parseClass(classname) { 68 | let res = classname.split(":"); 69 | let rule = ""; 70 | let suffix = res[1] 71 | .replace(/\./g, "\\.") 72 | .replace(/%/, "\\%") 73 | .replace(/@/g, "\\@") 74 | .replace(/\(/g, "\\(") 75 | .replace(/\)/g, "\\)") 76 | .replace(/#/g, "\\#") 77 | .replace(/,/g, "\\,") 78 | .replace(/!/, "\\!"); 79 | res[1] = res[1].split("@")[0]; 80 | res[1] = res[1].replace(/_/g, " "); 81 | if (res.length > 2) { 82 | let pseudo = []; 83 | for (let i = 0; i < res.length - 2; i++) { 84 | suffix += "\\:" + res[2 + i]; 85 | pseudo.push(":" + res[2 + i]); 86 | } 87 | let clsname = "." + res[0] + "\\:" + suffix; 88 | rule += clsname + pseudo[0]; 89 | for (let i = 1; i < pseudo.length; i++) { 90 | rule += ", " + clsname + pseudo[i]; 91 | } 92 | rule += `{${res[0]}:${res[1]}}`; 93 | } else { 94 | rule = `.${res[0]}\\:${suffix}{${res[0]}:${res[1]}}`; 95 | } 96 | return rule; 97 | } 98 | 99 | 100 | // let fileList = ['./src/index.html','./src/signup.html','./src/signin.html']; 101 | let fileList = ['./src/index.html']; 102 | fileList.forEach(file=>{ 103 | let str = fs.readFileSync(file) 104 | 105 | const root = parse(str); 106 | goThrough(root) 107 | myStyle.sort(); 108 | let style = parse(` 109 | 112 | `) 113 | root.querySelector('head').appendChild(style) 114 | let result = root.toString() 115 | fs.writeFileSync(path.resolve('dist', path.basename(file)), result); 116 | }) 117 | -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | const path = require("path"); 2 | const MiniCssExtractPlugin = require("mini-css-extract-plugin"); 3 | const { EsbuildPlugin } = require("esbuild-loader"); 4 | const { FileUploader } = require("@cocreate/webpack"); 5 | 6 | module.exports = async (env, argv) => { 7 | const isProduction = argv && argv.mode === "production"; 8 | const config = { 9 | entry: { 10 | CoCreateCSS: "./src/index.js" 11 | }, 12 | output: { 13 | path: path.resolve(__dirname, "dist"), 14 | filename: isProduction ? "[name].min.js" : "[name].js", 15 | libraryExport: "default", 16 | library: ["CoCreate", "coCreateCSS"], 17 | clean: true 18 | }, 19 | plugins: [ 20 | new MiniCssExtractPlugin({ 21 | filename: isProduction ? "[name].min.css" : "[name].css" 22 | }), 23 | new FileUploader(env, argv) 24 | ], 25 | mode: isProduction ? "production" : "development", 26 | devtool: isProduction ? "source-map" : "eval-source-map", 27 | module: { 28 | rules: [ 29 | { 30 | test: /.js$/, 31 | exclude: /node_modules/, 32 | use: { 33 | loader: "esbuild-loader", 34 | options: { 35 | loader: "js", 36 | target: "es2017" 37 | } 38 | } 39 | }, 40 | { 41 | test: /.css$/i, 42 | use: [MiniCssExtractPlugin.loader, "css-loader"] 43 | } 44 | ] 45 | }, 46 | optimization: { 47 | minimize: isProduction, 48 | minimizer: [ 49 | new EsbuildPlugin({ 50 | target: "es2017", 51 | css: true 52 | }) 53 | ], 54 | splitChunks: { 55 | cacheGroups: { 56 | defaultVendors: false 57 | } 58 | } 59 | }, 60 | performance: { 61 | hints: isProduction ? "warning" : false 62 | } 63 | }; 64 | return config; 65 | }; 66 | --------------------------------------------------------------------------------