diff --git a/README.md b/README.md new file mode 100644 index 0000000..17c7fbc --- /dev/null +++ b/README.md @@ -0,0 +1,52 @@ +# [Skeleton](http://getskeleton.com) +Skeleton is a simple, responsive boilerplate to kickstart any responsive project. + +Check out for documentation and details. + +## Getting started + +There are a couple ways to download Skeleton: +- [Download the tarball from Github](). +- Clone the repo: `git clone https://github.com/twbs/bootstrap.git`. + + +### What's in the download? + +The download includes Skeleton's CSS, Normalize CSS as a reset, a sample favicon, and an index.html as a starting point. + +``` +skeleton/ +├── index.html +├── css/ +│ ├── normalize.min.css +│ ├── skeleton.css +│ └── skeleton.min.css +└── images/ + └── favicon.ico +``` + +### Why it's awesome + +Skeleton is lightweight and simple. It styles only raw HTML elements (with a few exceptions) and provides a responsive grid. Nothing more. +- Minified, it's less than a kb +- It's a starting point, not a UI framework +- No compiling or installing...just vanilla CSS + + +## Browser support + +- Chrome +- Firefox 5+ +- Opera +- Safari 6+ +- IE 8+ + + +## Acknowledgement + +Skeleton was created by [Dave Gamache](https://twitter.com/dhg). + + +## License + +All parts of Skeleton are free to use and abuse under the [open-source MIT license](http://opensource.org/licenses/mit-license.php). \ No newline at end of file diff --git a/index.html b/index.html index b219e70..5a92fc0 100644 --- a/index.html +++ b/index.html @@ -259,23 +259,64 @@
- - + +
- - + +
- - - -
+ + + +
+ + + +
+
+

+  

+    

+      
+      
+    

+    

+      
+      
+    

+  

+  
+  
+  
+  
+

+
+
+
+
+
+
+ + + @@ -309,6 +350,28 @@ + + + +
+
    
+  
  • Item 1
    • 
+  
  • 
+    Item 2
+    
      
+      
    • Item 2.1
      • 
+      
    • Item 2.2
      • 
+    
    
+  
    • 
+  
  • Item 3
    • 
+

+
+
+
+
+ + + @@ -316,14 +379,30 @@
Code

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, wrap a <code> tag with a <pre> tag.

- 
.some-class {
  background-color: red
}
+
.some-class {
+  background-color: red;
+}
+ + + +
+
.some-class {
+  background-color: red;
+}

+
+
+
+
+ + +
Tables
-

Only most basic styling for tabular data. Remember to always use a proper table structure – check the code example if you're not sure about it.

+

Only super basic styling for tabular data. Using properly formed table markup with <thead> and <tbody> is important here.

@@ -350,6 +429,39 @@
+ + + +
+
+  
+    
+      
+      
+      
+      
+    
+  
+  
+    
+      
+      
+      
+      
+    
+    
+      
+      
+      
+      
+    
+  
+
NameAgeSexLocation
Dave Gamache26MaleSan Francisco
Dwayne Johnson42MaleHayward

+
+
+ + +
@@ -371,6 +483,51 @@ + + + +
+/* 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  */
+
+
+ + + @@ -382,6 +539,7 @@
License & Log

All parts of Skeleton are free to use and abuse under the open-source MIT license. More importantly, if you're into coding head over to the Github page and contribute or fork this bad boy.

+

Skeleton's version history is available on Github.

diff --git a/stylesheets/custom.css b/stylesheets/custom.css index 005eaab..8725f58 100644 --- a/stylesheets/custom.css +++ b/stylesheets/custom.css @@ -53,6 +53,8 @@ } .code-example-body { white-space: pre; + /*overflow: auto;*/ + word-wrap: break-word } .code-snippets-visible .code-example { display: block; diff --git a/stylesheets/skeleton.css b/stylesheets/skeleton.css index e9fae80..5dae9af 100644 --- a/stylesheets/skeleton.css +++ b/stylesheets/skeleton.css @@ -185,7 +185,8 @@ select { height: 36px; padding: 0 10px; border-radius: 4px; - box-shadow: none; } + box-shadow: none; + background: #fff; } textarea { min-height: 65px; padding-top: 6px; @@ -249,7 +250,7 @@ code { pre > code { display: block; padding: 1rem 1.5rem; - white-space: normal; } + white-space: pre; } /* Tables @@ -324,20 +325,21 @@ on small devices, paste the mobile query code up in the buttons secion and style there. */ -/* Larger than Desktop HD */ -@media (min-width: 1200px) {} -/* Larger than desktop */ -@media (min-width: 1000px) {} - -/* Larger than tablet */ -@media (min-width: 750px) {} +/* Larger than mobile */ +@media (min-width: 400px) {} /* Larger than phablet */ @media (min-width: 550px) {} -/* Larger than mobile */ -@media (min-width: 400px) {} +/* Larger than tablet */ +@media (min-width: 750px) {} + +/* Larger than desktop */ +@media (min-width: 1000px) {} + +/* Larger than Desktop HD */ +@media (min-width: 1200px) {} /* Smaller than Desktop HD */ @media (max-width: 1199px) {}