Compare commits
No commits in common. "ufdfd" and "v1" have entirely different histories.
|
|
@ -1,33 +1 @@
|
|||
# ---> SublimeText
|
||||
# Cache files for Sublime Text
|
||||
*.tmlanguage.cache
|
||||
*.tmPreferences.cache
|
||||
*.stTheme.cache
|
||||
|
||||
# Workspace files are user-specific
|
||||
*.sublime-workspace
|
||||
|
||||
# Project files should be checked into the repository, unless a significant
|
||||
# proportion of contributors will probably not be using Sublime Text
|
||||
# *.sublime-project
|
||||
|
||||
# SFTP configuration file
|
||||
sftp-config.json
|
||||
sftp-config-alt*.json
|
||||
|
||||
# Package control specific files
|
||||
Package Control.last-run
|
||||
Package Control.ca-list
|
||||
Package Control.ca-bundle
|
||||
Package Control.system-ca-bundle
|
||||
Package Control.cache/
|
||||
Package Control.ca-certs/
|
||||
Package Control.merged-ca-bundle
|
||||
Package Control.user-ca-bundle
|
||||
oscrypto-ca-bundle.crt
|
||||
bh_unicode_properties.cache
|
||||
|
||||
# Sublime-github package stores a github token in this file
|
||||
# https://packagecontrol.io/packages/sublime-github
|
||||
GitHub.sublime-settings
|
||||
|
||||
.DS_Store
|
||||
11
LICENSE
11
LICENSE
|
|
@ -1,11 +0,0 @@
|
|||
DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE
|
||||
Version 2, December 2004
|
||||
|
||||
Copyright (C) 2004 Sam Hocevar <sam@hocevar.net>
|
||||
|
||||
Everyone is permitted to copy and distribute verbatim or modified copies of this license document, and changing it is allowed as long as the name is changed.
|
||||
|
||||
DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE
|
||||
TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION
|
||||
|
||||
0. You just DO WHAT THE FUCK YOU WANT TO.
|
||||
|
|
@ -1,3 +1,12 @@
|
|||
# c.ferdinandi-s_tabby
|
||||
# Tabby - Simple, mobile-first toggle tabs.
|
||||
Tabby is a lightweight JavaScript and CSS kit for mobile-first toggle tabs. It's style-light so you can easily modify it to fit your design.
|
||||
|
||||
tabby cat
|
||||
## How It Works
|
||||
Getting started with Tabby is really easy. [View the online tutorial](http://cferdinandi.github.com/tabby/) or dig through the example.html file.
|
||||
|
||||
## Changelog
|
||||
* 01/22/2013
|
||||
* Initial release.
|
||||
|
||||
## License
|
||||
Tabby is licensed under the [WTFPL](http://www.wtfpl.net/) + "Not going to maintain this because the rent is too damn high" License.
|
||||
|
|
|
|||
|
|
@ -0,0 +1,135 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Tabby - Simple, mobile-first toggle tabs</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
||||
<!-- stylesheets -->
|
||||
<link rel="stylesheet" href="tabby.css" type="text/css" />
|
||||
|
||||
<!-- HTML5 Shim for IE -->
|
||||
<!--[if IE]>
|
||||
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
|
||||
<![endif]-->
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<section class="container">
|
||||
<h1 style="text-align: center; font-size: 3em;">Tabby</h1>
|
||||
<p style="text-align: center; font-size: 1.5em;">Simple, mobile-first toggle tabs.</p>
|
||||
|
||||
<p>There are three types of tabs: Basic, Horizontal, and Stacked.</p>
|
||||
|
||||
<hr>
|
||||
|
||||
|
||||
|
||||
<h1>Basic Tabs</h1>
|
||||
|
||||
<p>These use basic, inline hyperlinks. Add the <code>.active</code> class to the tab content you want to display by default.</p>
|
||||
|
||||
|
||||
<div class="tabs">
|
||||
<a href="#tab1">Superheroes</a>
|
||||
<a href="#tab2">Ice Cream</a>
|
||||
<a href="#tab3">Seasons</a>
|
||||
</div>
|
||||
|
||||
<div class="tabs-content">
|
||||
<div class="tabs-pane active" id="tab1">
|
||||
<p><strong>Superheros</strong></p>
|
||||
<p>Spiderman, Batman, or Iron Man... which one is your favorite?</p>
|
||||
</div>
|
||||
|
||||
<div class="tabs-pane" id="tab2">
|
||||
<p><strong>Ice Cream</strong></p>
|
||||
<p>Chocolate, vanilla or strawberry?</p>
|
||||
</div>
|
||||
|
||||
<div class="tabs-pane" id="tab3">
|
||||
<p><strong>Seasons</strong></p>
|
||||
<p>Winter, summer, spring or fall?</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
|
||||
|
||||
|
||||
<h1>Horizontal Tabs</h1>
|
||||
|
||||
<p>Styled navigation that displays horizontally. Add the <code>.active</code> class to the current <code><li></code> in the navigation to apply special styling.</p>
|
||||
|
||||
<ul class="tabs tabs-horizontal">
|
||||
<li class="active"><a href="#tabA">Superheroes</a></li>
|
||||
<li><a href="#tabB">Ice Cream</a></li>
|
||||
<li><a href="#tabC">Seasons</a></li>
|
||||
</ul>
|
||||
|
||||
<div class="tabs-content">
|
||||
<div class="tabs-pane active" id="tabA">
|
||||
<p><strong>Superheros</strong></p>
|
||||
<p>Spiderman, Batman, or Iron Man... which one is your favorite?</p>
|
||||
</div>
|
||||
|
||||
<div class="tabs-pane" id="tabB">
|
||||
<p><strong>Ice Cream</strong></p>
|
||||
<p>Chocolate, vanilla or strawberry?</p>
|
||||
</div>
|
||||
|
||||
<div class="tabs-pane" id="tabC">
|
||||
<p><strong>Seasons</strong></p>
|
||||
<p>Winter, summer, spring or fall?</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
|
||||
|
||||
|
||||
<h1>Stacked Tabs</h1>
|
||||
|
||||
<p>On smaller screens, stacked tabs mimic the appearance of horizontal tabs. On bigger screens, navigation appears in a vertical stack next to the content.</p>
|
||||
|
||||
<p>This demo uses <a href="http://cferdinandi.github.com/origami/">Origami.css</a>, a fluid, mobile-first grid system, to align the navigation. Feel free to use whatever grid you prefer.</p>
|
||||
|
||||
<div class="row">
|
||||
<div class="grid-2">
|
||||
<ul class="tabs tabs-stacked">
|
||||
<li class="active"><a href="#tabHero">Superheroes</a></li>
|
||||
<li><a href="#tabIC">Ice Cream</a></li>
|
||||
<li><a href="#tabSeasons">Seasons</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="grid-4">
|
||||
<div class="tabs-content">
|
||||
<div class="tabs-pane active" id="tabHero">
|
||||
<p><strong>Superheros</strong></p>
|
||||
<p>Spiderman, Batman, or Iron Man... which one is your favorite?</p>
|
||||
</div>
|
||||
|
||||
<div class="tabs-pane" id="tabIC">
|
||||
<p><strong>Ice Cream</strong></p>
|
||||
<p>Chocolate, vanilla or strawberry?</p>
|
||||
</div>
|
||||
|
||||
<div class="tabs-pane" id="tabSeasons">
|
||||
<p><strong>Seasons</strong></p>
|
||||
<p>Winter, summer, spring or fall?</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
<!-- Javascript -->
|
||||
<script src="http://code.jquery.com/jquery-1.9.0.min.js"></script>
|
||||
<script type='text/javascript' src='tabby.js'></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,262 @@
|
|||
/*
|
||||
|
||||
TABBY.CSS v1.0
|
||||
Simple, mobile-first toggle tabs by Chris Ferdinandi.
|
||||
http://gomakethings.com
|
||||
|
||||
|
||||
Licensed under WTFPL.
|
||||
http://www.wtfpl.net/
|
||||
|
||||
|
||||
*/
|
||||
|
||||
/* RESPONSIVE RESET */
|
||||
/* Replace with your own */
|
||||
|
||||
@-webkit-viewport { width: device-width; zoom: 1.0; }
|
||||
@-moz-viewport { width: device-width; zoom: 1.0; }
|
||||
@-ms-viewport { width: device-width; zoom: 1.0; }
|
||||
@-o-viewport { width: device-width; zoom: 1.0; }
|
||||
@viewport { width: device-width; zoom: 1.0; }
|
||||
|
||||
html { overflow-y: auto; }
|
||||
|
||||
img, audio, video, canvas { max-width: 100%; }
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/* TABBY TABS */
|
||||
/* The toggle tabs code */
|
||||
|
||||
/* Hide tab navigation by default */
|
||||
.tabs {
|
||||
display: none;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
/* Display tab navigation if javascript enabled.
|
||||
* This requires on the included accessibility-styles.js script. */
|
||||
.js .tabs {
|
||||
display: block;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
/* Force browser to show a pointer on tab navigation. */
|
||||
.tabs a, .tabs button {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* Hide tab content if javascript is enabled. */
|
||||
.js .tabs-pane {
|
||||
display: none;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
/* Show tab content when active class is added.
|
||||
* This class is added via javascript. */
|
||||
.tabs-pane.active {
|
||||
display: block;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
/* Fancy list styling for tab navigation.
|
||||
* Adjust to fit your design. */
|
||||
.tabs-horizontal,
|
||||
.tabs-stacked {
|
||||
list-style: none;
|
||||
margin-left: 0;
|
||||
border-top: 1px solid #808080;
|
||||
background-color: #f4f4f4;
|
||||
}
|
||||
|
||||
/* Display tab navigation as inline list. */
|
||||
.tabs-horizontal > li,
|
||||
.tabs-stacked > li {
|
||||
display: inline-block;
|
||||
float: none;
|
||||
padding: .5em 1em;
|
||||
}
|
||||
|
||||
/* Set tab navigation link color.
|
||||
* Adjust to fit your design. */
|
||||
.tabs-horizontal a,
|
||||
.tabs-stacked a {
|
||||
color: #808080;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/* When active, change tab navigation background color. */
|
||||
.tabs-horizontal > .active,
|
||||
.tabs-stacked > .active {
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
/* On hover and when active, change tab navigation color */
|
||||
.tabs-horizontal a:hover,
|
||||
.tabs-stacked a:hover,
|
||||
.tabs-horizontal > .active > a,
|
||||
.tabs-stacked > .active > a {
|
||||
color: #272727;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/* For bigger screens.
|
||||
* (Tabby is mobile-first.) */
|
||||
@media (min-width: 681px) {
|
||||
|
||||
/* Turn stacked nav into vertical list. */
|
||||
.tabs-stacked {
|
||||
border: none;
|
||||
margin-left: 0;
|
||||
padding-left: 0;
|
||||
padding-top: 1em;
|
||||
padding-bottom: 1em;
|
||||
}
|
||||
|
||||
.tabs-stacked > li,
|
||||
.tabs-stacked > li > a {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/* THE GRID */
|
||||
/* Origami.css - http://cferdinandi.github.com/origami/
|
||||
* Not required. Feel free to use your own.
|
||||
*/
|
||||
|
||||
/* Mobile-first. Single-column layout by default
|
||||
* Container sets the maximum page width. Adjust as needed. */
|
||||
.container {
|
||||
max-width: 640px;
|
||||
width: 88%;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
|
||||
/* Still mostly single-column.
|
||||
* Grid-third, grid-half, and grid-img
|
||||
* provide sub-gridding on smaller screens. */
|
||||
@media (min-width: 481px) {
|
||||
|
||||
.row {
|
||||
margin-left: -1.515151515152%;
|
||||
margin-right: -1.515151515152%;
|
||||
}
|
||||
|
||||
[class^="grid-"],
|
||||
[class*=" grid-"] {
|
||||
float: left;
|
||||
width:96.969696969697%;
|
||||
margin-left: 1.515151515152%;
|
||||
margin-right: 1.515151515152%;
|
||||
}
|
||||
|
||||
.grid-third {
|
||||
width: 30.30303030303%;
|
||||
}
|
||||
|
||||
.grid-half,
|
||||
.grid-img {
|
||||
width: 46.969696969697%;
|
||||
}
|
||||
|
||||
/* Reverses order of grid for content choreography */
|
||||
.grid-flip {
|
||||
float: right;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
/* 6-column grid */
|
||||
@media (min-width: 681px) {
|
||||
|
||||
.grid-1 {
|
||||
width: 13.636363636364%;
|
||||
}
|
||||
|
||||
.grid-2,
|
||||
.grid-third,
|
||||
.grid-img {
|
||||
width: 30.30303030303%;
|
||||
}
|
||||
|
||||
.grid-3,
|
||||
.grid-half {
|
||||
width: 46.969696969697%;
|
||||
}
|
||||
|
||||
.grid-4 {
|
||||
width: 63.636363636364%;
|
||||
}
|
||||
|
||||
.grid-5 {
|
||||
width: 80.30303030303%;
|
||||
}
|
||||
|
||||
.grid-6,
|
||||
.grid-full {
|
||||
width: 96.969696969697%;
|
||||
}
|
||||
|
||||
|
||||
/* Offets let you shift grid elements to the right
|
||||
* but stay aligned to the grid. */
|
||||
.offset-1 {
|
||||
margin-left: 18.181818181818%;
|
||||
}
|
||||
|
||||
.offset-2 {
|
||||
margin-left: 34.848484848485%;
|
||||
}
|
||||
|
||||
.offset-3 {
|
||||
margin-left: 51.515151515152%;
|
||||
}
|
||||
|
||||
.offset-4 {
|
||||
margin-left: 68.181818181818%;
|
||||
}
|
||||
|
||||
.offset-5 {
|
||||
margin-left: 84.848484848485%;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
/* Additional gridding for grid-img on bigger screens.
|
||||
* Adjust as needed. */
|
||||
@media (min-width: 961px) {
|
||||
.grid-img {
|
||||
width: 13.636363636364%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* Clearfix */
|
||||
|
||||
.tabs:before, .tabs:after,
|
||||
.container:before, .container:after,
|
||||
.row:before, .row:after {
|
||||
display: table;
|
||||
content: "";
|
||||
zoom: 1;
|
||||
}
|
||||
|
||||
.tabs:after,
|
||||
.container:after,
|
||||
.row:after {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
/* =============================================================
|
||||
* tabby.js v1.0
|
||||
* Simple, mobile-first toggle tabs.
|
||||
* Script by Chris Ferdinandi - http://gomakethings.com
|
||||
* Licensed under WTFPL - http://www.wtfpl.net
|
||||
* ============================================================= */
|
||||
|
||||
$(function () {
|
||||
$('.tabs a').click(function(e) {
|
||||
e.preventDefault(); // Prevent default link behavior.
|
||||
var tabID = $(this).attr('href'); // Pull the href value as the tabID.
|
||||
|
||||
$(this).addClass('active').parent().addClass('active'); // Add the .active class to the link and it's parent li (if one exists).
|
||||
$(this).siblings().removeClass('active'); // Remove the .active class from sibling tab navigation elements.
|
||||
$(this).parent('li').siblings().removeClass('active').children().removeClass('active'); // Remove the .active class from sibling li elements and their links.
|
||||
$(tabID).addClass('active'); // Add the .active class to the div with the tab content.
|
||||
$(tabID).siblings().removeClass('active'); // Remove the .active class from other tab content divs.
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/* =============================================================
|
||||
* accessibility-styles.js v1.0.0
|
||||
* Adds .js class to <body> for progressive enhancement.
|
||||
* Script by Chris Ferdinandi - http://gomakethings.com
|
||||
* Licensed under WTFPL - http://www.wtfpl.net
|
||||
* ============================================================= */
|
||||
|
||||
$(function () {
|
||||
$('body').addClass('js'); // On page load, add the .js class to the <body> element.
|
||||
});
|
||||
Loading…
Reference in New Issue