crystallo is a solid & simple responsive micro framework to help you kick-start any form of web application.
Ruby
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
css
img
sass
.gitignore
README.md
config.rb
index.html

README.md

crystallo

crystallo

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

Here is the live version & preview.

What?

crystallo is a solid & simple responsive micro framework 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!

Version

0.0.25

Features!

  • clean & semantic HTML
  • class / id free
  • up to 5 fluid columns
  • buttons
  • vertical-align: center
  • theme support
  • and what ever you want!

Supported browsers

  • Chrome
  • Firefox
  • Opera
  • Safari
  • IE 9+ (IE <=8 support in alpha)

How to use it

1. Add the css

<head>
    <link rel="stylesheet" href="css/crystallo.css">
    <link rel="stylesheet" href="css/theme/minimal.css">
</head>

2. Define a max-width, theme or auto-extend if you like

<body data-max-width="1400" data-theme="minimal" data-auto-extend="true">

Roadmap

0.0.3

  • Add support for
    • table
    • form

0.0.4

  • Add support for
    • navigation
  • Create a theme skeleton / creator

The core has no styles

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

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.

1 column

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

2 columns

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

3 columns

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

4 columns

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

5 columns

<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

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

Alpha testers

  • Mads Cordes

2012 by Tim Pietrusky

timpietrusky.com