https://github.com/hex-digital/captaincss
A toolbox packed with battle hardened layout objects and utilities. Rapidly build layouts that scale with elegance.
https://github.com/hex-digital/captaincss
bem itcss tailwindcss
Last synced: 6 months ago
JSON representation
A toolbox packed with battle hardened layout objects and utilities. Rapidly build layouts that scale with elegance.
- Host: GitHub
- URL: https://github.com/hex-digital/captaincss
- Owner: hex-digital
- License: mit
- Created: 2020-11-01T23:02:52.000Z (almost 5 years ago)
- Default Branch: main
- Last Pushed: 2024-10-02T10:04:18.000Z (about 1 year ago)
- Last Synced: 2025-03-25T07:01:43.323Z (7 months ago)
- Topics: bem, itcss, tailwindcss
- Language: JavaScript
- Homepage:
- Size: 848 KB
- Stars: 15
- Watchers: 2
- Forks: 1
- Open Issues: 11
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: .github/CONTRIBUTING.md
- License: LICENSE
- Code of conduct: .github/CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
Welcome to CaptainCSS 👋
**An extensible, scalable set of CSS objects and utilities that harness Tailwind and ITCSS to provide structure to teams and large or long-lasting projects**
Captain does not provide you with UI or design out of the box, but instead provides solid architectural layout objects and utilities, upon which anything can be built.
Talk the same language as other developers, and share a set of common objects across all of your website and app builds. All fully configurable using the native Tailwind config.
### 🏠 [Homepage](https://github.com/hex-digital/captaincss)
## Install
```sh
yarn add -D @captaincss/captaincss # or npm install -D @captaincss/captaincss
```
## Usage
1. Install and setup Tailwind in your project: https://tailwindcss.com/docs/installation
2. Add CaptainCSS as a plugin in your tailwind.config.js:
```js
// tailwind.config.js
module.exports = {
theme: {},
plugins: [
require('@captaincss/captaincss'),
],
}
```
3. Configure Captain's theme settings and variants in your tailwind config, exactly like Tailwind. Check `defaultConfig.js` for Captain's default configuration.
```js
// tailwind.config.js
module.exports = {
theme: {
extend: {
frame: {
ratio: {
'4:3': '4:3',
}
}
}
},
plugins: [
require('@captaincss/captaincss'),
],
}
```
## Author
👤 **Jamie Warburton**
* Twitter: [@jamiewarb](https://twitter.com/jamiewarb)
## 🤝 Contributing
Contributions, issues and feature requests are welcome!
Feel free to check [issues page](https://github.com/hex-digital/captaincss/issues).
Please read our [Contributing Guidelines](https://github.com/hex-digital/captaincss/blob/main/.github/CONTRIBUTING.md) first!
## Show your support
Please give a ⭐️ if this project helped you!