mirror of
https://github.com/thesephist/blocks.css.git
synced 2024-08-16 23:00:51 +03:00
165 lines
6.8 KiB
HTML
165 lines
6.8 KiB
HTML
<title>blocks.css</title>
|
||
|
||
<meta name="viewport" content="width=device-width,initial-scale=1" />
|
||
|
||
<link rel="stylesheet" href="src/reset.css" />
|
||
<link rel="stylesheet" href="src/blocks.css" />
|
||
<link rel="stylesheet" href="src/simple.css" />
|
||
|
||
<main>
|
||
|
||
<h1>☕️ blocks.css</h1>
|
||
|
||
<p><a href="https://github.com/thesephist/blocks.css">blocks.css</a> adds a layer of dimension to your web elements.
|
||
It's light enough that it takes no time to set up or load, but interesting enough that it can serve as the only
|
||
major CSS on the page.</p>
|
||
|
||
<h2>Basics</h2>
|
||
|
||
<p>blocks.css is a single stylesheet. Get started by adding the stylesheet to your page's head.</p>
|
||
|
||
<pre><link rel="stylesheet" href="https://unpkg.com/blocks.css/dist/blocks.min.css" /></pre>
|
||
|
||
<p>This is a blocky button. It's interactive –– try hovering and clicking on it.</p>
|
||
<button class="block">Hello, World!</button>
|
||
|
||
<p>You can make any element blocky by giving it the class <code>block</code>.</p>
|
||
|
||
<pre><button class="block">Hello, World!</button></pre>
|
||
|
||
<h3>Accents</h3>
|
||
|
||
<p>This is an <em>accent</em> button. You can make a block accented with the class <code>accent</code>.</p>
|
||
<button class="accent block">I'm so fancy!</button>
|
||
|
||
<h3>Pills</h3>
|
||
|
||
<p>This is a <em>pill</em> button. You can make a box round with the class <code>pill</code>.</p>
|
||
<button class="round block">I'm an oval!</button>
|
||
|
||
<h3>Fixed blocks</h3>
|
||
|
||
<p>This is a <em>fixed</em> button, which means it won't respond to any of your inputs or interactions. You can make
|
||
a block fixed with the class <code>fixed</code>.</p>
|
||
<button class="fixed block">I'm not moving.</button>
|
||
|
||
<h3>Wrapper blocks</h3>
|
||
|
||
<p>Sometimes, you want to blockify an element like <code>img</code> or <code>input</code>. But these elements can't
|
||
have children like <code>::before</code> and <code>::after</code> elements, so blocks.css can't work its magic.
|
||
Instead you'll have to wrap them in a <em>wrapper block</em>, using the <code>wrapper</code> class, like this.
|
||
(The wrapper class removes padding in the block.)</p>
|
||
<div class="wrapper block pictureWrapper">
|
||
<img class="picture" src="https://linus.zone/pic" alt="Linus's picture">
|
||
</div>
|
||
|
||
<h3>Inline blocks</h3>
|
||
|
||
<p>Lastly, sometimes you may want to place a block <em>inline</em>, or in the middle of a line of text. You can do
|
||
so with an <em>inline</em> block, by adding the class <code>inline</code>. Then your blocks can be in the middle
|
||
of text, <span class="inline block">like this</span>.</p>
|
||
|
||
<h2>Core components</h2>
|
||
|
||
<p>We've only looked at buttons so far, but anything can be blocky. Here are a few examples.</p>
|
||
|
||
<p>These are all just created by either adding the <code>block</code> class on a normal HTML element, or by wrapping
|
||
normal HTML elements in <code><div class="wrapper block"></div></code>.</p>
|
||
|
||
<div class="searchBlock">
|
||
<div class="fixed wrapper block">
|
||
<input type="text" value="This is a blocky input" placeholder="Type something..." />
|
||
</div>
|
||
<button class="accent block searchButton">Go!</button>
|
||
</div>
|
||
|
||
<div class="preWrapper fixed wrapper block">
|
||
<pre>This is a blocky code block (inside a wrapper)</pre>
|
||
</div>
|
||
|
||
<div class="fixed wrapper block">
|
||
<iframe width="560" height="315" src="https://www.youtube.com/embed/JLf9q36UsBk" frameborder="0"
|
||
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
|
||
</div>
|
||
|
||
<div class="card fixed block">
|
||
<h2>This is a blocky card</h2>
|
||
<p>... that contains many other elements</p>
|
||
<button class="block">Like another blocky button</button>
|
||
<button class="accent block">And an accented button</button>
|
||
</div>
|
||
|
||
<h2>Theming</h2>
|
||
|
||
<p>You can theme button styles by customizing the colors, using <a
|
||
href="https://developer.mozilla.org/en-US/docs/Web/CSS/--*">CSS custom properties</a>.</p>
|
||
|
||
<p>There are four variables that blocks.css uses:</p>
|
||
|
||
<ul>
|
||
<li>
|
||
<p><code>--block-text-color</code> determines the color of text, and the border around the block and its
|
||
shadow</p>
|
||
</li>
|
||
<li>
|
||
<p><code>--block-background-color</code> is the color of the button background</p>
|
||
</li>
|
||
<li>
|
||
<p><code>--block-accent-color</code> is the background color of accented buttons</p>
|
||
</li>
|
||
<li>
|
||
<p><code>--block-shadow-color</code> is the fill color of the shadow</p>
|
||
</li>
|
||
</ul>
|
||
|
||
<p>Here's a more colorful palette, by changing the <code>--block-accent-color</code> within just this div.</p>
|
||
|
||
<div class="color themed">
|
||
<button class="accent block">Hello, World!</button>
|
||
<div class="searchBlock">
|
||
<div class="fixed wrapper block">
|
||
<input type="text" value="This is a blocky input" placeholder="Type something..." />
|
||
</div>
|
||
<button class="accent block searchButton">Go!</button>
|
||
</div>
|
||
|
||
<div class="card fixed block">
|
||
<h2>This is a blocky card</h2>
|
||
<p>... that contains many other elements</p>
|
||
<button class="block">Like another blocky button</button>
|
||
<button class="accent block">And an accented button</button>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<p>This is a dark theme, made possible by setting the text, background, and shadow colors to be their inverses.</p>
|
||
|
||
<div class="dark themed">
|
||
<button class="block">Hello, World!</button>
|
||
<div class="searchBlock">
|
||
<div class="fixed wrapper block">
|
||
<input type="text" value="This is a blocky input" placeholder="Type something..." />
|
||
</div>
|
||
<button class="accent block searchButton">Go!</button>
|
||
</div>
|
||
|
||
<div class="card fixed block">
|
||
<h2>This is a blocky card</h2>
|
||
<p>... that contains many other elements</p>
|
||
<button class="block">Like another blocky button</button>
|
||
<button class="accent block">And an accented button</button>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<h2>Demo</h2>
|
||
|
||
<p>For a real-world example of blocks.css, check out <a href="https://beta.codeframe.co">Codeframe</a>, an
|
||
in-browser code editor and development environment built with blocks.css. You can also see <a
|
||
href="https://zerotocode.org">Zero to Code</a> and <a href="http://lyrics.rip">lyrics.rip</a> for more
|
||
examples of blocks.css websites, all of which are themed differently.</p>
|
||
|
||
<p><strong>blocks.css</strong> is made by <a href="https://linus.zone/now">Linus</a>. Find me at <a
|
||
href="https://github.com/thesephist">@thesephist</a> anywhere on the web.</p>
|
||
|
||
</main> |