Use the .width-[width] .w-[width] class on elements under a container with the .grid class. For example, .w-10 and .w-80
10%
90%
20%
80%
30%
70%
40%
60%
50%
50%
60%
40%
70%
30%
80%
20%
90%
10%
1/2
1/2
1/3
1/3
1/3
1/4
1/4
1/4
1/4
1/5
1/5
1/5
1/5
1/5
First column
Second column
Hello
there
my old
friend
1/3
2/3
nested A 1/2
nested A 1/2
nested B 1/3
nested B 2/3
nested C 1/3
nested C 2/3
nested D 1/2
nested D 1/2
The code above renders the following result:
First column
Second column
Hello
there
my old
friend
1/3
2/3
nested A 1/2
nested A 1/2
nested B 1/3
nested B 2/3
nested C 1/3
nested C 2/3
nested D 1/2
nested D 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.0remfont-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.
The default.
Add a `aligned` class to the form element, and voilá.
- 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>.
Un poco de código inline como este: $ sh foo.sh 2> /dev/null funciona bien.
Un comando con varias lineas se pone en un pre:
curl \ -i \ -H "Authorization: Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiJ9.eyJhdXR" \ http://localhost:5001/v1
Y para que tenga fondo se mete un code dentro del pre:
.content {
background-color: red;
}
.content {
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
Yes. It adheres to the WAI-ARIA design pattern.
Yes. It's unstyled by default, giving you freedom over the look and feel.
Yes! You can use the transition prop to configure the animation.
Is it accessible?
Yes. It adheres to the WAI-ARIA design pattern.
Is it unstyled?
Yes. It's unstyled by default, giving you freedom over the look and feel.
Can it be animated?
Yes! You can use the transition prop to configure the animation.
Notice (default), warning, success and error. Can optionally have a close button (either a BUTTON or an A tag) at the left or right.
This is very important.
This is very important.
In light and dark modes.
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.
/* Helper Classes */
.left { float: left !important; clear: left; }
.right { float: right !important; clear: right; }
.center { float: none; margin-left: auto; margin-right: auto; }
.clear { clear: both; }
.visible { display: inherit !important; }
.hidden { display: none !important; }
.invisible { visibility: hidden; }
.block { display: block !important; }
.inline { display: inline-block !important; *display: inline; /*IE 6/7*/ }
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-upper { text-transform: uppercase; }
.text-lower { text-transform: lowercase; }
.hidden-phone { }
.visible-phone { }
.hidden-tablet { }
.visible-tablet { }
.hidden-desktop { }
.visible-desktop { }