tfelypoc/c.ferdinandi-s_tabby
tfelypoc/c.ferdinandi-s_tabby
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Compare commits

base: tfelypoc:ufdfd
Branches Tags
tfelypoc:ufdfd
tfelypoc:v1
..
compare: tfelypoc:v1
Branches Tags
tfelypoc:ufdfd
tfelypoc:v1

No commits in common. "ufdfd" and "v1" have entirely different histories.
ufdfd ... v1

6 changed files with 443 additions and 46 deletions
Show stats Expand all files Collapse all files

34
.gitignore vendored
View file

@ -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
View file

@ -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.

13
README.md Normal file → Executable file
View file

@ -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.

135
example.html Normal file
View file

@ -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>&lt;li&gt;</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>

262
tabby.css Normal file
View file

@ -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;
}

34
tabby.js Normal file
View file

@ -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.
});