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.
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 codethe upcoming HTML5 custom elements spec.
Grid Column 2
خسينم خيه يهعشم شمؤم ينخش کمؤا للمشخ اکخسک لشخکمس مؤکلکشخ سمهيلکشسم سمخک ثصک شسخک ڨمکشخ يبک سخمءسن
<![CDATA[
<g-row>
<g-col>
<h3>Grid Column 1</h3>
<p>
Inspired by <a href="http://chrisnager.github.io/ungrid/">ungrid</a>, Element CSS wires up custom element <code><g-row></code> to be a row
and <code><g-col></code> to be a column. It's an easy, auto-sized, responsive grid that Just Works, and supports the upcoming HTML5 <a href="https://developer.mozilla.org/en-US/docs/Web/Web_Components/Custom_Elements">custom elements</a> spec.
</p>
</g-col>
<g-col>
<h3>Grid Column 2</h3>
<p>
خسينم خيه يهعشم شمؤم ينخش کمؤا للمشخ اکخسک لشخکمس مؤکلکشخ سمهيلکشسم سمخک ثصک شسخک ڨمکشخ يبک سخمءسن </p>
</g-col>
</g-row>
]]>
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.
<![CDATA[
<g-row>
<g-col>
<h3>Column</h3>
<p>I'm the first column!</p>
</g-col>
<g-col>
<h3>Another Column</h3>
<p>I'm the second column!</p>
</g-col>
<g-col style="width: 20%">
<h3>Smaller</h3>
<p>I'm grid 3, but a lot smaller than the others.</p>
</g-col>
</g-row>
]]>
Headers
H1 Header
H2 Header
H3 Header
H4 Header
H5 Header
H6 Header
<![CDATA[
<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:
<![CDATA[
<h3>Images</h3>
<p>Oversized images are auto-resized to fit the column:</p>
<img src="harbor.jpg">
]]>
Ordered List
- Blue
- Green
- Red
<![CDATA[
<ol>
<li>Blue</li>
<li>Green</li>
<li>Red</li>
</ol>
]]>
Unordered List
<![CDATA[
<ul>
<li>Blue</li>
<li>Green</li>
<li>Red</li>
</ul>
]]>
Table
How about making text center with the tag <center>!
<![CDATA[
<center><h3>Table</h3></center>
]]>
Table
This table has slight tints alternating rows!
| Name |
Instrument |
| Data |
Violin |
| Riker |
Trombone |
<![CDATA[
<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).
⚠️Tough.. when nested in <![CDATA[mark]]>
<![CDATA[
<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.
<![CDATA[
<!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
<![CDATA[
<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:
<![CDATA[
<!doctype html>
<html class="element">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1">
<link rel="stylesheet" href="https://elementcss.neocities.org/dist/element-0.1.1.min.css">
<script src="https://elementcss.neocities.org/dist/element-0.1.1.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:
<![CDATA[
<!doctype html>
<html class="element">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1">
<link rel="stylesheet" href="https://elementcss.neocities.org/dist/element-0.1.1.min.css">
<script src="https://elementcss.neocities.org/dist/element-0.1.1.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>
<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>
]]>
A markins of Neocities ElementCSS
The latest version of the webpage as displayed Neocities ElementCSS.
< --