Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/isradeleon/coraline
Alternative CSS only framework based on Flexbox
https://github.com/isradeleon/coraline
css css-framework css-only flexbox grid-system
Last synced: 2 months ago
JSON representation
Alternative CSS only framework based on Flexbox
- Host: GitHub
- URL: https://github.com/isradeleon/coraline
- Owner: isradeleon
- License: mit
- Created: 2019-07-14T02:18:14.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2022-12-09T21:35:48.000Z (about 2 years ago)
- Last Synced: 2024-10-05T10:37:34.022Z (3 months ago)
- Topics: css, css-framework, css-only, flexbox, grid-system
- Language: CSS
- Homepage: https://coralinecss.com
- Size: 18 MB
- Stars: 11
- Watchers: 1
- Forks: 0
- Open Issues: 10
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- Awesome-CSS-Resources - coraline:
README
# [Coraline](https://coralinecss.com) [](https://twitter.com/intent/tweet?url=https%3A%2F%2Fcoralinecss.com&via=isradeleon&text=An%20alternative%20CSS%20framework%20for%20responsive%20WEB%20design&hashtags=responsive%2Cdesign%2Cframework%2Ccss)
An alternative CSS only framework. Coraline comes with multiple components and class helpers.
[](https://github.com/isradeleon/coraline/releases)
[](https://www.npmjs.com/package/coralinecss)
[](https://www.npmjs.com/package/coralinecss)
[](LICENSE)
[](https://www.npmjs.com/package/coralinecss)
:star: Give me a star if you like this project :D
## Quick start
You can use the CDN for a quick start:
```html
```
## Easy to install
You can install the framework from npm or [download the current version here](https://github.com/isradeleon/coraline/releases/download/0.6.2/coralinecss.zip). Then just import the minified CSS file into your project.
### NPM
```sh
npm install coralinecss
```
**Here is a code snippet:**
```html
```
## Components
Coraline includes the following list of components:
* [Navbar](https://coralinecss.com/navbar.html)
* [Card](https://coralinecss.com/card.html)
* [Comment](https://coralinecss.com/comment.html)
## Elements
Coraline includes the following list of elements:
* [Button](https://coralinecss.com/button.html)
* [Tags](https://coralinecss.com/tags.html)
* [Circular img](https://coralinecss.com/circular-img.html)
## Grid system
A [grid system](https://coralinecss.com/grid-system.html) designed for being simple, legible and easy to learn. Here is a little code sample:
```html
...
...
```
For defining the columns size on mobile and tablet just add:
```html
...
...
```
And same on large screen devices:
```html
...
...
```
## Lightweight
The whole framework is just **15K** size minified.
## Built with
* [Flexbox](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes) Flexible Box Module
* [Autoprefixer](https://github.com/postcss/autoprefixer) for better browser support
* [CSSO](https://github.com/css/csso) CSS compressor
* [Sass](https://sass-lang.com/) Syntactically Awesome Style Sheets
## Browser Support
Coraline is compatible with recent versions of:
* Firefox
* Chrome
* Safari
* Edge
* Opera
* Partial support for Internet Explorer
## Documentation
Currently working to improve the [documentation](https://coralinecss.com). The docs are generated using [Nunjucks](https://github.com/mozilla/nunjucks) and saved to **../coraline-docs/**.
## License
This library is licensed under `MIT license`. View [license](LICENSE).