BitGoblin/Bones
1
0
Fork 0
Code Issues 5 Pull Requests Packages Projects Releases Wiki Activity

Added various visibility classes to give the developer the ability to cull elements in accordance to the device screen size

Browse Source
This commit is contained in:
Greg Joy 2013-06-15 23:21:28 +01:00
parent 7ab682091d
commit c99162cd27
1 changed files with 73 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

73
stylesheets/skeleton.css vendored
View File

@ -69,7 +69,24 @@
.container .offset-by-fourteen { padding-left: 840px; } .container .offset-by-fourteen { padding-left: 840px; }
.container .offset-by-fifteen { padding-left: 900px; } .container .offset-by-fifteen { padding-left: 900px; }
/* Visibility */
.container .display-only-desktop { display: block !important; visibility: visible;}
.container .display-only-tablet { display: none !important; visibility: hidden; }
.container .display-only-mobile { display: none !important; visibility: hidden; }
.container .display-only-mobile-portrait { display: none !important; visibility: hidden; }
.container .display-only-mobile-landscape { display: none !important; visibility: hidden; }
.container .display-tablet-up { display: block !important; visibility: visible; }
.container .display-tablet-down { display: none !important; visibility: hidden; }
.container .hide-only-desktop { display: none !important; visibility: hidden;}
.container .hide-only-tablet { display: block !important; visibility: visible; }
.container .hide-only-mobile { display: block !important; visibility: visible; }
.container .hide-only-mobile-portrait { display: block !important; visibility: visible; }
.container .hide-only-mobile-landscape { display: block !important; visibility: visible; }
.container .hide-tablet-up { display: none !important; visibility: hidden; }
.container .hide-tablet-down { display: block !important; visibility: visible; }
/* #Tablet (Portrait) /* #Tablet (Portrait)
================================================== */ ================================================== */
@ -121,6 +138,25 @@
.container .offset-by-thirteen { padding-left: 624px; } .container .offset-by-thirteen { padding-left: 624px; }
.container .offset-by-fourteen { padding-left: 672px; } .container .offset-by-fourteen { padding-left: 672px; }
.container .offset-by-fifteen { padding-left: 720px; } .container .offset-by-fifteen { padding-left: 720px; }
/* Visibility */
.container .display-only-desktop { display: none !important; visibility: hidden;}
.container .display-only-tablet { display: block !important; visibility: visible; }
.container .display-only-mobile { display: none !important; visibility: hidden; }
.container .display-only-mobile-portrait { display: none !important; visibility: hidden; }
.container .display-only-mobile-landscape { display: none !important; visibility: hidden; }
.container .display-tablet-up { display: block !important; visibility: visible; }
.container .display-tablet-down { display: block !important; visibility: visible; }
.container .hide-only-desktop { display: block !important; visibility: visible;}
.container .hide-only-tablet { display: none !important; visibility: hidden; }
.container .hide-only-mobile { display: block !important; visibility: visible; }
.container .hide-only-mobile-portrait { display: block !important; visibility: visible; }
.container .hide-only-mobile-landscape { display: block !important; visibility: visible; }
.container .hide-tablet-up { display: none !important; visibility: hidden; }
.container .hide-tablet-down { display: none !important; visibility: hidden; }
} }
@ -171,6 +207,24 @@
.container .offset-by-fourteen, .container .offset-by-fourteen,
.container .offset-by-fifteen { padding-left: 0; } .container .offset-by-fifteen { padding-left: 0; }
/* Visibility */
.container .display-only-desktop { display: none !important; visibility: hidden;}
.container .display-only-tablet { display: none !important; visibility: hidden; }
.container .display-only-mobile { display: block !important; visibility: visible; }
.container .display-only-mobile-portrait { display: block !important; visibility: visible; }
.container .display-only-mobile-landscape { display: none !important; visibility: hidden; }
.container .display-tablet-up { display: none !important; visibility: hidden; }
.container .display-tablet-down { display: block !important; visibility: visible; }
.container .hide-only-desktop { display: block !important; visibility: visible;}
.container .hide-only-tablet { display: block !important; visibility: visible; }
.container .hide-only-mobile { display: none !important; visibility: hidden; }
.container .hide-only-mobile-portrait { display: none !important; visibility: hidden; }
.container .hide-only-mobile-landscape { display: block !important; visibility: visible; }
.container .hide-tablet-up { display: block !important; visibility: visible; }
.container .hide-tablet-down { display: none !important; visibility: hidden; }
} }
@ -203,6 +257,25 @@
.container .sixteen.columns, .container .sixteen.columns,
.container .one-third.column, .container .one-third.column,
.container .two-thirds.column { width: 420px; } .container .two-thirds.column { width: 420px; }
/* Visibility */
.container .display-only-desktop { display: none !important; visibility: hidden;}
.container .display-only-tablet { display: none !important; visibility: hidden; }
.container .display-only-mobile { display: block !important; visibility: visible; }
.container .display-only-mobile-portrait { display: none !important; visibility: hidden; }
.container .display-only-mobile-landscape { display: block !important; visibility: visible; }
.container .display-tablet-up { display: none !important; visibility: hidden; }
.container .display-tablet-down { display: block !important; visibility: visible; }
.container .hide-only-desktop { display: block !important; visibility: visible;}
.container .hide-only-tablet { display: block !important; visibility: visible; }
.container .hide-only-mobile { display: none !important; visibility: hidden; }
.container .hide-only-mobile-portrait { display: block !important; visibility: visible; }
.container .hide-only-mobile-landscape { display: none !important; visibility: hidden; }
.container .hide-tablet-up { display: block !important; visibility: visible; }
.container .hide-tablet-down { display: none !important; visibility: hidden; }
} }