Skip to content

Commit

Permalink
Merge pull request #1 from isradeleon/css-only
Browse files Browse the repository at this point in the history 
Coraline is now CSS only
  • Loading branch information
@isradeleon
isradeleon authored Nov 27, 2019
2 parents a30f8a8 + d43b1e3 commit 0e5899d
Show file tree
Hide file tree
Showing 9 changed files with 47 additions and 569 deletions.
27 changes: 9 additions & 18 deletions README.md
View file
Original file line number Diff line number Diff line change
@@ -1,30 +1,27 @@
# [Coraline](https://coralinecss.com)   [![Tweet](https://img.shields.io/twitter/url/http/shields.io.svg?style=social)](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)

CSS and JS frontend component library. Coraline comes with some powerful components and multiple class helpers.
An alternative CSS only framework. Coraline comes with multiple components and class helpers.

[![release](https://img.shields.io/github/release/isradeleon/coraline.svg?color=1dd1a1)](https://github.com/isradeleon/coraline/releases)
[![npm](https://img.shields.io/npm/v/coralinecss.svg?color=ff7675)](https://www.npmjs.com/package/coralinecss)
[![npm](https://img.shields.io/npm/dt/coralinecss.svg?color=6c5ce7)](https://www.npmjs.com/package/coralinecss)
[![license](https://img.shields.io/github/license/isradeleon/coraline.svg?color=0984e3)](LICENSE)
[![maintained](https://img.shields.io/maintenance/yes/2019.svg?color=1dd1a1)](https://www.npmjs.com/package/coralinecss)

:star: Give us a star on Github!
:star: Give me a star if you like this project :D

## Quick start

You may use the CDN for a quick start:
You can use the CDN for a quick start:

```html
<!-- Styles -->
<link rel="stylesheet" href="https://cdn.statically.io/gh/isradeleon/coraline/0.5.3/coraline-v0.5.3/coraline.min.css">

<!-- Staggered grid and sidebar -->
<script src="https://cdn.statically.io/gh/isradeleon/coraline/0.5.3/coraline-v0.5.3/coraline.min.js"></script>
<!-- import the styles from cdn -->
<link rel="stylesheet" href="https://cdn.statically.io/gh/isradeleon/coraline/0.6.0/coraline-v0.6.0/coraline.min.css">
```

## Easy to install

You may just install the framework from npm or [download the current version here](https://github.com/isradeleon/coraline/releases/download/0.5.3/coralinecss.zip). Then just import the minified CSS and JS files into your project.
You can install the framework from npm or [download the current version here](https://github.com/isradeleon/coraline/releases/download/0.6.0/coralinecss.zip). Then just import the minified CSS file into your project.

### NPM

Expand All @@ -35,19 +32,14 @@ npm install coralinecss
**Here is a code snippet:**

```html
<!-- Import the styles -->
<link rel="stylesheet" href="coraline-v0.5.3/coraline.min.css">

<!-- Staggered grid and sidebar functionality -->
<script src="coraline-v0.5.3/coraline.min.js"></script>
<!-- import the styles -->
<link rel="stylesheet" href="coraline-v0.6.0/coraline.min.css">
```

## Components

Coraline includes the following list of components:

* [Staggered grid view](https://coralinecss.com/staggered.html)
* [Sidebar](https://coralinecss.com/sidebar.html)
* [Navbar](https://coralinecss.com/navbar.html)
* [Card](https://coralinecss.com/card.html)
* [Comment](https://coralinecss.com/comment.html)
Expand Down Expand Up @@ -103,14 +95,13 @@ And same on large screen devices:

## Lightweight

The whole framework is just **19.3K** size minified.
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
* [Terser](https://github.com/terser-js/terser) JS compressor
* [Sass](https://sass-lang.com/) Syntactically Awesome Style Sheets

## Browser Support
Expand Down
151 changes: 14 additions & 137 deletions base.css
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
/*
Coraline v0.5.3
Coraline v0.6.0
*/
@import url("https://fonts.googleapis.com/css?family=Montserrat");
/* @import url('https://fonts.googleapis.com/css?family=Montserrat'); */
body {
font-family: "Montserrat", Helvetica, sans-serif;
font-family: Helvetica, sans-serif;
margin: 0; }

* {
Expand All @@ -13,7 +13,7 @@ body {
box-sizing: border-box;
line-height: 1.3;
scrollbar-width: thin;
scrollbar-color: lightgray #fafafa; }
scrollbar-color: lightgray #ececec; }

h1, h2, h3, h4, h5, h6 {
margin-top: 1rem;
Expand Down Expand Up @@ -93,7 +93,7 @@ img {
height: 5px; }

::-webkit-scrollbar-track {
background: #fafafa; }
background: #ececec; }

::-webkit-scrollbar-thumb {
border-radius: 10px;
Expand Down Expand Up @@ -155,6 +155,9 @@ input.menu-toggle {
top: -8px;
width: 100%; }

.burger-btn.to-end {
margin-left: auto; }

/* checked arrow left */
.burger-btn.arrow-left.active > .burger-icon:before {
transform: translateY(-16px) translateX(-7px) rotate(-40deg) scaleX(0.6); }
Expand Down Expand Up @@ -225,7 +228,7 @@ input.menu-toggle {
border: 0px;
outline: 0;
text-decoration: none;
padding: 0.7rem 0.9rem;
padding: 0.6rem 0.9rem;
display: inline-block;
position: relative;
transition: all .1s ease-in-out;
Expand Down Expand Up @@ -476,15 +479,11 @@ input.menu-toggle {
color: #2d3436;
cursor: not-allowed; }

.btn.large {
padding: 0.8rem 1rem;
font-size: 1.15rem; }

.btn.large * {
.btn.large, .btn.large * {
font-size: 1.15rem; }

.btn.small {
padding: 0.5rem 0.7rem;
padding: 0.4rem 0.7rem;
font-size: 0.9rem; }

.btn.small * {
Expand All @@ -498,7 +497,7 @@ textarea {
padding: 0.7rem 0.8rem;
box-shadow: inset 0px 0px 6px rgba(35, 35, 35, 0.02);
margin: 0.3rem;
font-family: "Montserrat", Helvetica, sans-serif; }
font-family: Helvetica, sans-serif; }

input[type='text']:focus, input[type='password']:focus,
input[type='email']:focus, input[type='tel']:focus,
Expand Down Expand Up @@ -690,55 +689,6 @@ textarea {
padding: 0 0.5rem;
flex: 1; }

/* STAGGERED GRID VIEW */
.staggered {
width: 100%;
margin: 0 auto;
display: flex;
flex-direction: row;
flex-wrap: wrap;
flex-flow: row wrap; }

.staggered > .staggered-item > * {
display: block;
width: 100%; }

.staggered > .staggered-item {
width: 25%;
padding: 0.5%; }

.staggered.three > .staggered-item {
width: calc(100%/3);
padding: 0.5%; }

.staggered.two > .staggered-item {
width: 50%;
padding: 0.5%; }

/* tablets */
@media (max-width: 991px) {
.staggered.tablet-three > .staggered-item {
width: calc(100%/3);
padding: 0.5%; }
.staggered.tablet-two > .staggered-item {
width: 50%;
padding: 0.5%; } }

/* moibile */
@media (max-width: 767px) {
.staggered > .staggered-item, .staggered.three > .staggered-item,
.staggered.tablet-two > .staggered-item,
.staggered.tablet-three > .staggered-item,
.staggered.two > .staggered-item {
width: 100%;
padding: 0%; }
.staggered.mobile-three > .staggered-item {
width: calc(100%/3);
padding: 0.5%; }
.staggered.mobile-two > .staggered-item {
width: 50%;
padding: 0.5%; } }

/* COLUMNS */
.grid {
width: 100%;
Expand Down Expand Up @@ -881,79 +831,6 @@ textarea {
.grid > .mobile-12 {
width: 100%; } }

/* SIDEBAR 2 */
.sidebar {
z-index: 1;
width: 22%;
background-color: white;
bottom: 0;
top: 0;
position: fixed;
border-right: 1px solid #eaeaea;
left: 0;
transition: all .3s ease;
overflow-y: auto; }

.sidebar > * {
display: block; }

.sidebar-content {
width: 78%;
position: absolute;
overflow-y: auto;
top: 0;
bottom: 0;
right: 0;
/* padding-left: 22%;
position: relative; */
transition: all .3s ease; }

.navbar.with-sidebar .burger-btn {
display: none; }

.sidebar-content .below-navbar {
padding-top: 0; }

.navbar.with-sidebar {
border-bottom: none; }

.sidebar .children > * {
display: block; }

.sidebar .children {
padding-left: 1rem;
transition: all ease-in-out .3s;
max-height: 0;
opacity: 0;
overflow: hidden; }

.sidebar .children.active {
max-height: 100%;
opacity: 1; }

@media (max-width: 991px) {
.navbar.with-sidebar .burger-btn {
display: block; }
.sidebar-content .below-navbar {
padding-top: 65px; }
.sidebar {
width: 100%;
left: -100%;
top: 64px;
border-right: none; }
.sidebar-content {
width: 100%;
/* padding-left: 0; */ }
.sidebar-content > header {
position: fixed;
top: 0; }
.navbar.with-sidebar {
position: fixed;
top: 0;
border-bottom: 1px solid #eaeaea; }
.sidebar.active {
left: 0; } }

/* SECTIONS */
.site-section {
position: relative;
Expand All @@ -962,15 +839,15 @@ textarea {
flex-direction: column;
justify-content: center;
min-height: 100vh;
background-color: #fafafa; }
background-color: #ececec; }

.site-section.white {
background-color: white; }

/* FOOTER */
footer {
position: relative;
background-color: #fafafa;
background-color: #ececec;
min-height: 10vh; }

/* HELPERS*/
Expand Down
Loading

0 comments on commit 0e5899d

Please sign in to comment.