mirror of
https://github.com/thesephist/blocks.css.git
synced 2024-09-11 19:27:08 +03:00
Update README and documentation to reference the unpkg distribution
This commit is contained in:
parent
8be3a938f0
commit
46f0b365aa
@ -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
10
index.html
@ -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><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>
|
||||
|
||||
@ -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>
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user