Coraline

Alternative CSS only framework based on Flexbox


$ npm install coralinecss


Jane Doe

5 min ago
Random picsum.photos image

Hey! This is a card component example




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
col
col

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

col-4, tablet-12, mobile-6

col-4, tablet-12, mobile-6

col-4, tablet-12, mobile-12


And same for large screen devices:

col-12, large-6

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

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";