Added support for .visible-* and .hidden-* classes
This commit is contained in:
Scott Warren
parent
25ffc989bf
commit
7396b956f1
21
stylesheets/skeleton.css
vendored
21
stylesheets/skeleton.css
vendored
@ -113,6 +113,10 @@
|
||||
.container-fluid .offset-by-fourteen { padding-left: 87.5%; }
|
||||
.container-fluid .offset-by-fifteen { padding-left: 93.75%; }
|
||||
|
||||
.visible-phone{display:none !important;}
|
||||
.visible-tablet{display:none !important;}
|
||||
.visible-desktop{display:inherit !important;}
|
||||
.hidden-desktop{display:none !important;}
|
||||
|
||||
/* #Tablet (Portrait)
|
||||
================================================== */
|
||||
@ -164,6 +168,12 @@
|
||||
.container .offset-by-thirteen { padding-left: 624px; }
|
||||
.container .offset-by-fourteen { padding-left: 672px; }
|
||||
.container .offset-by-fifteen { padding-left: 720px; }
|
||||
|
||||
.visible-phone{display:none !important;}
|
||||
.visible-tablet{display:inherit !important;}
|
||||
.visible-desktop{display:none !important;}
|
||||
.hidden-tablet{display:none !important;}
|
||||
.hidden-desktop{display:inherit !important;}
|
||||
}
|
||||
|
||||
|
||||
@ -256,7 +266,11 @@
|
||||
.container-fluid .offset-by-fifteen { padding-left: 0; }
|
||||
|
||||
|
||||
|
||||
.visible-phone{display:inherit !important;}
|
||||
.visible-tablet{display:none !important;}
|
||||
.visible-desktop{display:none !important;}
|
||||
.hidden-phone{display:none !important;}
|
||||
.hidden-desktop{display:inherit !important;}
|
||||
}
|
||||
|
||||
|
||||
@ -331,6 +345,11 @@
|
||||
.container-fluid .offset-by-fourteen,
|
||||
.container-fluid .offset-by-fifteen { padding-left: 0; }
|
||||
|
||||
.visible-phone{display:inherit !important;}
|
||||
.visible-tablet{display:none !important;}
|
||||
.visible-desktop{display:none !important;}
|
||||
.hidden-phone{display:none !important;}
|
||||
.hidden-desktop{display:inherit !important;}
|
||||
}
|
||||
|
||||
|
||||
|
||||
3
stylesheets/testing.css
Normal file
3
stylesheets/testing.css
Normal file
@ -0,0 +1,3 @@
|
||||
.test .columns{
|
||||
background-color:red;
|
||||
}
|
||||
113
testing.html
Normal file
113
testing.html
Normal file
@ -0,0 +1,113 @@
|
||||
<!DOCTYPE html>
|
||||
<!--[if lt IE 7 ]><html class="ie ie6" lang="en"> <![endif]-->
|
||||
<!--[if IE 7 ]><html class="ie ie7" lang="en"> <![endif]-->
|
||||
<!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]-->
|
||||
<!--[if (gte IE 9)|!(IE)]><!--><html lang="en" class="fullwidth"> <!--<![endif]-->
|
||||
<head>
|
||||
|
||||
<!-- Basic Page Needs
|
||||
================================================== -->
|
||||
<meta charset="utf-8">
|
||||
<title>Your Page Title Here :)</title>
|
||||
<meta name="description" content="">
|
||||
<meta name="author" content="">
|
||||
|
||||
<!-- Mobile Specific Metas
|
||||
================================================== -->
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
||||
|
||||
<!-- CSS
|
||||
================================================== -->
|
||||
<link rel="stylesheet" href="stylesheets/base.css">
|
||||
<link rel="stylesheet" href="stylesheets/skeleton.css">
|
||||
<link rel="stylesheet" href="stylesheets/layout.css">
|
||||
<link rel="stylesheet" href="stylesheets/testing.css">
|
||||
<!--[if lt IE 9]>
|
||||
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
|
||||
<![endif]-->
|
||||
|
||||
<!-- Favicons
|
||||
================================================== -->
|
||||
<link rel="shortcut icon" href="images/favicon.ico">
|
||||
<link rel="apple-touch-icon" href="images/apple-touch-icon.png">
|
||||
<link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png">
|
||||
<link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png">
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
||||
|
||||
<!-- Primary Page Layout
|
||||
================================================== -->
|
||||
|
||||
<!-- Delete everything in this .container and get started on your own site! -->
|
||||
|
||||
<div class="container">
|
||||
<div class="sixteen columns">
|
||||
<h1 class="remove-bottom" style="margin-top: 40px">Skeleton</h1>
|
||||
<h5>Version 1.2</h5>
|
||||
<hr />
|
||||
</div>
|
||||
<div class="one-third column">
|
||||
<h3>About Skeleton?</h3>
|
||||
<p>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.</p>
|
||||
</div>
|
||||
<div class="one-third column">
|
||||
<h3>Three Core Principles</h3>
|
||||
<p>Skeleton is built on three core principles:</p>
|
||||
<ul class="square">
|
||||
<li><strong>A Responsive Grid Down To Mobile</strong>: Elegant scaling from a browser to tablets to mobile.</li>
|
||||
<li><strong>Fast to Start</strong>: It's a tool for rapid development with best practices</li>
|
||||
<li><strong>Style Agnostic</strong>: It provides the most basic, beautiful styles, but is meant to be overwritten.</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="one-third column">
|
||||
<h3>Docs & Support</h3>
|
||||
<p>The easiest way to really get started with Skeleton is to check out the full docs and info at <a href="http://www.getskeleton.com">www.getskeleton.com.</a>. Skeleton is also open-source and has a <a href="https://github.com/dhgamache/skeleton">project on git</a>, 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 <a href="mailto:hi@getskeleton.com">hi@getskeleton.com</a>.</p>
|
||||
</div>
|
||||
|
||||
</div><!-- container -->
|
||||
|
||||
<div class="container-fluid">
|
||||
<div class="sixteen columns">Visible</div>
|
||||
<div class="one-third column visible-phone">Phone</div>
|
||||
<div class="one-third column hidden-phone"><span style="text-decoration: line-through;">Phone</span></div>
|
||||
<div class="one-third column visible-tablet">Tablet</div>
|
||||
<div class="one-third column hidden-tablet"><span style="text-decoration: line-through;">Tablet</span></div>
|
||||
<div class="one-third column visible-desktop">Desktop</div>
|
||||
<div class="one-third column hidden-desktop"><span style="text-decoration: line-through;">Desktop</span></div>
|
||||
</div>
|
||||
|
||||
<div class="container-fluid test">
|
||||
<div class="one columns">one</div><div class="fifteen columns">fifteen</div>
|
||||
<div class="two columns">two</div><div class="fourteen columns">fourteen</div>
|
||||
<div class="three columns">three</div><div class="thirteen columns">thirteen</div>
|
||||
<div class="four columns">four</div><div class="twelve columns">twelve</div>
|
||||
<div class="five columns">five</div><div class="eleven columns">eleven</div>
|
||||
<div class="six columns">six</div><div class="ten columns">ten</div>
|
||||
<div class="seven columns">seven</div><div class="nine columns">nine</div>
|
||||
<div class="eight columns">eight</div><div class="eight columns">eight</div>
|
||||
</div><!-- container -->
|
||||
<div class="container-fluid test">
|
||||
<div class="offset-by-one one columns">one</div><div class="fourteen columns">fourteen</div>
|
||||
<div class="offset-by-two one columns">two</div><div class="thirteen columns">thirteen</div>
|
||||
<div class="offset-by-three one columns">three</div><div class="twelve columns">twelve</div>
|
||||
<div class="offset-by-four one columns">four</div><div class="eleven columns">eleven</div>
|
||||
<div class="offset-by-five one columns">five</div><div class="ten columns">ten</div>
|
||||
<div class="offset-by-six one columns">six</div><div class="nine columns">nine</div>
|
||||
<div class="offset-by-seven one columns">seven</div><div class="eight columns">eight</div>
|
||||
<div class="offset-by-eight one columns">eight</div><div class="seven columns">seven</div>
|
||||
<div class="offset-by-nine one columns">nine</div><div class="six columns">six</div>
|
||||
<div class="offset-by-ten one columns">ten</div><div class="five columns">five</div>
|
||||
<div class="offset-by-eleven one columns">eleven</div><div class="four columns">four</div>
|
||||
<div class="offset-by-twelve one columns">tweleve</div><div class="three columns">three</div>
|
||||
<div class="offset-by-thirteen one columns">thirteen</div><div class="two columns">two</div>
|
||||
<div class="offset-by-fourteen one columns">fourteen</div><div class="one columns">one</div>
|
||||
<div class="offset-by-fifteen one columns">fifteen</div>
|
||||
</div><!-- container -->
|
||||
|
||||
<!-- End Document
|
||||
================================================== -->
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in New Issue
Block a user