crystallo

it's ultra responsive to be a responsive css framework.

What?

crystallo is a responsive micro framework (pure CSS) to help you kick-start any form of web creation.

This is the alpha release and it would be awesome if you could help: critique, bugs, ideas!

Features!

In the not so far future...

The core has no styles

So you can take advantage of the core functionality and create your own ultra custom theme.

To achieve this crystallo uses data-attributes for the core functionality and you can use your class / id to add an awesome styling. Or you create a custom crystallo theme to reuse the data-attributes as a replacement for the class-jungle.

More about data-attributes

If you think data-attributes is some JavaScript only voodoo you should read Data attributes rock – as both CSS and JavaScript know them by Christian Heilman or the W3C attribute selector specification.

Get into the dark woods!

There are just three predefined attributes which affect the whole body.

data-max-width (px)

  • none [default]
  • 860
  • 1024
  • 1152
  • 1280
  • 1400
  • 1600
  • 2048
  • 3200
  • 4000

data-theme

The core has no style, so we need themes! Right?

  • none [default]
  • minimal
  • your custom theme here?

data-auto-extend

Even if data-max-width is specified, auto extend the body to the next size.

  • false [default]
  • true
<body data-max-width="1400" data-theme="minimal" data-auto-extend="true">
</body>

up to 5 shiny columns

This is all you need to keep focus on the content and not on pixel perfect designs.

column 1

<article data-high="1" data-text="1 column">
  <section data-cols="1" data-valign="center">
    <div>
      <h2>column 1</h2>
    </div>
  </section>
</article>

column 1

column 2

<article data-high="2" data-text="2 columns">
  <section data-cols="2" data-valign="center">
    <div>
      <h2>column 1</h2>
    </div>
    <div>
      <h2>column 2</h2>
    </div>
  </section>
</article>

column 1

column 2

column 3

<article data-high="3" data-text="3 columns">
  <section data-cols="3" data-valign="center">
    <div>
      <h2>column 1</h2>
    </div>
    <div>
      <h2>column 2</h2>
    </div>
    <div>
      <h2>column 3</h2>
    </div>
  </section>
</article>

column 1

column 2

column 3

column 4

<article data-high="4" data-text="4 columns">
  <section data-cols="4" data-valign="center">
    <div>
      <h2>column 1</h2>
    </div>
    <div>
      <h2>column 2</h2>
    </div>
    <div>
      <h2>column 3</h2>
    </div>
    <div>
      <h2>column 4</h2>
    </div>
  </section>
</article>

column 1

column 2

column 3

column 4

column 5

<article data-high="5" data-text="5 columns">
  <section data-cols="5" data-valign="center">
    <div>
      <h2>column 1</h2>
    </div>
    <div>
      <h2>column 2</h2>
    </div>
    <div>
      <h2>column 3</h2>
    </div>
    <div>
      <h2>column 4</h2>
    </div>
    <div>
      <h2>column 5</h2>
    </div>
  </section>
</article>

buttons - simple & nice

<section data-cols="1" data-valign="center">
  <div>
    <button>default/button>
  </div>
</section>

<section data-cols="5" data-valign="center">
  <div>
    <button data-high="1">high 1</button>
  </div>
  <div>
    <button data-high="1">high 2</button>
  </div>
  <div>
    <button data-high="1">high 3</button>
  </div>
  <div>
    <button data-high="1">high 4</button>
  </div>
  <div>
    <button data-high="1">high 5</button>
  </div>
</section>

Grab your fresh piece

Get involved

Spread the word

2012 - 2013 by Tim Pietrusky

Thank you for watching the crystallo is taking over the universe as we know it show!