mirror of
https://github.com/thesephist/blocks.css.git
synced 2024-10-03 22:07:10 +03:00
181 lines
8.5 KiB
HTML
181 lines
8.5 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>round</em> button, also sometimes called a "pill". You can make a box round with the class <code>round</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 real-world examples of blocks.css, check out these sites, which feature the library in different themes:</p>
|
||
<ul>
|
||
<li><p><a href="https://codeframe.co">Codeframe</a>, an in-browser code editor and playground</p></li>
|
||
<li><p><a href="https://read.gift">Read.gift</a>, an awesome service to give and receive the gift of books</p></li>
|
||
<li><p><a href="https://plume.chat">Plume.chat</a>, a small in-memory real time chat server with Go and WebSockets</p></li>
|
||
<li><p><a href="https://lyrics.rip">Lyrics.rip</a>, which uses Markov chains to generate lyrics for any artist with the Genius API</p></li>
|
||
<li><p><a href="https://zerotocode.org">ZeroToCode.org</a>, a place for beginner coders to learn to make stuff on the web</p></li>
|
||
<li><p><a href="https://1989.style/">1989.style</a>, an online quiz about lines of lyrics from Taylor Swift's discography</p></li>
|
||
<li><p><a href="https://github.com/thesephist/frieden">Frieden</a>, a public free-busy calendar that can aggregate events from multiple Google Calendar accounts</p></li>
|
||
<li><p><a href="https://tabloid.thesephist.vercel.app/">Tabloid</a>, a Turing-complete programming language that reads like clickbait headlines</p></li>
|
||
<li><p><a href="https://heyyyyyyyyyyyy.com/">Heyyyyyyyyyyyy.com</a>, a parody of the email service Hey.com</p></li>
|
||
<li><p><a href="https://github.com/thesephist/draw">draw</a>, a minimal in-memory collaborative whiteboard</p></li>
|
||
<li><p><a href="https://github.com/thesephist/shelf.page">Shelf.page</a>, an online, public “blog-shelf” for collecting and sharing interesting reads with your audience</p></li>
|
||
<li>
|
||
<p><a href="https://linus.zone/eval">Ink programming language sandbox</a>, a sandboxed playground for the
|
||
<a href="https://github.com/thesephist/ink">Ink programming language</a></p>
|
||
</li>
|
||
<li><p><a href="https://own2020s.com">Own2020s.com</a>, a calculator to visualize the time you can save by cutting down on a habit</p></li>
|
||
</ul>
|
||
|
||
<p><strong>blocks.css</strong> is made by <a href="https://thesephist.com/">Linus</a>. Find me at <a
|
||
href="https://twitter.com/thesephist">@thesephist</a> anywhere on the web.</p>
|
||
|
||
</main>
|