diff --git a/images/frame.svg b/images/frame.svg new file mode 100644 index 0000000..21350ac --- /dev/null +++ b/images/frame.svg @@ -0,0 +1,19 @@ + + \ No newline at end of file diff --git a/index.html b/index.html index 29b1dc1..f0c5b93 100644 --- a/index.html +++ b/index.html @@ -6,28 +6,34 @@
+ –––––––––––––––––––––––––––––––––––––––––––––––––– -->Skeleton is a small collection of well-organized CSS files that can help you rapidly develop sites that look beautiful at any size, be it a 17" laptop screen or an iPhone. It's based on a responsive grid, but also provides very basic CSS for typography, buttons, forms and media queries. Go ahead, resize this super basic page to see the grid in action.
-Skeleton is built on three core principles:
-The easiest way to really get started with Skeleton is to check out the full docs and info at www.getskeleton.com.. Skeleton is also open-source and has a project on git, so check that out if you want to report bugs or create a pull request. If you have any questions, thoughts, concerns or feedback, please don't hesitate to email me at hi@getskeleton.com.
+You should use Skeleton if you're feeling like whole UI frameworks like Bootstrap, Foundation, and Pure are overkill for your projects and you just want the basics. Just styling the 80+ standard HTML elements (<button>, <p>, <nav>, …) can get you really far. For what it's worth, this site is built on Skeleton and only requires ~100 lines of additional CSS.
+The grid is just a 12-column fluid grid with a max width of 960px (but this can be changed with one line of CSS). The syntax is simple and it makes responsive implementation much, much easier. Go ahead, resize the browser.
+Type is all set with the rems
, so font-sizes and spacial relationships are responsively sized based on a single <html>
font-size property. Everything is still base 10 though so, an <h1>
is 5.0rem
, which just means 50px
.
The typography base is 15rem (15px) over a 1.6 line height (24px). Other type basics like anchors, strong, emphasis, and underline are all obviously included.
+Headings create a family of distinct sizes each with specific letter-spacing
, line-height
, and margins
.
<h1>
50rem<h2>
42rem<h3>
36rem<h4>
30rem<h5>
24rem<h6>
15remButtons come in two basic flavors in Skeleton. The standard <button>
element is vibrant, whereas the .secondary
button takes a monotone backseat.
Code styling was kept super basic – basically just wrap something in a <code>
tag and it will look just like that code tag just did. For blocks of code just use a <pre>
tag.
.some-class {+
background-color: red
}
hrs, images
+