mirror of
https://github.com/thesephist/blocks.css.git
synced 2024-09-11 11:26:01 +03:00
commit
67e9718598
64
index.html
64
index.html
@ -10,7 +10,9 @@
|
||||
|
||||
<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>
|
||||
<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>
|
||||
|
||||
@ -30,31 +32,43 @@
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<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..."/>
|
||||
<input type="text" value="This is a blocky input" placeholder="Type something..." />
|
||||
</div>
|
||||
<button class="accent block searchButton">Go!</button>
|
||||
</div>
|
||||
@ -64,7 +78,8 @@
|
||||
</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>
|
||||
<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">
|
||||
@ -76,15 +91,25 @@
|
||||
|
||||
<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>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>
|
||||
<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>
|
||||
@ -93,7 +118,7 @@
|
||||
<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..."/>
|
||||
<input type="text" value="This is a blocky input" placeholder="Type something..." />
|
||||
</div>
|
||||
<button class="accent block searchButton">Go!</button>
|
||||
</div>
|
||||
@ -113,7 +138,7 @@
|
||||
<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..."/>
|
||||
<input type="text" value="This is a blocky input" placeholder="Type something..." />
|
||||
</div>
|
||||
<button class="accent block searchButton">Go!</button>
|
||||
</div>
|
||||
@ -129,9 +154,12 @@
|
||||
|
||||
<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>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>
|
||||
<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>
|
148
src/blocks.css
148
src/blocks.css
@ -1,99 +1,99 @@
|
||||
/* DEFAULT VARIABLES */
|
||||
body {
|
||||
--block-text-color: #222;
|
||||
--block-background-color: #fff;
|
||||
--block-accent-color: #00ae86;
|
||||
--block-shadow-color: #444;
|
||||
--block-text-color: #222;
|
||||
--block-background-color: #fff;
|
||||
--block-accent-color: #00ae86;
|
||||
--block-shadow-color: #444;
|
||||
}
|
||||
|
||||
/* BASIC BLOCK STYLES */
|
||||
.block {
|
||||
display: block;
|
||||
color: var(--block-text-color);
|
||||
border: 3px solid var(--block-text-color);
|
||||
border-radius: 3px;
|
||||
padding: 4px 8px;
|
||||
background: var(--block-background-color);
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
box-sizing: border-box;
|
||||
display: block;
|
||||
color: var(--block-text-color);
|
||||
border: 3px solid var(--block-text-color);
|
||||
border-radius: 3px;
|
||||
padding: 4px 8px;
|
||||
background: var(--block-background-color);
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
box-sizing: border-box;
|
||||
|
||||
position: relative;
|
||||
top: -2px;
|
||||
left: -2px;
|
||||
transition: transform .2s;
|
||||
margin: 8px 6px 10px 6px;
|
||||
z-index: 1;
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
position: relative;
|
||||
top: -2px;
|
||||
left: -2px;
|
||||
transition: transform 0.2s;
|
||||
margin: 8px 6px 10px 6px;
|
||||
z-index: 1;
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
}
|
||||
|
||||
.block.wrapper,
|
||||
.block.wrapper.inline {
|
||||
display: inline-block;
|
||||
padding: 0;
|
||||
display: inline-block;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.block.wrapper>* {
|
||||
margin: 0;
|
||||
.block.wrapper > * {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* INTERACTIVE BLOCK STYLES */
|
||||
.block::before {
|
||||
content: '';
|
||||
background: var(--block-background-color);
|
||||
border: 3px solid var(--block-text-color);
|
||||
border-radius: 3px;
|
||||
position: absolute;
|
||||
top: -3px;
|
||||
left: -3px;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
z-index: -1;
|
||||
content: "";
|
||||
background: var(--block-background-color);
|
||||
border: 3px solid var(--block-text-color);
|
||||
border-radius: 3px;
|
||||
position: absolute;
|
||||
top: -3px;
|
||||
left: -3px;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.block:hover,
|
||||
.block:focus {
|
||||
transform: translate(2px, 2px);
|
||||
transform: translate(2px, 2px);
|
||||
}
|
||||
|
||||
.block::after {
|
||||
content: '';
|
||||
display: block;
|
||||
background: var(--block-shadow-color);
|
||||
border: 3px solid var(--block-text-color);
|
||||
border-radius: 3px;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 3px;
|
||||
left: 3px;
|
||||
right: 0;
|
||||
z-index: -2;
|
||||
transition: transform .2s;
|
||||
content: "";
|
||||
display: block;
|
||||
background: var(--block-shadow-color);
|
||||
border: 3px solid var(--block-text-color);
|
||||
border-radius: 3px;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 3px;
|
||||
left: 3px;
|
||||
right: 0;
|
||||
z-index: -2;
|
||||
transition: transform 0.2s;
|
||||
}
|
||||
|
||||
.block:hover::after,
|
||||
.block:focus::after {
|
||||
transform: translate(-2px, -3px);
|
||||
transform: translate(-2px, -3px);
|
||||
}
|
||||
|
||||
.block:active {
|
||||
color: var(--block-text-color);
|
||||
transform: translate(3px, 3px);
|
||||
color: var(--block-text-color);
|
||||
transform: translate(3px, 3px);
|
||||
}
|
||||
|
||||
.block:active::after {
|
||||
transform: translate(-4px, -4px);
|
||||
transform: translate(-4px, -4px);
|
||||
}
|
||||
|
||||
.block:focus {
|
||||
outline: none;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.block.fixed {
|
||||
cursor: initial;
|
||||
cursor: initial;
|
||||
}
|
||||
|
||||
/* FIXED STYLES */
|
||||
@ -106,39 +106,49 @@ body {
|
||||
.block.fixed:focus,
|
||||
.block.fixed:focus::before,
|
||||
.block.fixed:focus::after {
|
||||
transform: none;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
/* ACCENT STYLES */
|
||||
.block.accent {
|
||||
color: var(--block-background-color);
|
||||
background: var(--block-accent-color);
|
||||
color: var(--block-background-color);
|
||||
background: var(--block-accent-color);
|
||||
}
|
||||
|
||||
.block.accent::before {
|
||||
background: var(--block-accent-color);
|
||||
background: var(--block-accent-color);
|
||||
}
|
||||
|
||||
/* INLINE STYLES */
|
||||
.block.inline {
|
||||
display: inline-block;
|
||||
font-size: .75em;
|
||||
padding: 0 6px;
|
||||
margin: 3px 2px 1px 4px;
|
||||
display: inline-block;
|
||||
font-size: 0.75em;
|
||||
padding: 0 6px;
|
||||
margin: 3px 2px 1px 4px;
|
||||
}
|
||||
.block.inline::after {
|
||||
top: -1px;
|
||||
left: -1px;
|
||||
top: -1px;
|
||||
left: -1px;
|
||||
}
|
||||
.block.inline:hover,
|
||||
.block.inline:focus {
|
||||
transform: translate(1px, 1px);
|
||||
transform: translate(1px, 1px);
|
||||
}
|
||||
.block.inline:hover::after,
|
||||
.block.inline:focus::after {
|
||||
transform: translate(-1px, -1px);
|
||||
transform: translate(-1px, -1px);
|
||||
}
|
||||
.block.inline:active {
|
||||
transform: translate(2px, 2px);
|
||||
transform: translate(2px, 2px);
|
||||
}
|
||||
|
||||
/* ROUND STYLES */
|
||||
.block.round,
|
||||
.block.round::before,
|
||||
.block.round::after {
|
||||
border-radius: 30px;
|
||||
}
|
||||
|
||||
.block.round::after {
|
||||
left: 1px;
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user