This repository was archived by the owner on Dec 11, 2021. It is now read-only.
Initial base typography #57
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| body { | ||
| max-width: 700px; | ||
| margin: 3em auto; | ||
| padding: 0 1em; | ||
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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 <h1></h1> | ||
| <h2>Heading 2 <h2></h2> | ||
| <h3>Heading 3 <h3></h3> | ||
| <h4>Heading 4 <h4></h4> | ||
| <h5>Heading 5 <h5></h5> | ||
| <h6>Heading 6 <h6></h6> | ||
|
|
||
| <hr> | ||
|
|
||
| <h1>Heading 1 <h1></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 <h2></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 <h3></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 <h4></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 <h5></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 <h6></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 <p> 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 <div>. 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 <article> 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. <blockquote> 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; | ||
| } | ||
| <pre> | ||
| </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 <address> | ||
| </address> | ||
|
|
||
| <hr> | ||
|
|
||
| <h2>Lists <li></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 <ul></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 <ol></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 <dt></dt> | ||
| <dd>Definition <dd></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> <a></li> | ||
| <li>abbreviation: <abbr title="Syntactically Awesome Stylesheets">SASS</abbr> <abbr></li> | ||
| <li>citation: <cite>A Study in Scarlet</cite> <cite></li> | ||
| <li>Here"s the <code><code></code> element</li> | ||
| <li>deleted text: <del>Episodes I, II, III</del> <del></li> | ||
| <li>definition: The <dfn>definition element</dfn> is the element being defined inline. <dfn></li> | ||
| <li><em>emphasis</em> <em></li> | ||
| <li><ins>inserted text</ins> <ins></li> | ||
| <li>keyboard input: <kbd>control + space</kbd> <kbd></li> | ||
| <li><mark>mark element</mark> <mark></li> | ||
| <li>meter: <meter min="200" max="500" value="423">awesomeness</meter> <meter></li> | ||
| <li>progress: <progress value="90" max="100">70 %</progress> <progress></li> | ||
| <li>quotation (short): <q>You just gotta believe!</q> <q></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> <q></li> | ||
| <li>strikethough: <s>Lance Armstrong remains steroid-free.</s> <s></li> | ||
| <li>sample text: <samp>Error</samp> <samp></li> | ||
| <li>small: <small>Hydrogen</small> <small></li> | ||
| <li>small within small: <small>Hydrogen <small>Hydrogen</small></small> <small></li> | ||
| <li>strong: <strong>The Hammer</strong> <strong></li> | ||
| <li>subscript: <sub>Lower</sub> 0<sub>1<sub>2<sub>3</sub></sub></sub> <sub></li> | ||
| <li>superscript: I need a good <sup>superman</sup> joke to go here. 0<sup>1<sup>2<sup>3</sup></sup></sup> <sup></li> | ||
| <li>time: <time datetime="1985-12-09 19:00">Dec 9</time> <time></li> | ||
| <li>underline: Never underline <u>anything</u>. <u></li> | ||
| <li>variable: <var>cat</var> + <var>dog</var> = <var>catdog</var> <var></li> | ||
| </ul> | ||
| <hr> | ||
|
|
||
| </body> | ||
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,26 @@ | ||
| // ========================================================================== | ||
| // Typography functions | ||
| // ========================================================================== | ||
|
|
||
| // Adds a single pixel underline (so nice) on retina | ||
| // Usage: `@include slime-underline;` | ||
| @mixin slim-underline() { | ||
| text-decoration: none; | ||
| background-image: linear-gradient( to bottom, rgba( 0, 0, 0, 0 ) 75%, #000 50% ); | ||
| background-repeat: repeat-x; | ||
| background-size: 2px 2px; | ||
| background-position: 0 em( 22px ); | ||
|
|
||
| &:hover, | ||
| &:active, | ||
| &:focus { | ||
| background-size: 2px 6px; | ||
| background-position: 0 em( 18px ); | ||
| } | ||
| @media not all, | ||
| only screen and ( min-resolution: 2dppx ), | ||
| only screen and ( -webkit-min-device-pixel-ratio: 2 ) { | ||
| background-image: linear-gradient( to bottom, rgba( 0, 0, 0, 0 ) 75%, #000 75% ); | ||
| background-repeat: repeat-x; | ||
| } | ||
| } | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Sorry i didn't notice the before but the style guide mandates
/* comment */style comments since these are the only valid style in normal css. @MichaelArestad can you please switch all the comments here to use this style.There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Is using multiline comments the plan for the Sass guide?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I just realize this style has slipped in already in other files, we should switch these to match the style guide in a separate PR
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@MichaelArestad well its not necessarily multi line it the only valid style in normal css. I personally don't think its good practice to use different comment styles in different files so we should stick to valid css comments i don't think using
//has any benefit over/* */other then not typing 2 chars which git stripped out in real build anyway i think clarity and consistency should prevail here. @sfrisk what do you think?There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
There are minor benefits which are situational. No single line comments end up in output CSS files whereas multiline comments do depending on output style. This is handy for when you want to comment things like functions without it ending up in the output code or when you are generating a theme file and want to curate which comments end up in the compiled CSS file.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
So no comments at all end up in minified files which is really what matter. We also use the "Expanded" style which outputs both single and multi line comments so there is no difference here either.
This would be true if our output style accommodated this however it does not. Only the compressed output style accommodates this
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Expanded does not output single line comments. No style does.
Compressed, expanded, and nested support outputting multiline comments (without doing a forced comment
/*! */).There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@MichaelArestad Your right sorry i looked this up and misread. You are correct here.
So in this case there is basically one major case that makes sense to use single line comments which is where we have a comment that would end up with no context and make no sense if it ended up in an uncompressed output file. This would likely be the case for most functions. Most other places should probably stick to multiline i think still. Since we have both css and scss files in this repo i would like to try to keep things as clear and consistent as possible. Also i think anything that deserved a comment in the scss file should still have one in the uncompressed development build file.
@MichaelArestad how does that sound to you?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Yeah. Probably functions and comments that are implementation instructions for mixins as well. Will change on another PR.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I think a general rule of "will this lose context when its in the built file" could apply for what should use single line.
On a slight aside these sorts of comments in these 2 cases should probably eventually move to the documentation ( once such a thing exists ) but for now yes i agree.