/coraline

Alternative CSS only framework based on Flexbox

Primary LanguageCSSMIT LicenseMIT

Coraline   Tweet

An alternative CSS only framework. Coraline comes with multiple components and class helpers.

release npm npm license maintained

⭐ Give me a star if you like this project :D

Quick start

You can use the CDN for a quick start:

<!-- import the styles from cdn -->
<link rel="stylesheet" href="https://cdn.statically.io/gh/isradeleon/coraline/0.6.2/coraline-v0.6.2/coraline.min.css">

Easy to install

You can install the framework from npm or download the current version here. Then just import the minified CSS file into your project.

NPM

npm install coralinecss

Here is a code snippet:

<!-- import the styles -->
<link rel="stylesheet" href="coraline-v0.6.2/coraline.min.css">

Components

Coraline includes the following list of components:

Elements

Coraline includes the following list of elements:

Grid system

A grid system designed for being simple, legible and easy to learn. Here is a little code sample:

<div class="grid">
    <div class="col-6">
        ...
    </div>
    <div class="col-6">
        ...
    </div>
</div>

For defining the columns size on mobile and tablet just add:

<div class="grid">
    <div class="col-6 tablet-12 mobile-6">
        ...
    </div>
    <div class="col-6 tablet-12 mobile-6">
        ...
    </div>
</div>

And same on large screen devices:

<div class="grid">
    <div class="col-12 large-6">
        ...
    </div>
    <div class="col-12 large-6">
        ...
    </div>
</div>

Lightweight

The whole framework is just 15K size minified.

Built with

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. The docs are generated using Nunjucks and saved to ../coraline-docs/.

License

This library is licensed under MIT license. View license.