Element CSS

Saner defaults for HTML elements.

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

This project is still in it's early stages. If you have any ideas or improvements, please feel free to chime in.

### Markdown Support Sometimes you want to be able to easily write out a long document, without having to add a bunch of paragraph elements. We've got you covered. A special <article-markdown> element makes it easy to throw together a long document and have it convert nicely to HTML for you, without having to use a static HTML site generator. It supports all the niceties, such as [links](https://neocities.org). Keep in mind that indenting matters in markdown, so start your markdown on the beginning of the line. In the future we may try to cleverly auto-correct for the indenting, but this works for now.

Examples

Grid Column 1

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.

Grid Column 2

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.

Smaller

I'm grid 3, but a lot smaller than the others.

 
      
      
        
          
Column

          
I'm the first column!

        
        
          
Another Column

          
I'm the second column!

        
        
          
Smaller

          
I'm grid 3, but a lot smaller than the others.

Headers

H1 Header

H2 Header

H3 Header

H4 Header

H5 Header
H6 Header
<h3>Headers</h3> <h1>H1 Header</h1> <h2>H2 Header</h2> <h3>H3 Header</h3> <h4>H4 Header</h4> <h5>H5 Header</h5> <h6>H6 Header</h6>

Images

Oversized images are auto-resized to fit the column:

<h3>Images</h3> <p>Oversized images are auto-resized to fit the column:</p> <img src="harbor.jpg">

Ordered List

  1. Blue
  2. Green
  3. Red
<ol> <li>Blue</li> <li>Green</li> <li>Red</li> </ol>

Unordered List

<ul> <li>Blue</li> <li>Green</li> <li>Red</li> </ul>

Table

Name Instrument
Data Violin
Riker Trombone
<center><h3>Table</h3></center> <table> <tr> <th>Name</th> <th>Instrument</th> </tr> <tr> <td>Data</td> <td>Violin</td> </tr> <tr> <td>Riker</td> <td>Trombone</td> </tr> </table>

Code

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

<code> const user = { name: 'Commander Riker', username: 'hotjazzhotternights1337' } console.log(user.name) </code>

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.

<!doctype html> <html> <head> <title>Hello!</title> </head> <body> <h1>I didn't have to escape any of this (inspect the source code).</h1> </body> </html>

If you want syntax highlighting, just embed highlight.js and the highlighting style you want and it's automatically configured.

Forms

Favorite Color?

 <h3>Forms</h3> <form> <label>Email</label> <input name="email" type="text" placeholder="Email"> <label>What do you think?</label> <textarea name="comments" rows="5" cols="30"></textarea> <label>State</label> <select name="state"> <option>OR</option> <option>MN</option> <option>CA</option> </select> <label> <input name="remember" type="checkbox" value="1"> Remember me </label> <p>Favorite Color?</p> <label> <input name="color" type="radio" value="red" checked> Red </label> <label> <input name="color" type="radio" value="blue"> Blue </label> <button>Submit</button> </form>

How to Use

Use this template to get started:

<!doctype html> <html class="element"> <head> <meta charset="utf-8"> <link rel="stylesheet" href="https://elementcss.neocities.org/dist/element-0.1.2.min.css"> <script src="https://elementcss.neocities.org/dist/element-0.1.2.min.js"></script> <title>Hello!</title> </head> <body> <header> <nav> <a href="one.html">Link One</a> <a href="two.html">Link Two</a> </nav> <h1>Site Name</h1> <strong>Subtitle for site</strong> </header> <p>Okay, you're all set!</p> </body> </html>

If you want to use code syntax highlighting, use this:

<!doctype html> <html class="element"> <head> <meta charset="utf-8"> <link rel="stylesheet" href="https://elementcss.neocities.org/dist/element-0.1.2.min.css"> <script src="https://elementcss.neocities.org/dist/element-0.1.2.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.11.0/styles/sunburst.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.11.0/highlight.min.js"></script> <title>Hello!</title> </head> <body> <header> <h1>Site Name</h1> <strong>Subtitle for site</strong> </header> <p>Okay, you're all set!</p> </body> </html>

Special Thanks

The CSS for this project is heavily based on the excellent github-markdown-css.