thesephist/blocks.css
1
1
Fork 0
mirror of https://github.com/thesephist/blocks.css.git synced 2024-09-11 11:26:01 +03:00
Code Issues Projects Releases Wiki Activity

Merge pull request #1 from jajoosam/master

Browse Source 
Adding pill block
This commit is contained in:
Linus Lee 2019-12-08 23:44:56 -08:00 committed by GitHub
commit 67e9718598
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 125 additions and 87 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

64
index.html
View File

@ -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>&lt;div class="wrapper block"&gt;&lt;/div&gt;</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>&lt;div class="wrapper block"&gt;&lt;/div&gt;</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
View File

@ -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;
}