Skip to content
This repository was archived by the owner on Dec 11, 2021. It is now read-only.

Table styling #69

Closed
wants to merge 16 commits into from
Closed

Table styling #69

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
81ff091
Build: Initial typographic styles
MichaelArestad Mar 15, 2015
76bfa64
Build: minor style tweaks
MichaelArestad Mar 29, 2015
46906db
Build: Updated focus styles
MichaelArestad Apr 10, 2015
17baf5e
Build: UpRemoved extra markup and added comments
MichaelArestad Apr 10, 2015
308ea27
Build: added mixin
MichaelArestad Apr 10, 2015
013745f
Build: added stock htmllint
MichaelArestad Apr 14, 2015
87d8f1d
Build: string fix
MichaelArestad Apr 14, 2015
780fdf6
Build: minor lint updates
MichaelArestad Apr 14, 2015
127f034
Build: removed ad fixed typo
MichaelArestad Apr 22, 2015
9d945e3
Build: removed ie meta info
MichaelArestad May 3, 2015
0e1bb15
Build: Initial table styles
MichaelArestad Apr 10, 2015
8e7df77
Build: Fixed some lint errors
MichaelArestad Apr 14, 2015
fe448ed
Build: minor changes
MichaelArestad Apr 14, 2015
0f70d1b
Build: removed whitespace prop from td
MichaelArestad Apr 22, 2015
e387d55
Build: removed IE meta
MichaelArestad May 3, 2015
bc096bf
Build: Separated out overflow styles into own component
MichaelArestad May 7, 2015
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
10 changes: 8 additions & 2 deletions Gruntfile.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,12 @@ module.exports = function( grunt ) {
require( "load-grunt-tasks" )( grunt );

var config = {
htmllint: {
dist: {
options: {},
src: [ "demos/*.html" ]
}
},
autoprefixer: {
dist: {
options: {
Expand Down Expand Up @@ -44,7 +50,7 @@ var config = {
}
},
csslint: {
src: [ "dist/css/chassis.lint.css", "dist/css/chassis.lint.css" ]
src: [ "dist/css/chassis.lint.css", "dist/css/chassis.lint.css", "demos/demos.css" ]
},
jscs: {
all: [ "*.js", "performance/**/*.js" ]
Expand Down Expand Up @@ -181,7 +187,7 @@ grunt.initConfig( config );
grunt.loadTasks( "tasks" );
grunt.loadNpmTasks( "perfjankie" );
grunt.registerTask( "default", [ "test" ] );
grunt.registerTask( "test", [ "build", "jshint", "jscs", "csslint" ] );
grunt.registerTask( "test", [ "build", "jshint", "jscs", "csslint", "htmllint" ] );
grunt.registerTask( "build", [ "svg", "sass", "csscomb", "cssmin" ] );
grunt.registerTask( "perf", [
"start-selenium-server",
Expand Down
5 changes: 5 additions & 0 deletions demos/demos.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
body {
max-width: 700px;
margin: 3em auto;
padding: 0 1em;
}
115 changes: 115 additions & 0 deletions demos/tables.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,115 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Chassis - Tables</title>
<meta name="description" content="Typography skeleton for styling">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../dist/css/chassis.css">
<link rel="stylesheet" href="demos.css">
<link href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600,700,400italic,700italic" rel="stylesheet">
</head>
<body>

<h1>CSS Chassis</h1>

<hr>

<h2>Tables</h2>

<p>Here's a paragraph to show spacing around the table. Aenean lacinia bibendum nulla sed consectetur. Maecenas faucibus mollis interdum..</p>

<table>
<thead>
<tr>
<th>#</th>
<th>Table heading</th>
<th>Table heading</th>
<th>Table heading</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
</tr>
<tr>
<th>2</th>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
</tr>
<tr>
<th>3</th>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
</tr>
</tbody>
</table>

<p>Here"s a paragraph to show spacing around the table. Aenean lacinia bibendum nulla sed consectetur. Maecenas faucibus mollis interdum..</p>

<div class="overflow-indicator__wrapper">
<table class="overflow-indicator__content">
<thead>
<tr>
<th>#</th>
<th>Table heading</th>
<th>Table heading</th>
<th>Table heading</th>
<th>Table heading</th>
<th>Table heading</th>
<th>Table heading</th>
<th>Table heading</th>
<th>Table heading</th>
<th>Table heading</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
</tr>
<tr>
<th>2</th>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
</tr>
<tr>
<th>3</th>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
</tr>
</tbody>
</table>
</div>

<p>Here"s a paragraph to show spacing around the table. Aenean lacinia bibendum nulla sed consectetur. Maecenas faucibus mollis interdum.</p>

</body>
</html>
150 changes: 150 additions & 0 deletions demos/typography.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,150 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Chassis - Typography</title>
<meta name="description" content="Typography skeleton for styling">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../dist/css/chassis.css">
<link rel="stylesheet" href="demos.css">
<link href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600,700,400italic,700italic" rel="stylesheet">
</head>
<body>

<h1>CSS Chassis</h1>

<hr>

<h1>Heading 1 &lt;h1&gt;</h1>
<h2>Heading 2 &lt;h2&gt;</h2>
<h3>Heading 3 &lt;h3&gt;</h3>
<h4>Heading 4 &lt;h4&gt;</h4>
<h5>Heading 5 &lt;h5&gt;</h5>
<h6>Heading 6 &lt;h6&gt;</h6>

<hr>

<h1>Heading 1 &lt;h1&gt;</h1>
<p>Many say exploration is part of our destiny, but it’s actually our duty to future generations and their quest to ensure the survival of the human species.</p>

<h2>Heading 2 &lt;h2&gt;</h2>
<p>It suddenly struck me that that tiny pea, pretty and blue, was the Earth. I put up my thumb and shut one eye, and my thumb blotted out the planet Earth. I didn"t feel like a giant. I felt very, very small.</p>

<h3>Heading 3 &lt;h3&gt;</h3>
<p>The Earth was small, light blue, and so touchingly alone, our home that must be defended like a holy relic. The Earth was absolutely round. I believe I never knew what the word round meant until I saw Earth from space.</p>

<h4>Heading 4 &lt;h4&gt;</h4>
<p>To be the first to enter the cosmos, to engage, single-handed, in an unprecedented duel with nature—could one dream of anything more?</p>

<h5>Heading 5 &lt;h5&gt;</h5>
<p>What was most significant about the lunar voyage was not that man set foot on the Moon but that they set eye on the earth.</p>

<h6>Heading 6 &lt;h6&gt;</h6>
<p>Many say exploration is part of our destiny, but it’s actually our duty to future generations and their quest to ensure the survival of the human species.</p>

<hr>

<h2>Block-level elements</h2>

<p>Here"s a paragraph &lt;p&gt; filled with some <a href="http://spaceipsum.com/">Space Ipsum</a>. Never in all their history have men been able truly to conceive of the world as one: a single sphere, a globe, having the qualities of a globe, a round earth in which all the directions eventually meet, in which there is no center because every point, or none, is center — an equal earth which all men occupy as equals. The airman"s earth, if free men make it, will be truly round: a globe in practice, not in theory.</p>

<p>There can be no thought of finishing for ‘aiming for the stars.’ Both figuratively and literally, it is a task to occupy the generations. And no matter how much progress one makes, there is always the thrill of just beginning.</p>

<div>Here"s a div &lt;div&gt;. A Chinese tale tells of some men sent to harm a young girl who, upon seeing her beauty, become her protectors rather than her violators. That"s how I felt seeing the Earth for the first time. I could not help but love and cherish her
</div>

<article>
<h3>This is an article &lt;article&gt; with a paragraph</h3>
<p>We want to explore. We’re curious people. Look back over history, people have put their lives at stake to go out and explore … We believe in what we’re doing. Now it’s time to go.</p>
<p>End of the article.</p>
</article>

<blockquote>Let"s light this fire one more time, Mike, and witness this great nation at its best. &lt;blockquote&gt; via <a href="http://spaceipsum.com/">Space Ipsum</a></blockquote>

<p>We choose to go to the moon in this decade and do the other things, not because they are easy, but because they are hard, because that goal will serve to organize and measure the best of our energies and skills, because that challenge is one that we are willing to accept, one we are unwilling to postpone, and one which we intend to win.</p>

<pre>
* {
font-family: "Comic Sans MS", "Comic Sans", "Marker Felt" !important;
}
&lt;pre&gt;
</pre>

<p>Many say exploration is part of our destiny, but it’s actually our duty to future generations and their quest to ensure the survival of the human species.</p>

<address>
<strong>Sherlock Holmes</strong><br>
221B Baker Street<br>
London, United Kingdom &lt;address&gt;
</address>

<hr>

<h2>Lists &lt;li&gt;</h2>
<p>The regret on our side is, they used to say years ago, we are reading about you in science class. Now they say, we are reading about you in history class.</p>

<ul>
<li>Unordered list &lt;ul&gt;</li>
<li>List element</li>
<li>Across the sea of space, the stars are other suns.</li>
<li>Science cuts two ways, of course; its products can be used for both good and evil. But there"s no turning back from science. The early warnings about technological dangers also come from science.</li>
</ul>

<p>It suddenly struck me that that tiny pea, pretty and blue, was the Earth. I put up my thumb and shut one eye, and my thumb blotted out the planet Earth. I didn"t feel like a giant. I felt very, very small.</p>

<ol>
<li>Ordered list &lt;ol&gt;</li>
<li>List element</li>
<li>The dreams of yesterday are the hopes of today and the reality of tomorrow.</li>
<li>Curious that we spend more time congratulating people who have succeeded than encouraging people who have not.</li>
</ol>

<p>For those who have seen the Earth from space, and for the hundreds and perhaps thousands more who will, the experience most certainly changes your perspective. The things that we share in our world are far more valuable than those which divide us.</p>

<dl>
<dt>Definition term &lt;dt&gt;</dt>
<dd>Definition &lt;dd&gt;</dd>
<dt>Earth</dt>
<dd>A kick-ass planet.</dd>
<dt>Pluto</dt>
<dd>A kick-ass former planet.</dd>
<dt>Space Ipsum</dt>
<dd>NASA is not about the ‘Adventure of Human Space Exploration’…We won’t be doing it just to get out there in space – we’ll be doing it because the things we learn out there will be making life better for a lot of people who won’t be able to go.</dd>
</dl>

<p>Spaceflights cannot be stopped. This is not the work of any one man or even a group of men. It is a historical process which mankind is carrying out in accordance with the natural laws of human development.</p>

<hr>

<h2>Text-level elements</h2>

<ul>
<li><a href="#">anchor link</a> &lt;a&gt;</li>
<li>abbreviation: <abbr title="Syntactically Awesome Stylesheets">SASS</abbr> &lt;abbr&gt;</li>
<li>citation: <cite>A Study in Scarlet</cite> &lt;cite&gt;</li>
<li>Here"s the <code>&lt;code&gt;</code> element</li>
<li>deleted text: <del>Episodes I, II, III</del> &lt;del&gt;</li>
<li>definition: The <dfn>definition element</dfn> is the element being defined inline. &lt;dfn&gt;</li>
<li><em>emphasis</em> &lt;em&gt;</li>
<li><ins>inserted text</ins> &lt;ins&gt;</li>
<li>keyboard input: <kbd>control + space</kbd> &lt;kbd&gt;</li>
<li><mark>mark element</mark> &lt;mark&gt;</li>
<li>meter: <meter min="200" max="500" value="423">awesomeness</meter> &lt;meter&gt;</li>
<li>progress: <progress value="90" max="100">70 %</progress> &lt;progress&gt;</li>
<li>quotation (short): <q>You just gotta believe!</q> &lt;q&gt;</li>
<li>quotation within a quotation (short): <q>Yo dawg, I heard you like quotes so I put <q>this quote</q> within this quote.</q> &lt;q&gt;</li>
<li>strikethough: <s>Lance Armstrong remains steroid-free.</s> &lt;s&gt;</li>
<li>sample text: <samp>Error</samp> &lt;samp&gt;</li>
<li>small: <small>Hydrogen</small> &lt;small&gt;</li>
<li>small within small: <small>Hydrogen <small>Hydrogen</small></small> &lt;small&gt;</li>
<li>strong: <strong>The Hammer</strong> &lt;strong&gt;</li>
<li>subscript: <sub>Lower</sub> 0<sub>1<sub>2<sub>3</sub></sub></sub> &lt;sub&gt;</li>
<li>superscript: I need a good <sup>superman</sup> joke to go here. 0<sup>1<sup>2<sup>3</sup></sup></sup> &lt;sup&gt;</li>
<li>time: <time datetime="1985-12-09 19:00">Dec 9</time> &lt;time&gt;</li>
<li>underline: Never underline <u>anything</u>. &lt;u&gt;</li>
<li>variable: <var>cat</var> + <var>dog</var> = <var>catdog</var> &lt;var&gt;</li>
</ul>
<hr>

</body>
</html>
1 change: 1 addition & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,6 +59,7 @@
"grunt-csscomb": "3.0.0",
"grunt-git-authors": "2.0.0",
"grunt-html": "1.6.0",
"grunt-htmllint": "0.2.7",
"grunt-jscs": "0.6.2",
"grunt-npmcopy": "0.1.0",
"grunt-sass": "0.18.1",
Expand Down
46 changes: 46 additions & 0 deletions scss/atoms/_overflow-indicator.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
// ==========================================================================
// Overflow Indicator
//
// Shows indicator when there is more horizontal content.
//
// EXAMPLE
// <div class="overflow-indicator__wrapper">
// <div class="overflow-indicator__content">...</div>
// </div>
// ==========================================================================

.overflow-indicator__wrapper {
position: relative;
z-index: 1;
margin-bottom: em( 20px );
border: 0;
background: #fff no-repeat;
background-image: radial-gradient( farthest-side at 0 50%,rgba( 0, 0, 0, .2 ), transparent ), radial-gradient( farthest-side at 100% 50%, rgba( 0, 0, 0, .2 ), transparent );
background-position: 0 0, 100% 0;
background-size: 10px 100%;
overflow: auto;
}

.overflow-indicator__wrapper > .overflow-indicator__content {
position: relative;
margin-bottom: 0;

&:before,
&:after {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
z-index: -1;
margin: 0 -30px 0 0;
width: 30px;
background: linear-gradient( to right, #fff, #fff 30%, rgba( 255, 255, 255, 0 ) );
}
&:after {
left: auto;
right: 0;
margin: 0 0 0 -30px;
background: linear-gradient( to right, rgba( 255, 255, 255, 0 ), #fff 70%, #fff );
}
}
Loading