Coraline

Alternative CSS only framework based on Flexbox

Download now (v0.6.1)

$ npm install coralinecss

Jane Doe

5 min ago

Hey! This is a card component example

Lightweight
Only 15K size minified

Responsive
Adaptable to all screens

Easy to learn
Simple & clear syntax

Customizable
Using Sass

Lightweight (15K)

The whole framework is just 15K size minified.
It comes with multiple CSS class helpers, a grid system and helpful components.

Responsive and mobile first

Clear and legible grid system, adaptable to all screens.

col-12

col-1

col-2

col-6

col-2

col-1

col

Need a different column size on mobile and tablet? Then just add:

col-4, tablet-12, mobile-6

col-4, tablet-12, mobile-12

And same for large screen devices:

col-12, large-6

Easy to learn

Simple and clear syntax that makes the framework really easy to learn. Here are some CSS class examples:

text-brand

text-primary

text-secondary

text-info

text-success

text-warning

text-danger

text-gray

text-size-1

text-size-2

text-size-3

text-size-4

text-size-5

text-size-6

text-size-s

Customizable

You may want to change the framework colors so they'll fit better with the style of your application and your brand. This is possible using Sass.

Just define the color variables before you import the base.scss file. These new colors will also affect the helper classes.

More Sass variables will be added in the future.

// Set your brand color
$brand: #ff7675;

// Set the contrast color,
// the default value is white
$contrast-brand: black;

// Define the rest of the colors
$primary: #6c5ce7;
$secondary: #0984e3;
$info: #74b9ff;
$success: #1dd1a1;
$danger: #ee5253;
$warning: #f7b731;
$black: #2d3436;

// Set the font family
$font-family: Helvetica;
$font-weight: 400;

// Import Coraline scss file
@import "base.scss";