it's ultra responsive to be a responsive css framework.
Here is the live version & preview.
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!
0.0.25
- clean & semantic HTML
- class / id free
- up to 5 fluid columns
- buttons
- vertical-align: center
- theme support
- and what ever you want!
- Chrome
- Firefox
- Opera
- Safari
- IE 9+ (IE <=8 support in alpha)
<head>
<link rel="stylesheet" href="css/crystallo.css">
<link rel="stylesheet" href="css/theme/minimal.css">
</head><body data-max-width="1400" data-theme="minimal" data-auto-extend="true">- Add support for
- table
- form
- Add support for
- navigation
- Create a theme skeleton / creator
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.
- none [default]
- 860
- 1024
- 1152
- 1280
- 1400
- 1600
- 2048
- 3200
- 4000
The core has no style, so we need themes! Right?
- none [default]
- minimal
- your custom theme here?
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>This is all you need to keep focus on the content and not on pixel perfect designs.
<article data-high="1" data-text="1 column">
<section data-cols="1" data-valign="center">
<div>
<h2>column 1</h2>
</div>
</section>
</article><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><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><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><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><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>- Mads Cordes
2012 by Tim Pietrusky