diff --git a/docs/css/custom.css b/docs/css/custom.css deleted file mode 100644 index b84838a..0000000 --- a/docs/css/custom.css +++ /dev/null @@ -1,194 +0,0 @@ -.container { - max-width: 760px; } -.header { - margin-top: 6rem; - text-align: center; } -.value-prop { - margin-top: 1rem; } -.value-props { - margin-top: 4rem; - margin-bottom: 4rem; } -.docs-header { - text-transform: uppercase; - font-size: 1.4rem; - letter-spacing: .2rem; - font-weight: 600; } -.docs-section { - border-top: 1px solid #eee; - padding: 4rem 0; - margin-bottom: 0;} -.value-img { - display: block; - text-align: center; - margin: 2.5rem auto 0; } -.example-grid .column, -.example-grid .columns { - background: #EEE; - text-align: center; - border-radius: 4px; - font-size: 1rem; - text-transform: uppercase; - height: 30px; - line-height: 30px; - margin-bottom: .75rem; - font-weight: 600; - letter-spacing: .1rem; } -.docs-example .row, -.docs-example.row, -.docs-example form { - margin-bottom: 0; } -.docs-example h1, -.docs-example h2, -.docs-example h3, -.docs-example h4, -.docs-example h5, -.docs-example h6 { - margin-bottom: 1rem; } -.heading-font-size { - font-size: 1.2rem; - color: #999; - letter-spacing: normal; } -.code-example { - margin-top: 1.5rem; - margin-bottom: 0; } -.code-example-body { - white-space: pre; - word-wrap: break-word } -.navbar { - display: none; -} - -/* Larger than phone */ -@media (min-width: 550px) { - .header { - margin-top: 18rem; } - .value-props { - margin-top: 9rem; - margin-bottom: 7rem; } - .value-img { - margin-bottom: 1rem; } - .example-grid .column, - .example-grid .columns { - margin-bottom: 1.5rem; } - .docs-section { - padding: 6rem 0; } - .example-send-yourself-copy { - float: right; - margin-top: 12px; - } -} - -/* Larger than tablet */ -@media (min-width: 750px) { - /* Navbar */ - .navbar + .docs-section { - border-top-width: 0; } - .navbar, - .navbar-spacer { - display: block; - width: 100%; - height: 6.5rem; - background: #fff; - z-index: 99; - border-top: 1px solid #eee; - border-bottom: 1px solid #eee; } - .navbar-spacer { - display: none; } - .navbar > .container { - width: 100%; } - .navbar-list { - list-style: none; - margin-bottom: 0; } - .navbar-item { - position: relative; - float: left; - margin-bottom: 0; } - .navbar-link { - text-transform: uppercase; - font-size: 11px; - font-weight: 600; - letter-spacing: .2rem; - margin-right: 35px; - text-decoration: none; - line-height: 6.3rem; - color: #222; } - .navbar-link.active { - color: #33C3F0; } - .has-docked-nav .navbar { - position: fixed; - top: 0; - left: 0; } - .has-docked-nav .navbar-spacer { - display: block; } - /* Re-overiding the width 100% declaration to match size of % based container */ - .has-docked-nav .navbar > .container { - width: 80%; } - - /* Popover */ - .popover.open { - display: block; - } - .popover { - display: none; - position: absolute; - top: 0; - left: 0; - background: #fff; - border: 1px solid #eee; - border-radius: 4px; - top: 92%; - left: -50%; - -webkit-filter: drop-shadow(0 0 6px rgba(0,0,0,.1)); - -moz-filter: drop-shadow(0 0 6px rgba(0,0,0,.1)); - filter: drop-shadow(0 0 6px rgba(0,0,0,.1)); } - .popover-item:first-child .popover-link:after, - .popover-item:first-child .popover-link:before { - bottom: 100%; - left: 50%; - border: solid transparent; - content: " "; - height: 0; - width: 0; - position: absolute; - pointer-events: none; } - .popover-item:first-child .popover-link:after { - border-color: rgba(255, 255, 255, 0); - border-bottom-color: #fff; - border-width: 10px; - margin-left: -10px; } - .popover-item:first-child .popover-link:before { - border-color: rgba(238, 238, 238, 0); - border-bottom-color: #eee; - border-width: 11px; - margin-left: -11px; } - .popover-list { - padding: 0; - margin: 0; - list-style: none; } - .popover-item { - padding: 0; - margin: 0; } - .popover-link { - position: relative; - color: #222; - display: block; - padding: 8px 20px; - border-bottom: 1px solid #eee; - text-decoration: none; - text-transform: uppercase; - font-size: 1.0rem; - font-weight: 600; - text-align: center; - letter-spacing: .1rem; } - .popover-item:first-child .popover-link { - border-radius: 4px 4px 0 0; } - .popover-item:last-child .popover-link { - border-radius: 0 0 4px 4px; - border-bottom-width: 0; } - .popover-link:hover { - color: #fff; - background: #33C3F0; } - .popover-link:hover, - .popover-item:first-child .popover-link:hover:after { - border-bottom-color: #33C3F0; } -} \ No newline at end of file diff --git a/docs/css/github-prettify-theme.css b/docs/css/github-prettify-theme.css deleted file mode 100644 index 7dd0a0d..0000000 --- a/docs/css/github-prettify-theme.css +++ /dev/null @@ -1,149 +0,0 @@ -/* GitHub Theme */ -.prettyprint { - background: #fff; - font-family: Menlo, 'Bitstream Vera Sans Mono', 'DejaVu Sans Mono', Monaco, Consolas, monospace; - font-size: 1.2rem; - padding: 2.5rem 3rem; - -webkit-font-smoothing: antialiased; -} - -.pln { - color: #333333; -} - -@media screen { - .str { - color: #dd1144; - } - - .kwd { - color: #333333; - } - - .com { - color: #999988; - } - - .typ { - color: #445588; - } - - .lit { - color: #445588; - } - - .pun { - color: #333333; - } - - .opn { - color: #333333; - } - - .clo { - color: #333333; - } - - .tag { - color: navy; - } - - .atn { - color: teal; - } - - .atv { - color: #dd1144; - } - - .dec { - color: #333333; - } - - .var { - color: teal; - } - - .fun { - color: #990000; - } -} -@media print, projection { - .str { - color: #006600; - } - - .kwd { - color: #006; - font-weight: bold; - } - - .com { - color: #600; - font-style: italic; - } - - .typ { - color: #404; - font-weight: bold; - } - - .lit { - color: #004444; - } - - .pun, .opn, .clo { - color: #444400; - } - - .tag { - color: #006; - font-weight: bold; - } - - .atn { - color: #440044; - } - - .atv { - color: #006600; - } -} -/* Specify class=linenums on a pre to get line numbering */ -ol.linenums { - margin-top: 0; - margin-bottom: 0; -} - -/* IE indents via margin-left */ -li.L0, -li.L1, -li.L2, -li.L3, -li.L4, -li.L5, -li.L6, -li.L7, -li.L8, -li.L9 { - /* */ -} - -/* Alternate shading for lines */ -li.L1, -li.L3, -li.L5, -li.L7, -li.L9 { - /* */ -} - -/* My additional styles */ - -/*li.L0, li.L1, li.L2, li.L3, -li.L5, li.L6, li.L7, li.L8 -{ list-style-type: decimal !important }*/ - -.prettyprint li { - margin-bottom: .3rem; -} \ No newline at end of file diff --git a/docs/images/feather.svg b/docs/images/feather.svg deleted file mode 100644 index bb1e6fa..0000000 --- a/docs/images/feather.svg +++ /dev/null @@ -1,12 +0,0 @@ - - \ No newline at end of file diff --git a/docs/images/pens.svg b/docs/images/pens.svg deleted file mode 100644 index 8f94436..0000000 --- a/docs/images/pens.svg +++ /dev/null @@ -1,21 +0,0 @@ - - \ No newline at end of file diff --git a/docs/images/watch.svg b/docs/images/watch.svg deleted file mode 100644 index b6b16c6..0000000 --- a/docs/images/watch.svg +++ /dev/null @@ -1,18 +0,0 @@ - - \ No newline at end of file diff --git a/docs/index.html b/docs/index.html deleted file mode 100644 index 2d90b69..0000000 --- a/docs/index.html +++ /dev/null @@ -1,644 +0,0 @@ - - -
- - - -You should use Skeleton if you're overwhelmed by UI frameworks like Bootstrap and Foundation or if you're embarking on a smaller project. Skeleton only styles a handful of standard HTML elements and includes a grid, but that's often more than enough to get started. In fact, this site is built on Skeleton and has just over 100 lines of custom CSS.
-Love Skeleton and want to Tweet it, share it, or star it? Well, I appreciate that <3
- Tweet - - - - -The grid is a 12-column fluid grid with a max width of 960px, that shrinks with the browser/device at smaller sizes. The max width can be changed with one line of CSS and all columns will resize accordingly. The syntax is simple and it makes coding responsive much easier. Go ahead, resize the browser.
-
-
-
-
-
-
- One
- Eleven
-
-
-
-
- Two
- Ten
-
-
-
-
- 1/3
- 2/3
-
-
- 1/2
- 1/2
-
-
-
-
-
-
-
-
-
-
- Type is all set with the rems
, so font-sizes and spacial relationships can be responsively sized based on a single <html>
font-size property. Out of the box, Skeleton never changes the <html>
font-size, but it's there in case you need it for your project. All measurements are still base 10 though so, an <h1>
with 5.0rem
font-size just means 50px
.
The typography base is Raleway served by Google, set at 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>
15rem
-
-Heading
-Heading
-Heading
-Heading
-Heading
-Heading
-
-
-The base type is 15px over 1.6 line height (24px)
-
-
-Bolded
-Italicized
-Colored
-Underlined
-
-
-
-
-
- Buttons come in two basic flavors in Skeleton. The standard <button>
element is plain, whereas the .button-primary
button is vibrant and prominent. Button styles are applied to a number of appropriate form elements, but can also be arbitrarily attached to anchors with a .button
class.
-
-Anchor button
-
-
-
-
-
-Anchor button
-
-
-
-
-
-
-
-
- Forms are a huge pain, but hopefully these styles make it a bit easier. All inputs, select, and buttons are normalized for a common height cross-browser so inputs can be stacked or placed alongside each other.
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - Item 1
- -
- Item 2
-
- - Item 2.1
- - Item 2.2
-
-
- - Item 3
-
-
-
-
-
-
-
-
- Code styling is kept basic – just wrap anything in a <code>
and it will appear like this
. For blocks of code, wrap a <code>
with a <pre>
.
.some-class {
- background-color: red;
-}
-
-.some-class {
- background-color: red;
-}
-
-
-
-
-
-
-
- Be sure to use properly formed table markup with <thead>
and <tbody>
when building a table
.
Name | -Age | -Sex | -Location | -
---|---|---|---|
Dave Gamache | -26 | -Male | -San Francisco | -
Dwayne Johnson | -42 | -Male | -Hayward | -
-
-
-
- Name
- Age
- Sex
- Location
-
-
-
-
- Dave Gamache
- 26
- Male
- San Francisco
-
-
- Dwayne Johnson
- 42
- Male
- Hayward
-
-
-
-
-
-
-
-
- Skeleton uses media queries to serve its scalable grid, but also has a list of queries for convenience of styling your site across devices. There are two sets of queries. The first set is mobile-first, meaning it targets min-width
. The other set is desktop-first, meaning it targets max-width
. Mobile-first queries are how Skeleton's grid is built and is a preferrable method of organizing CSS. The sizes for the queries are:
-/* Mobile first queries */
-
-/* Larger than mobile */
-@media (min-width: 400px) {}
-
-/* Larger than phablet */
-@media (min-width: 550px) {}
-
-/* Larger than tablet */
-@media (min-width: 750px) {}
-
-/* Larger than desktop */
-@media (min-width: 1000px) {}
-
-/* Larger than Desktop HD */
-@media (min-width: 1200px) {}
-
-
-/* Desktop first queries */
-
-/* Smaller than Desktop HD */
-@media (max-width: 1199px) {}
-
-/* Smaller than desktop */
-@media (max-width: 999px) {}
-
-/* Smaller than tablet */
-@media (max-width: 749px) {}
-
-/* Smaller than phablet */
-@media (max-width: 549px) {}
-
-/* Smaller than mobile */
-@media (max-width: 399px) {}
-
-/* Note: Values are 1px less on desktop first queries so there's no overriding in case you use both types of queries */
-
-
-
-
-
- Skeleton has a number of small utility classes that act as easy-to-use helpers. Sometimes it's better to use a utility class than create a whole new class just to float an element.
- - - -
-/* Utility Classes */
-
-/* Make element full width */
-.u-full-width {
- width: 100%;
- box-sizing: border-box; }
-
-/* Make sure elements don't run outside containers (great for images in columns) */
-.u-max-full-width {
- max-width: 100%;
- box-sizing: border-box; }
-
-/* Float either direction */
-.u-pull-right {
- float: right; }
-.u-pull-left {
- float: left; }
-
-/* Clear a float */
-.u-cf {
- content: "";
- display: table;
- clear: both; }
-
-
-
-
-
- This index.html page is a placeholder with the CSS, font and favicon. It's just waiting for you to add some content! If you need some help hit up the Skeleton documentation.
+