Element is a CSS design / framework that only requires simple HTML
elements for building a site. In contrast to most design frameworks that use a lot of nested
<div>
elements and inline classes, Element does away with that,
making it quicker and easier to create decent-looking static web sites from
scratch that are easy to edit and manage with just a text editor.
Think of it as a "Markdown for HTML", or "saner defaults for HTML elements".
Improvements to this project are welcome. If you have any ideas or code changes, please feel free to chime in. Pull requests welcome!
Inspired by ungrid, Element CSS wires up custom element <g-row>
to be a row
and <g-col>
to be a column. It's an easy, auto-sized, responsive grid that Just Works, and supports the upcoming HTML5 custom elements spec.
I've had twelve years to think about it. And if I had it to do over again, I would have grabbed the phaser and pointed it at you instead of them.
I'm the first column!
I'm the second column!
I'm grid 3, but a lot smaller than the others.
Oversized images are auto-resized to fit the column:
Oversized images are auto-resized to fit the column:
Name | Instrument |
---|---|
Data | Violin |
Riker | Trombone |
Name | Instrument |
---|---|
Data | Violin |
Riker | Trombone |
<code>
elements used in a <p>
will be inline-block: echo('hello world!')
. Code tags
outside of a <p>
will be blocks, with code indenting automatically fixed (no <pre>
indenting gymnastics needed).
const user = {
name: 'Commander Riker',
username: 'hotjazzhotternights1337'
}
console.log(user.name)
If you need to embed HTML code examples, you can use the <xmp>
tag, which makes it so you don't need to encode escapes.
Sadly, the HTML5 spec is trying to obsolete the <xmp>
tag even though it's the only way to make this work,
but all browsers seem to be supporting it anyways. Use at your own risk.
If you want syntax highlighting, just embed highlight.js and the highlighting style you want and it's automatically configured.
Use this template to get started:
Okay, you're all set!
If you want to use code syntax highlighting, use this:
Okay, you're all set!