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

Flesh out readme and move demo to bottom of the demo page

Browse Source
This commit is contained in:
Linus Lee 2019-06-11 22:07:34 -07:00
parent 51c7871bd7
commit 281c77ed43
2 changed files with 15 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
README.md
View File

@ -2,11 +2,15 @@
Add some dimension to your page with blocks 🚀
## Synopsis
You can check out examples and get started with **blocks.css** at the [GitHub Page](https://thesephist.github.io/blocks.css/).
**blocks.css** is the core of styles used in my projects like [Codeframe](https://beta.codeframe.co), [Zero to Code](https://zerotocode.org), and [Lyrics.rip](https://genius.com/a/a-teen-programmer-built-a-tool-called-lyrics-rip-to-generate-fake-lyrics-for-your-favorite-artists).
## Summary
**blocks.css** is the core of styles used in my projects like [Codeframe](https://beta.codeframe.co), [Zero to Code](https://zerotocode.org), and [Lyrics.rip](https://genius.com/a/a-teen-programmer-built-a-tool-called-lyrics-rip-to-generate-fake-lyrics-for-your-favorite-artists). Lots of people asked for the styles, so I've pulled the button styles out into a separate package right here.
## Theming
By default, Blocks are turquoise. (Why? because it's my favorite color.) But you can use [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) to modify the color and add things like a dark theme.
blocks.css supports theming. By default, Blocks are turquoise. (Why? because it's my favorite color.) But you can use [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) to modify the color and add things like a dark theme.
Check out the [documentation](https://thesephist.github.io/blocks.css/) for the full details.

16
index.html
View File

@ -10,14 +10,6 @@
<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>Demo</h2>
<p>Here's <a href="https://beta.codeframe.co">Codeframe</a>, an in-browser code editor and development environment built with blocks.css. You can also check out <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.</p>
<div class="liveEditorContainer fixed wrapper block">
<iframe src="https://beta.codeframe.co/welcome?from=blocks.css" frameborder="0" class="liveEditor"></iframe>
</div>
<h2>Basics</h2>
<p>This is a blocky button. It's interactive –– try hovering and clicking on it.</p>
@ -129,6 +121,14 @@
</div>
<h2>Demo</h2>
<p>Here's <a href="https://beta.codeframe.co">Codeframe</a>, an in-browser code editor and development environment built with blocks.css. You can also check out <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.</p>
<div class="liveEditorContainer fixed wrapper block">
<iframe src="https://beta.codeframe.co/welcome?from=blocks.css" frameborder="0" class="liveEditor"></iframe>
</div>
<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>