Heart.css

Heart.css is a micro-framework intended to describe the Layout of a Single Page Application.

It is built for the design of an Application instead of a Document and it does not provide graphic or typographic style like Bootstrap or Fundation. This framework was built with the Mobile-first approach and it's completely Fluid. So you can easily use it to build your Responsive Web Design Application. It uses position: absolute a lot to cancel many browser's behaviors that presume they run a Document.

Heart.css has been tested on Chrome Mac and Android, Firefox Mac and Android, Safari Mac and iOS, Android 4.X default browser, BlackBerry 10 browser, Opera Mac and Android, Internet Explorer 10 Windows 8, RT and Phone.

Show on Github

Example

iOS like app

Try the Demo

Android like app

Try the Demo

Layer

It's the base of the entire framework. Many of the other components extend it.

<div class="layer"></div>

All the codes show the DOM with the classes of Heart.css, but it can also be used with the Sass @extend directive.

<div id="content"></div>
#content{
    @extend .layer;
}
Try the Demo

Topbar and Bottombar

Topbar and Bottombar have defaults of 44px. It can be changed by redefining Sass variables : $height-topbar and $height-bottombar.

<div class="topbar"></div>
<div class="layer with-topbar with-bottombar"></div>
<div class="bottombar"></div>
Try the Demo

Layer-Scrollable

The Layer-Scrollable is useful if you want to create an intern scroll and disable the browser's behavior on the body's scroll.

The CSS overflow: scroll causes many problems on a mobile browser. But iScroll isn't a good solution. A CSS scroll will always be faster than a JavaScript one.

If you try this on iOS, the scroll has the native bounce and momentum effect but the body doesn't. You don't see the grey background texture of Safari anymore.

<div class="layer">
    <div class="layer-scrollable">
        <div class="wrap">
            …
        </div>
    </div>
</div>

A Layer-Scrollable always has to be used in another Layer element.

Try the Demo

It's the same structure as above but with less content. On iOS the content always bounces to disable the body's bounce.

Try the Demo

Example App 1

The first example combines the Layer-Scrollable, Topbar and Bottombar.

<div class="layer">
    <div class="topbar"></div>
    <div class="layer-scrollable with-topbar with-bottombar">
        <div class="wrap">
            …
        </div>
    </div>
    <div class="bottombar"></div>
</div>

The advantage to uses the Layer-Scrollable instead of the body's scroll with padding and the bar in fixed postion, in addition to the fact that position: fixed is really buggy on mobile, is that the scrollbar never overlays the bar. You only describe the interface you want instead of cheating with a main scroll.

Try the Demo

Layer-Toggle

A Layer-Toggle is a Layer that can manage two states with a transition.

<div class="layer">
    …
</div>    
<div class="layer-toggle">
    …
</div>

Add the class .open on the .Layer-Toggle to open it and remove the class to close it.

<div class="layer-toggle open">
    …
</div>

It's perfect for a modal view and it's easily extandable.

Try the Demo

This example uses a custom Layer-Toggle, it just defines an open and close state like this :

.layer-toggle-fade{
    @extend %layer-toggle;
    opacity:0;
    &.open{
        opacity:1;
    }
}

And in this example, Layer-Toggle is also Layer-Scrollable

<div class="layer">
    <div class="layer-scrollable">
        <div class="wrap">
            …
        </div>
    </div>
    <div class="layer-toggle-fade layer-scrollable">
        <div class="wrap">
            …
        </div>
    </div>
</div>
Try the Demo

Layout-Split

Layout-Split is a 2-column layout. On large and mid-size screen devices the two layers appears and on a small screen device only the content-layer appear, the Layout-Split has a state to see the aside-layer. It's a simple off-canvas layout.

<div class="layout-split">
    <div class="aside-layer">
        …
    </div>
    <div class="content-layer">
        …
    </div>
</div>

Just add the .open class to the .layout-split to open it.

<div class="layout-split open">
    …
</div>

The dimension of the Layout-Split can be customized with Sass variables : $split-min-width, $split-width-breakpoint and $split-width-content-extend

Try the Demo

Like the Layer-Toggle, you can easily define your own Layout-Split with your own transition.

.layout-split-carousel{
    @extend %layout-split;
    @media screen and (max-width: $split-width-breakpoint) {
        >.aside-layer{
            -webkit-transform: translateZ(-100px) rotateY(25deg);
            transform: translateZ(-100px) rotateY(25deg);
        }
        &.open{
            >.aside-layer{
                -webkit-transform: none;
                transform: none;
            }
            >.content-layer{
                -webkit-transform: translateX($split-width-aside);
                transform: translateX($split-width-aside);
            }
        }
    }
}
<div class="layout-split-carousel">
    <div class="aside-layer">
        …
    </div>
    <div class="content-layer">
        …
    </div>
</div>
Try the Demo

Example App 2

<div class="layout-split">
    <div class="aside-layer">
        <div class="layer-scrollable">
            <div class="wrap">
                …
            </div>
        </div>
    </div>
    <div class="content-layer">
        <div class="topbar"></div>
        <div class="layer-scrollable with-topbar">
            <div class="wrap">
                …
            </div>
        </div>
        <div class="layer-toggle with-topbar"></div>
    </div>
</div>
<div class="layer-toggle">
    <div class="topbar"></div>
    <div class="layer-scrollable with-topbar">
        <div class="wrap">
            …
        </div>
    </div>
</div>
Try the Demo

Layout-Animation

Example App 3