Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Reflow Table #181

Open
wants to merge 16 commits into
base: develop
Choose a base branch
from
Open

Reflow Table #181

Changes from 1 commit
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
671e9dc
test
marinewater Jan 7, 2014
120e453
Revert "test"
marinewater Jan 7, 2014
c6718a3
test 2
marinewater Jan 7, 2014
74429fb
Revert "test 2"
marinewater Jan 7, 2014
41a8f23
example for a table reflow
marinewater Jan 7, 2014
4ff5eec
create JavaScript file to add headers to cells
marinewater Jan 8, 2014
0e3f104
edited reflow Table headers
marinewater Jan 8, 2014
1e358b6
table is now striped
marinewater Jan 8, 2014
0fdf103
added breakpoint option
marinewater Jan 8, 2014
ca75e2d
created file
marinewater Jan 8, 2014
6fb4ca8
added gumby.tablereflow.js script tag
marinewater Jan 9, 2014
830e6c3
added gumby.tablereflow.js script tag
marinewater Jan 9, 2014
a5d73fd
compiled with gumby.tablereflow.js
marinewater Jan 9, 2014
330af7b
added font sizes and weights
marinewater Jan 9, 2014
0d9954b
compiled with new table.scss
marinewater Jan 9, 2014
1a97ca3
Reflow Table is now in ui.html
marinewater Jan 9, 2014
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
example for a table reflow
  • Loading branch information
@marinewater
marinewater committed Jan 7, 2014
commit 41a8f23c34a2aacc79a9199fcd8c35e3c6883cfd
193 changes: 193 additions & 0 deletions tables.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,193 @@
<!doctype html>
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="no-js ie7 oldie" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="no-js ie8 oldie" lang="en"> <![endif]-->
<!--[if IE 9]> <html class="no-js ie9" lang="en"> <![endif]-->
<!-- Consider adding an manifest.appcache: h5bp.com/d/Offline -->
<!--[if gt IE 9]><!--> <html class="no-js" lang="en" itemscope itemtype="http://schema.org/Product"> <!--<![endif]-->
<head>
<meta charset="utf-8">

<!-- Use the .htaccess and remove these lines to avoid edge case issues.
More info: h5bp.com/b/378 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

<title>Gumby - A Flexible, Responsive CSS Framework - Powered by SASS</title>
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="author" content="humans.txt">

<link rel="shortcut icon" href="favicon.png" type="image/x-icon" />

<!-- Facebook Metadata /-->
<meta property="fb:page_id" content="" />
<meta property="og:image" content="" />
<meta property="og:description" content=""/>
<meta property="og:title" content=""/>

<!-- Google+ Metadata /-->
<meta itemprop="name" content="">
<meta itemprop="description" content="">
<meta itemprop="image" content="">

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1">

<!-- We highly recommend you use SASS and write your custom styles in sass/_custom.scss.
However, there is a blank style.css in the css directory should you prefer -->
<link rel="stylesheet" href="css/gumby.css">
<!-- <link rel="stylesheet" href="css/style.css"> -->

<script src="js/libs/modernizr-2.6.2.min.js"></script>
</head>

<body>
<div class="row">
<h1 class="lead">Tables</h1>
<div class="row">
<div class="six columns">
<table>
<caption>Default Table</caption>
<thead>
<tr>
<th>Header</th>
<th>Header</th>
</tr>
</thead>
<tbody>
<tr>
<td>Lorem ipsum</td>
<td>This is a slightly longer block of content to show how the cells will wrap when necessary</td>
</tr>
</tbody>
</table>
</div>
<div class="six columns">
<table class="rounded">
<caption>Rounded Table</caption>
<thead>
<tr>
<th>Header</th>
<th>Header</th>
</tr>
</thead>
<tbody>
<tr>
<td>Lorem ipsum</td>
<td>This is a slightly longer block of content to show how the cells will wrap when necessary</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="row">
<div class="twelve columns">
<table class="striped rounded">
<caption>Striped and Rounded Table</caption>
<thead>
<tr>
<th>Table Header</th>
<th>Table Header</th>
</tr>
</thead>
<tbody>
<tr>
<td>Lorem ipsum</td>
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et dignissim magna, id molestie dui.</td>
</tr>
<tr>
<td>Lorem ipsum</td>
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et dignissim magna, id molestie dui.</td>
</tr>
<tr>
<td>Lorem ipsum</td>
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et dignissim magna, id molestie dui.</td>
</tr>
<tr>
<td>Lorem ipsum</td>
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et dignissim magna, id molestie dui.</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>


<!-- Grab Google CDN's jQuery, fall back to local if offline -->
<!-- 2.0 for modern browsers, 1.10 for .oldie -->
<script>
var oldieCheck = Boolean(document.getElementsByTagName('html')[0].className.match(/\soldie\s/g));
if(!oldieCheck) {
document.write('<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"><\/script>');
} else {
document.write('<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"><\/script>');
}
</script>
<script>
if(!window.jQuery) {
if(!oldieCheck) {
document.write('<script src="js/libs/jquery-2.0.2.min.js"><\/script>');
} else {
document.write('<script src="js/libs/jquery-1.10.1.min.js"><\/script>');
}
}
</script>

<!--
Include gumby.js followed by UI modules followed by gumby.init.js
Or concatenate and minify into a single file -->
<script gumby-touch="js/libs" src="js/libs/gumby.js"></script>
<script src="js/libs/ui/gumby.retina.js"></script>
<script src="js/libs/ui/gumby.fixed.js"></script>
<script src="js/libs/ui/gumby.skiplink.js"></script>
<script src="js/libs/ui/gumby.toggleswitch.js"></script>
<script src="js/libs/ui/gumby.checkbox.js"></script>
<script src="js/libs/ui/gumby.radiobtn.js"></script>
<script src="js/libs/ui/gumby.tabs.js"></script>
<script src="js/libs/ui/gumby.navbar.js"></script>
<script src="js/libs/ui/jquery.validation.js"></script>
<script src="js/libs/gumby.init.js"></script>

<!--
Google's recommended deferred loading of JS
gumby.min.js contains gumby.js, all UI modules and gumby.init.js

Note: If you opt to use this method of defered loading,
ensure that any javascript essential to the initial
display of the page is included separately in a normal
script tag.

<script type="text/javascript">
function downloadJSAtOnload() {
var element = document.createElement("script");
element.src = "js/libs/gumby.min.js";
document.body.appendChild(element);
}
if (window.addEventListener)
window.addEventListener("load", downloadJSAtOnload, false);
else if (window.attachEvent)
window.attachEvent("onload", downloadJSAtOnload);
else window.onload = downloadJSAtOnload;
</script> -->

<script src="js/plugins.js"></script>
<script src="js/main.js"></script>

<!-- Change UA-XXXXX-X to be your site's ID -->
<!--<script>
window._gaq = [['_setAccount','UAXXXXXXXX1'],['_trackPageview'],['_trackPageLoadTime']];
Modernizr.load({
load: ('https:' == location.protocol ? '//ssl' : '//www') + '.google-analytics.com/ga.js'
});
</script>-->

<!-- Prompt IE 6 users to install Chrome Frame. Remove this if you want to support IE 6.
chromium.org/developers/how-tos/chrome-frame-getting-started -->
<!--[if lt IE 7 ]>
<script src="//ajax.googleapis.com/ajax/libs/chrome-frame/1.0.3/CFInstall.min.js"></script>
<script>window.attachEvent('onload',function(){CFInstall.check({mode:'overlay'})})</script>
<![endif]-->

</body>
</html>