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

Update README and documentation to reference the unpkg distribution

Browse Source
This commit is contained in:
Linus Lee 2019-06-11 23:53:10 -07:00
parent 8be3a938f0
commit 46f0b365aa
2 changed files with 11 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
README.md
View File

@ -6,6 +6,12 @@ You can check out examples and get started with **blocks.css** at the [GitHub Pa
![blocks.css sample](sample.jpg)
Start by adding the blocks.css stylesheet to your page's head:
```html
<link rel="stylesheet" href="https://unpkg.com/blocks.css/dist/blocks.min.css" />
```
## 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.

10
index.html
View File

@ -14,6 +14,10 @@
<h2>Basics</h2>
<p>blocks.css is a single stylesheet. Get started by adding the stylesheet to your page's head.</p>
<pre>&lt;link rel="stylesheet" href="https://unpkg.com/blocks.css/dist/blocks.min.css" /&gt;</pre>
<p>This is a blocky button. It's interactive –– try hovering and clicking on it.</p>
<button class="block">Hello, World!</button>
@ -125,11 +129,7 @@
<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>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.</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>