Elemen CSS

Default Saner untuk elemen HTML.

Element adalah desain/framework CSS yang hanya membutuhkan elemen HTML sederhana untuk membangun sebuah situs. Berbeda dengan kebanyakan kerangka kerja desain yang menggunakan banyak <div>elemen bersarang dan kelas sebaris, Elemen menghilangkannya, membuatnya lebih cepat dan lebih mudah untuk membuat situs web statis yang tampak layak dari awal yang mudah diedit dan dikelola hanya dengan editor teks .

Anggap saja sebagai "Penurunan harga untuk HTML", atau "default yang lebih waras untuk elemen HTML".

Proyek ini masih dalam tahap awal. Jika Anda memiliki ide atau perbaikan, jangan ragu untuk bergabung .

Contoh

Kolom Kisi 1

Terinspirasi oleh ungrid , Element CSS menghubungkan elemen khusus <g-row>menjadi baris dan <g-col>kolom. Ini adalah kisi yang mudah, berukuran otomatis, responsif yang Just Works, dan mendukung spesifikasi elemen kustom HTML5 yang akan datang.

Kolom Kotak 2

Saya punya waktu dua belas tahun untuk memikirkannya. Dan jika saya harus melakukannya lagi, saya akan mengambil phaser dan mengarahkannya ke Anda, bukan mereka.


&lt;g-row&gt; &lt;g-col&gt; &lt;h3&gt;Column&lt;/h3&gt; &lt;p&gt;I'm the first column!&lt;/p&gt; &lt;/g-col&gt; &lt;g-col&gt; &lt;h3&gt;Another Column&lt;/h3&gt; &lt;p&gt;I'm the second column!&lt;/p&gt; &lt;/g-col&gt; &lt;g-col style="width: 20%"&gt; &lt;h3&gt;Smaller&lt;/h3&gt; &lt;p&gt;I'm grid 3, but a lot smaller than the others.&lt;/p&gt; &lt;/g-col&gt; &lt;/g-row&gt;

Header

Judul H1

Tajuk H2

Judul H3

Judul H4

Judul H5

Tajuk H6


&lt;h3&gt;Headers&lt;/h3&gt; &lt;h1&gt;H1 Header&lt;/h1&gt; &lt;h2&gt;H2 Header&lt;/h2&gt; &lt;h3&gt;H3 Header&lt;/h3&gt; &lt;h4&gt;H4 Header&lt;/h4&gt; &lt;h5&gt;H5 Header&lt;/h5&gt; &lt;h6&gt;H6 Header&lt;/h6&gt;

Gambar-gambar

Gambar yang terlalu besar akan diubah ukurannya secara otomatis agar sesuai dengan kolom:


&lt;h3&gt;Images&lt;/h3&gt; &lt;p&gt;Oversized images are auto-resized to fit the column:&lt;/p&gt; &lt;img src="harbor.jpg"&gt;

Daftar pesanan

Biru
Hijau
merah


&lt;ol&gt; &lt;li&gt;Blue&lt;/li&gt; &lt;li&gt;Green&lt;/li&gt; &lt;li&gt;Red&lt;/li&gt; &lt;/ol&gt;

Daftar Tidak Terurut

Biru
Hijau
merah


&lt;ul&gt; &lt;li&gt;Blue&lt;/li&gt; &lt;li&gt;Green&lt;/li&gt; &lt;li&gt;Red&lt;/li&gt; &lt;/ul&gt;

Table

Name	Instrument
Data	Violin
Riker	Trombone


&lt;center&gt;&lt;h3&gt;Table&lt;/h3&gt;&lt;/center&gt; &lt;table&gt; &lt;tr&gt; &lt;th&gt;Name&lt;/th&gt; &lt;th&gt;Instrument&lt;/th&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;Data&lt;/td&gt; &lt;td&gt;Violin&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;Riker&lt;/td&gt; &lt;td&gt;Trombone&lt;/td&gt; &lt;/tr&gt; &lt;/table&gt;

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


&lt;code&gt; const user = { name: 'Commander Riker', username: 'hotjazzhotternights1337' } console.log(user.name) &lt;/code&gt;

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.


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

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

Forms


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

How to Use

Use this template to get started:


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

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


&lt;!doctype html&gt; &lt;html class="element"&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;meta name="viewport" content="initial-scale=1"&gt; &lt;link rel="stylesheet" href="https://elementcss.neocities.org/dist/element-0.1.1.min.css"&gt; &lt;script src="https://elementcss.neocities.org/dist/element-0.1.1.min.js"&gt;&lt;/script&gt; &lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.11.0/styles/sunburst.min.css"&gt; &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.11.0/highlight.min.js"&gt;&lt;/script&gt; &lt;title&gt;Hello!&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;header&gt; &lt;nav&gt; &lt;a href="one.html"&gt;Link One&lt;/a&gt; &lt;a href="two.html"&gt;Link Two&lt;/a&gt; &lt;/nav&gt; &lt;h1&gt;Site Name&lt;/h1&gt; &lt;strong&gt;Subtitle for site&lt;/strong&gt; &lt;/header&gt; &lt;p&gt;Okay, you're all set!&lt;/p&gt; &lt;/body&gt; &lt;/html&gt;

Terima kasih khusus

CSS untuk proyek ini sangat didasarkan pada github-markdown-css yang sangat baik .