Skip to content

Day two css #11

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

Merged
allyface merged 2 commits into from
Mar 13, 2017
Merged

Day two css #11

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
c05ff76
Stephani's CSS additions
Mar 10, 2017
b3c17a1
Ally's CSS additions
Mar 10, 2017
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
270 changes: 163 additions & 107 deletions demo.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,97 +4,144 @@
<meta charset="UTF-8">
<title>Build Your Own Bootstrap</title>
<link rel="stylesheet" href="./style.css">
<link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300|Raleway" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300.700|Raleway" rel="stylesheet">
</head>
<body>
<div>
<header id="main-header">
<h1>Vast CSS</h1>
<h6>Because Bootstrap is b.s.</h6>
<header id="main-header" class="flex-container">
<p id="title">Vast CSS</p>
<p id="sub-title">'Cause Bootstrap is B.S.</p>
</header>
</div>
<header id="headings-section">

<div class="body-content">

<header class="sections" id="headings-section">
<h1 class="section-title">Headings</h1>

<div class="breakdown">
<p>To style headings in various sizes, add the
<code class="class-name">.vast-heading</code> class to your
<code class="class-name">.vast-h1</code> through
<code class="class-name">.vast-h6</code> class to your inline elements or simply use the
<code class="element-in-text">&lt;h1&gt;</code> through
<code class="element-in-text">&lt;h6&gt;</code> tags.
</p>
</div>

<div class="sample-text">
<h1 class="vast-heading">h1. Vast Quoll</h1>
<h2 class="vast-heading">h2. Vast Quoll</h2>
<h3 class="vast-heading">h3. Vast Quoll</h3>
<h4 class="vast-heading">h4. Vast Quoll</h4>
<h5 class="vast-heading">h5. Vast Quoll</h5>
<h6 class="vast-heading">h6. Vast Quoll</h6>
<div class="flex-container sample-text">
<h1 class="vast-h1">h1. Vast Quoll</h1>
<h2 class="vast-h2">h2. Vast Quoll</h2>
<h3 class="vast-h3">h3. Vast Quoll</h3>
<h4 class="vast-h4">h4. Vast Quoll</h4>
<h5 class="vast-h5">h5. Vast Quoll</h5>
<h6 class="vast-h6">h6. Vast Quoll</h6>
</div>

<div class="sample-code">
<code>
<p>
<span class="element-color">&lt;h1</span>
<span class="class">class=</span><!--
--><span class="class-name">"vast-heading"</span><!--
--><span class="element-color">&gt;</span>h1. Vast Quoll<!--
<span class="element-color">&lt;h1&gt;</span><!--
--></span>h1. Vast Quoll<!--
--><span class="element-color">&lt;/h1&gt;</span>
</p>
<p>
<span class="element-color">&lt;h2</span>
<span class="class">class=</span><!--
--><span class="class-name">"vast-heading"</span><!--
--><span class="element-color">&gt;</span>h2. Vast Quoll<!--
<span class="element-color">&lt;h2&gt;</span><!--
--></span>h2. Vast Quoll<!--
--><span class="element-color">&lt;/h2&gt;</span>
</p>
<p>
<span class="element-color">&lt;h3</span>
<span class="class">class=</span><!--
--><span class="class-name">"vast-heading"</span><!--
--><span class="element-color">&gt;</span>h3. Vast Quoll<!--
<span class="element-color">&lt;h3&gt;</span><!--
--></span>h3. Vast Quoll<!--
--><span class="element-color">&lt;/h3&gt;</span>
</p>
<p>
<span class="element-color">&lt;h4</span>
<span class="class">class=</span><!--
--><span class="class-name">"vast-heading"</span><!--
--><span class="element-color">&gt;</span>h4. Vast Quoll<!--
<span class="element-color">&lt;h4&gt;</span><!--
--></span>h4. Vast Quoll<!--
--><span class="element-color">&lt;/h4&gt;</span>
</p>
<p>
<span class="element-color">&lt;h5</span>
<span class="class">class=</span><!--
--><span class="class-name">"vast-heading"</span><!--
--><span class="element-color">&gt;</span>h5. Vast Quoll<!--
</p>
<p>
<span class="element-color">&lt;h5&gt;</span><!--
--></span>h5. Vast Quoll<!--
--><span class="element-color">&lt;/h5&gt;</span>
</p>
<p>
<span class="element-color">&lt;h6</span>
<span class="class">class=</span><!--
--><span class="class-name">"vast-heading"</span><!--
--><span class="element-color">&gt;</span>h6. Vast Quoll<!--
</p>
<p>
<span class="element-color">&lt;h6&gt;</span><!--
--></span>h6. Vast Quoll<!--
--><span class="element-color">&lt;/h6&gt;</span>
</p>
</p>
</code>
</div>

<!--
<div class="secondary-heading">
<h2 class="section-title"><small>Secondary Headings</small></h2>
<p>To create secondary text, add the <code class= "class-name">.small</code> class to your <code class= "element-in-text">&lt;h1&gt;</code> through <code class= "element-in-text">&lt;h6&gt;</code> tags.</p>
<h1 class= "vast-heading">h1. Vast Quoll <small>Secondary text</small></h1>
<h2 class= "vast-heading">h2. Vast Quoll <small>Secondary text</small></h2>
<h3 class= "vast-heading">h3. Vast Quoll <small>Secondary text</small></h3>
<h4 class= "vast-heading">h4. Vast Quoll <small>Secondary text</small></h4>
<h5 class= "vast-heading">h5. Vast Quoll <small>Secondary text</small></h5>
<h6 class= "vast-heading">h6. Vast Quoll <small>Secondary text</small></h6>
</div>-->
<div class="secondary-section" id="secondary-heading">
<h2 class="section-title">Secondary Headings</h2>

<div class="breakdown">
<p>To create secondary text, add the
<code class= "class-name">.small</code> class to your
<code class= "element-in-text">&lt;h1&gt;</code> through
<code class= "element-in-text">&lt;h6&gt;</code> tags.
</p>
</div>

<div class="flex-container sample-text">
<h1>h1. Vast Quoll <small>Secondary text</small></h1>
<h2>h2. Vast Quoll <small>Secondary text</small></h2>
<h3>h3. Vast Quoll <small>Secondary text</small></h3>
<h4>h4. Vast Quoll <small>Secondary text</small></h4>
<h5>h5. Vast Quoll <small>Secondary text</small></h5>
<h6>h6. Vast Quoll <small>Secondary text</small></h6>
</div>

<div class="sample-code">
<code>
<p>
<span class="element-color">&lt;h1&gt;</span><!--
--></span>h1. Vast Quoll
<span class="element-color">&lt;small&gt;</span><!--
-->Secondary text<!--
--><span class="element-color">&lt;/small&gt;&lt;/h1&gt;</span>
</p>
<p>
<span class="element-color">&lt;h2&gt;</span><!--
--></span>h2. Vast Quoll
<span class="element-color">&lt;small&gt;</span><!--
-->Secondary text<!--
--><span class="element-color">&lt;/small&gt;&lt;/h2&gt;</span>
</p>
<p>
<span class="element-color">&lt;h3&gt;</span><!--
--></span>h3. Vast Quoll
<span class="element-color">&lt;small&gt;</span><!--
-->Secondary text<!--
--><span class="element-color">&lt;/small&gt;&lt;/h3&gt;</span>
</p>
<p>
<span class="element-color">&lt;h4&gt;</span><!--
--></span>h4. Vast Quoll
<span class="element-color">&lt;small&gt;</span><!--
-->Secondary text<!--
--><span class="element-color">&lt;/small&gt;&lt;/h4&gt;</span>
</p>
<p>
<span class="element-color">&lt;h5&gt;</span><!--
--></span>h5. Vast Quoll
<span class="element-color">&lt;small&gt;</span><!--
-->Secondary text<!--
--><span class="element-color">&lt;/small&gt;&lt;/h5&gt;</span>
</p>
<p>
<span class="element-color">&lt;h6&gt;</span><!--
--></span>h6. Vast Quoll
<span class="element-color">&lt;small&gt;</span><!--
-->Secondary text<!--
--><span class="element-color">&lt;/small&gt;&lt;/h6&gt;</span>
</p>
</code>
</div>
</div>
</header>

<header id="body-copy">
<header class="sections" id="body-copy">
<div id="body-text">
<h1 class="section-title">Body copy</h1>

Expand All @@ -109,7 +156,7 @@ <h1 class="section-title">Body copy</h1>
</p>
</div>

<div class="sample-text">
<div class="flex-container sample-text">
<p>Hodor! Hodor hodor, hodor; hodor hodor... Hodor hodor hodor. Hodor. Hodor! Hodor hodor, hodor hodor hodor? Hodor hodor HODOR! Hodor hodor - hodor; hodor hodor. Hodor hodor HODOR! Hodor hodor - hodor... Hodor hodor hodor; hodor hodor hodor! Hodor, hodor. Hodor. Hodor, hodor hodor hodor, hodor. Hodor hodor?!</p>
<p>Hodor. Hodor hodor hodor hodor... Hodor hodor hodor. Hodor hodor - hodor; hodor HODOR hodor, hodor hodor?! Hodor hodor, hodor. Hodor hodor; hodor hodor hodor hodor. Hodor. Hodor HODOR hodor, hodor hodor hodor? Hodor! Hodor hodor, hodor, hodor. Hodor hodor? Hodor. Hodor hodor; hodor hodor, hodor. Hodor hodor. Hodor! Hodor hodor, hodor - HODOR hodor, hodor hodor; hodor hodor, hodor, hodor hodor. </p>
<p>Hodor hodor HODOR! Hodor hodor... Hodor hodor hodor; hodor hodor - hodor? Hodor! Hodor hodor, hodor... Hodor hodor hodor hodor! Hodor, hodor. Hodor. Hodor, hodor... Hodor hodor hodor hodor; hodor hodor - hodor, hodor, hodor hodor. Hodor hodor HODOR! Hodor hodor... Hodor hodor HODOR hodor, hodor hodor; hodor hodor, hodor. Hodor hodor?! Hodor, hodor. Hodor. Hodor, hodor; hodor hodor; hodor hodor. Hodor. Hodor hodor HODOR! Hodor HODOR hodor, hodor hodor, hodor. Hodor hodor hodor. </p>
Expand All @@ -124,15 +171,15 @@ <h1 class="section-title">Body copy</h1>
</div>
</div>

<div id="lead-body-copy">
<div class="secondary-section" id="lead-body-copy">
<h2 class = "section-title">Lead body copy</h2>

<div class="breakdown">
<p>Make a paragraph stand out by adding <code class = "class-name">.vast-lead</code>.
</p>
</div>

<div class="sample-text">
<div class="flex-container sample-text">
<p class="vast-lead">Post-ironic shoreditch chambray whatever fixie, butcher crucifix cronut migas vexillologist microdosing flannel beard. Vinyl cold-pressed echo park pickled, venmo paleo kogi whatever. Organic pitchfork drinking vinegar, microdosing pinterest stumptown live-edge. Chambray green juice fingerstache drinking vinegar. Waistcoat truffaut mlkshk scenester, fingerstache vape yuccie single-origin coffee flannel quinoa man braid polaroid four dollar toast deep v. Glossier cardigan franzen slow-carb kombucha banh mi. Vexillologist mixtape stumptown small batch vinyl, intelligentsia snackwave synth thundercats af unicorn fap ramps seitan.
</p>
</div>
Expand All @@ -151,69 +198,74 @@ <h2 class = "section-title">Lead body copy</h2>
</div>
</header>

<header id="address">
<header class="sections" id="address">
<h1 class="section-title">Addresses</h1>

<div class="breakdown">
<p>Present contact information in our default style by using the <code class="element-in-text">&lt;address&gt;</code> tag. Preserve your formatting by ending all lines with <code class="element-in-text">&lt;br&gt;</code>.
</p>
</div>

<div class="sample-text">
<address>
<strong>Learners Guild</strong><br>
492 Ninth Street (Garden Level)<br>
Oakland, CA 94607<br>
<abbr title="Phone">P:</abbr> (123) 456-7890
</address>
<div class="flex-container sample-text">
<p>
<address>
<strong>Learners Guild</strong><br>
492 Ninth Street (Garden Level)<br>
Oakland, CA 94607<br>
<abbr title="Phone">P:</abbr> (123) 456-7890
</address>

<address>
<strong>Full Name</strong><br>
<a href="mailto:#">first.last@example.com</a>
</address>
<address>
<strong>Full Name</strong><br>
<a href="mailto:#">first.last@example.com</a>
</address>
</p>
</div>

<div class="sample-code">
<code>
<span class="element-color">&lt;address&gt;</span><br>
<span class="tab element-color">&lt;strong&gt;</span><!--
-->Learners Guild<!--
--><span class="element-color">&lt;/strong&gt;&lt;br&gt;</span><br>
<span class="tab">492 Ninth Street (Garden Level)</span><!--
--><span class="element-color">&lt;br&gt;</span><br>
<span class="tab">Oakland, CA 94607</span><!--
--><span class="element-color">&lt;br&gt;</span><br>
<span class="tab element-color">&lt;abbr</span>
<span class="class">title=</span><!--
--><span class="class-name">"Phone"</span><!--
--><span class="element-color">&gt;</span><!--
-->P:<!--
--><span class="element-color">&lt;/abbr&gt;</span>
(123) 456-7890<br>
<span class="element-color">&lt;/address&gt;</span><br><br>
<span class="element-color">&lt;address&gt;</span><br>
<span class="tab element-color">&lt;strong&gt;</span><!--
-->Full Name<!--
--><span class="element-color">&lt;/strong&gt;&lt;br&gt;</span><br>
<span class="tab element-color">&lt;a</span>
<span class="class">href=</span><!--
--><span class="class-name">"mailto:#"</span><!--
--><span class="element-color">&gt;</span><!--
-->first.last@example.com<!--
--><span class="element-color">&lt;/a&gt;</span><br>
<span class="element-color">&lt;/address&gt;</span>
<p>
<span class="element-color">&lt;address&gt;</span><br>
<span class="tab element-color">&lt;strong&gt;</span><!--
-->Learners Guild<!--
--><span class="element-color">&lt;/strong&gt;&lt;br&gt;</span><br>
<span class="tab">492 Ninth Street (Garden Level)</span><!--
--><span class="element-color">&lt;br&gt;</span><br>
<span class="tab">Oakland, CA 94607</span><!--
--><span class="element-color">&lt;br&gt;</span><br>
<span class="tab element-color">&lt;abbr</span>
<span class="class">title=</span><!--
--><span class="class-name">"Phone"</span><!--
--><span class="element-color">&gt;</span><!--
-->P:<!--
--><span class="element-color">&lt;/abbr&gt;</span>
(123) 456-7890<br>
<span class="element-color">&lt;/address&gt;</span><br><br>
<span class="element-color">&lt;address&gt;</span><br>
<span class="tab element-color">&lt;strong&gt;</span><!--
-->Full Name<!--
--><span class="element-color">&lt;/strong&gt;&lt;br&gt;</span><br>
<span class="tab element-color">&lt;a</span>
<span class="class">href=</span><!--
--><span class="class-name">"mailto:#"</span><!--
--><span class="element-color">&gt;</span><!--
-->first.last@example.com<!--
--><span class="element-color">&lt;/a&gt;</span><br>
<span class="element-color">&lt;/address&gt;</span>
</p>
</code>
</div>
</header>
<header id="blockquotes">

<header class="sections" id="blockquotes">
<h1 class="section-title">Blockquotes</h1>

<div class="breakdown">
<p>Style and content changes for simple variation on a standard <code class="element-in-text">&lt;blockquote&gt;</code>.
</p>
</div>

<div class="sample-text">
<div class="flex-container sample-text">
<blockquote>
<p>
I love cheese, especially pepper jack cheese triangles. Fromage queso emmental who moved my cheese melted cheese edam bavarian bergkase jarlsberg. Fondue feta macaroni cheese ricotta cheese and wine feta stinking bishop stinking bishop. Cheesy feet queso queso red leicester.
Expand All @@ -222,17 +274,20 @@ <h1 class="section-title">Blockquotes</h1>
</div>

<div class="sample-code">
<code>
<span class="element-color">&lt;blockquote&gt;</span><br>
<span class="tab element-color">&lt;p&gt;</span><!--
-->I love cheese, especially pepper jack cheese triangles. Fromage queso emmental who moved my cheese melted cheese edam bavarian bergkase jarlsberg. Fondue feta macaroni cheese ricotta cheese and wine feta stinking bishop stinking bishop. Cheesy feet queso queso red leicester.<!--
--><span class="element-color">&lt;/p&gt;</span><br>
<span class="element-color">&lt;/blockquote&gt;</span>
<p>
<code>
<span class="element-color">&lt;blockquote&gt;</span><br>
<span class="tab element-color">&lt;p&gt;</span><!--
-->I love cheese, especially pepper jack cheese triangles. Fromage queso emmental who moved my cheese melted cheese edam bavarian bergkase jarlsberg. Fondue feta macaroni cheese ricotta cheese and wine feta stinking bishop stinking bishop. Cheesy feet queso queso red leicester.<!--
--><span class="element-color">&lt;/p&gt;</span><br>
<span class="element-color">&lt;/blockquote&gt;</span>
</code>
</p>
</div>
</header>
</header>

<header id ="buttons">
<header class="sections" id ="buttons">
<h1 class="section-title">Buttons</h1>

<div class="breakdown">
Expand All @@ -241,9 +296,9 @@ <h1 class="section-title">Buttons</h1>
<code class="element-in-text">&lt;button&gt;</code>, or
<code class="element-in-text">&lt;input&gt;</code>element.
</p>
</div>
</div>

<div class ="sample text">
<div class ="flex-container sample-text buttons">
<a href="#" class="vast-btn" role="button">Link</a>
<button class="vast-btn" type="submit">Button</button>
<input class="vast-btn" type="button" value="Input">
Expand Down Expand Up @@ -294,5 +349,6 @@ <h1 class="section-title">Buttons</h1>
</code>
</div>
</header>
</div>
</body>
</html>
Copy link

@mKleinCreative mKleinCreative Mar 13, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

With all of this code, I tended to get lost with where it began and where it ended. A little bit more formatting by adding space above and below then making sure things are indented correctly goes a long way in terms of readability.

Loading