-
+
One
Eleven
@@ -218,7 +218,7 @@
-
+
@@ -227,7 +227,7 @@
-
+
Typography
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
.
@@ -274,7 +274,7 @@
-
+
Buttons
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.
@@ -314,7 +314,7 @@
-
+
Forms
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.
@@ -437,7 +437,7 @@
-
+
Code
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>
.
@@ -462,7 +462,7 @@
-
+
Tables
Be sure to use properly formed table markup with <thead>
and <tbody>
when building a table
.
@@ -527,7 +527,7 @@
-
+
Media queries
Skeleton uses media queries to serve its scalable grid, but also has a list of queries for convenience of styling your site across devices. The queries are mobile-first, meaning they target min-width
. Mobile-first queries are how Skeleton's grid is built and is the preferrable method of organizing CSS. It means all styles outside of a query apply to all devices, then larger devices are targeted for enhancement. This prevents small devices from having to parse tons of unused CSS. The sizes for the queries are:
@@ -576,7 +576,7 @@
-
+
Utilities
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.