neocities
/
element
同期ミラー https://github.com/neocities/element


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361
							<!doctype html>
<html>
  <head>
    <title>Element CSS</title>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1">
    <link rel="stylesheet" href="element.css">
    <script src="element.js"></script>
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.11.0/styles/sunburst.min.css">
    <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.11.0/highlight.min.js"></script>
  </head>
  <body>
    <header>
      <h1>Element CSS</h1>
      <strong>Saner defaults for HTML elements.</strong>
    </header>

    <p>
      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
      <code>&lt;div&gt;</code> 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.
    </p>

    <p>
      Think of it as a "Markdown for HTML", or "saner defaults for HTML elements".
    </p>

    <p>
      Improvements to this project are welcome. If you have any ideas or code changes,
      please feel free to <a href="https://github.com/neocities/element">chime in</a>.
      Pull requests welcome!
    </p>

    <a name="examples"></a>
    <h2>Examples</h2>

    <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>&lt;g-row&gt;</code> to be a row
          and <code>&lt;g-col&gt;</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>
          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.
        </p>
      </g-col>
    </g-row>

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

    <g-row>
      <g-col>
        <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>

        <xmp>
          <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>
        </xmp>
      </g-col>

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

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

    <g-row>
      <g-col>
        <h3>Ordered List</h3>
        <ol>
          <li>Blue</li>
          <li>Green</li>
          <li>Red</li>
        </ol>

        <xmp>
          <ol>
            <li>Blue</li>
            <li>Green</li>
            <li>Red</li>
          </ol>
        </xmp>
      </g-col>

      <g-col>
        <h3>Unordered List</h3>
        <ul>
          <li>Blue</li>
          <li>Green</li>
          <li>Red</li>
        </ul>

        <xmp>
          <ul>
            <li>Blue</li>
            <li>Green</li>
            <li>Red</li>
          </ul>
        </xmp>
      </g-col>

      <g-col style="width: 50%">
        <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>

        <xmp>
          <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>
        </xmp>
      </g-col>
    </g-row>

    <g-row>
      <g-col>
        <h3>Code</h3>

        <p>
          <code>&lt;code&gt;</code> elements used in a <code>&lt;p&gt;</code> will be inline-block: <code>echo('hello world!')</code>. Code tags
          outside of a <code>&lt;p&gt;</code> will be blocks, with code indenting automatically fixed (no <code>&lt;pre&gt;</code> indenting gymnastics needed).
        </p>

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

        <p>
          If you need to embed HTML code examples, you can use the <code>&lt;xmp&gt;</code> tag, which makes it so you don't need to encode escapes.
          Sadly, the HTML5 spec is trying to obsolete the <code>&lt;xmp&gt;</code> 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.
        </p>

        <xmp>
          <!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>
        </xmp>

        <p>
          If you want syntax highlighting, just embed <a href="https://highlightjs.org/">highlight.js</a> and the highlighting style
          you want and it's automatically configured.
        </p>
      </g-col>
    </g-row>

    <g-row>
      <g-col>
        <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>
      </g-col>
      <g-col style="width: 70%">
        <xmp>
          <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>
        </xmp>
      </g-col>
    </g-row>

    <a name="getstarted"></a>
    <h2>How to Use</h2>

    <p>Use this template to get started:</p>

    <xmp>
      <!doctype html>
      <html>
        <head>
          <meta charset="utf-8">
          <link rel="stylesheet" href="https://elementcss.neocities.org/dist/element-0.2.0.min.css">
          <script src="https://elementcss.neocities.org/dist/element-0.2.0.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>
    </xmp>

    <p>If you want to use code syntax highlighting, use this:</p>

    <xmp>
      <!doctype html>
      <html>
        <head>
          <meta charset="utf-8">
          <link rel="stylesheet" href="https://elementcss.neocities.org/dist/element-0.2.0.min.css">
          <script src="https://elementcss.neocities.org/dist/element-0.2.0.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>
    </xmp>

    <h2>Special Thanks</h2>

    The CSS for this project is heavily based on the excellent <a href="https://github.com/sindresorhus/github-markdown-css">github-markdown-css</a>.

    <footer>
      <p>Element CSS: A <a href="https://neocities.org">Neocities</a> project.</p>
    </footer>
  </body>
</html>