From 42bdc47d7e2f1a5fb401ddc1b8cd84891dd8f2aa Mon Sep 17 00:00:00 2001 From: Ally Date: Mon, 6 Mar 2017 11:48:14 -0800 Subject: [PATCH 01/19] Create CONTRACT.md --- CONTRACT.md | 142 ++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 142 insertions(+) create mode 100644 CONTRACT.md diff --git a/CONTRACT.md b/CONTRACT.md new file mode 100644 index 0000000..847527f --- /dev/null +++ b/CONTRACT.md @@ -0,0 +1,142 @@ +--- +authors: +- "@asantos3026" +teamSize: 2 +issueNumber: 93 +title: Build Your Own Bootstrap +createdAt: '2016-10-08T05:47:41Z' +labels: +- practice +published: true +level: '1' +redirect_from: "/goals/93" +--- + +# Build Your Own Bootstrap + +## Challenge Rating + +This goal will likely be within your ZPD if you... + +- Can build basic web sites with HTML & CSS +- Are familiar with HTML/CSS frameworks like Bootstrap +- Are interested in strengthening your HTML & CSS skills +- Are interested in how HTML/CSS frameworks actually work +- Are interested in user interface (UI) design + +## Description + +- Tired of bootstrap templates 👎 that are so overused it makes the entire world wide web look the same? +- Passionate about front end development? +- Ever dreamt of designing web elements like carousels, navbars, jumbotrons, and grids based on your design aesthetic? +- Have you already built your own web elements in your previous LG projects? + +Then this is the project for you! 🎉 + +You will build your own web elements for the front end and publish that code so it can be later used by anyone to build their own site. Here is an example of a [Bootstrap type site that was built by 4 college kids!](http://materializecss.com/about.html) + +This project has two stages: + +1. _Reverse engineer_ a set of components from the [Bootstrap][bootstrap] framework. +2. _Modify_ your components with your own styles, fonts, and colors to make a unique set of design elements. + +## Context + +The first stage of the project will help you solidify your understanding of design elements on the web and how they work. You will get to know CSS and HTML inside and out. + +In the second stage, you will get a better understanding of design and user experience. Tap into your creative side on the front end. + +As you work through the project, make use of your browser's developer tools to fine-tune your design. Remember to keep your **feedback loops** small, fast, and specific! When you make changes to the HTML & CSS, don't just blindly guess-and-check: make hypotheses, test them, and then learn from your mistakes! + +Read and reference good resources on the web to build your conceptual understanding of HTML, CSS, and how the browser uses them to build a styled web page. Start with the [resources](#resources) section below. + +## Specifications + +### Required + +- [ ] Artifact is a GitHub repository (if you're looking for a name, why not "shoelace" ;) +- [ ] All CSS files are in a `css/` directory. +- [ ] Main page is called `demo.html` and includes an example of each component. +- [ ] No external CSS libraries/modules are used. Everything is written from scratch. +- [ ] The artifact produced is properly licensed, preferably with the [MIT license](https://opensource.org/licenses/MIT). + +### Stage 1: Reverse Engineer Bootstrap Components + +- [ ] Styles include replicas of Bootstrap's typography: + - [ ] [Headings](http://getbootstrap.com/css/#type-headings) + - [ ] [Body copy](http://getbootstrap.com/css/#type-body-copy) + - [ ] [Addresses](http://getbootstrap.com/css/#type-addresses) + - [ ] [Blockquotes](http://getbootstrap.com/css/#type-blockquotes) +- [ ] Styles include replicas of Bootstrap's [buttons](http://getbootstrap.com/css/#buttons) +- [ ] Components include replicas of Bootstrap's: + - [ ] [Button Groups: Toolbar](http://getbootstrap.com/components/#btn-groups-toolbar) + - [ ] [Breadcrumbs](http://getbootstrap.com/components/#breadcrumbs) + - [ ] [Pagination](http://getbootstrap.com/components/#pagination) + - [ ] [Labels](http://getbootstrap.com/components/#labels) + - [ ] [Badges](http://getbootstrap.com/components/#badges) + - [ ] [Jumbotron](http://getbootstrap.com/components/#jumbotron) + - [ ] [Page Header](http://getbootstrap.com/components/#page-header) + - [ ] [Thumbnails](http://getbootstrap.com/components/#thumbnails) + - [ ] [Alerts](http://getbootstrap.com/components/#alerts) + - [ ] [List Group](http://getbootstrap.com/components/#list-group) + - [ ] [Panels](http://getbootstrap.com/components/#panels) + - [ ] [Wells](http://getbootstrap.com/components/#wells) +- [ ] Each component is featured on the demo HTML page `demo.html` under its own header along with the code used to generate it (for a simple example of what this could look like, see https://purecss.io/buttons/) + +### Stage 2: Modify the Styles + +Now it's time to make it look good 😎. Make changes to the CSS (not the HTML) to apply your own styles to the design. + +- [ ] Demo page `demo.html` shows components/elements with customized styles, including (but not limited to): + - [ ] A different typeface (take a look at [Google Fonts][google-fonts] for inspiration) + - [ ] A unique and different color palette (take a look at [Adobe Color CC][adobe-color] for inspiration) +- [ ] Style should be cohesive, connecting the elements as a whole. For example, a similar color palette is chosen. + +### Stretch + +- [ ] Demo page for stylized components is published as a [GitHub Pages site](https://pages.github.com/) +- [ ] Site includes instructions for how to include and use your framework + +## Quality Rubric + +**Good code style** +- HTML and CSS files are well formatted with proper spacing and indentation. [50 points] +- Descriptive, well-named functions, variables, files, CSS classes, etc. [50 points] + +**Good project management** +- Commit messages are concise and descriptive. [25 points] +- All features are added via pull requests. [25 points] +- Every pull request has a description summarizing the changes made. [25 points] +- Every pull request has been reviewed by at least one other person. [25 points] + +## Resources + +Courses & tutorials + +- Frontend Masters: [Intro to Web Development tutorial](https://frontendmasters.com/courses/web-development/) +- Code School: [Frontend Formations tutorial](https://www.codeschool.com/courses/front-end-formations) +- Code School: [Cracking the Case with Flexbox](https://www.codeschool.com/courses/cracking-the-case-with-flexbox) +- CSS Tricks: [HTML & Flexbox](https://css-tricks.com/video-screencasts/148-laying-things-html-flexbox-dee-gill/) + +Games + +- [Flexbox Defense](http://www.flexboxdefense.com/) +- [Flexbox Froggy](http://flexboxfroggy.com/) +- [CSS Diner](https://flukeout.github.io/) + +Guides + +- [Shay Howe: Learn to Code HTML & CSS](http://learn.shayhowe.com/html-css/) +- [MDN: How CSS works](https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/How_CSS_works) +- [MDN: CSS Layout](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout) +- [MDN: Styling Text](https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_text) +- [MDN: Styling Boxes](https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_boxes) + +Tools + +- [Google Fonts][google-fonts] +- [Adobe Color CC][adobe-color] + +[bootstrap]: http://getbootstrap.com/ +[google-fonts]: https://fonts.google.com/ +[adobe-color]: https://color.adobe.com/explore/newest/ From 87aa0266848157a669cc5cf4fdd8a3832ee10abf Mon Sep 17 00:00:00 2001 From: Ally Date: Mon, 6 Mar 2017 12:10:39 -0800 Subject: [PATCH 02/19] Update README.md --- README.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/README.md b/README.md index 9e891a1..c0d6b41 100644 --- a/README.md +++ b/README.md @@ -1,2 +1,4 @@ # Building-Bootstrap Build Your Own Bootsrap Project +Stephani & Ally +http://jsdev.learnersguild.org/goals/93-Build_Your_Own_Bootstrap.html From 43d4043abbc1306f9b6bde3b3160112f42a495ec Mon Sep 17 00:00:00 2001 From: Stephani McGrath Date: Mon, 6 Mar 2017 13:19:19 -0800 Subject: [PATCH 03/19] First commit connect css file to html --- Building-Bootstrap | 1 + CONTRACT.md | 142 --------------------------------------------- LICENSE | 21 ------- README.md | 4 -- index.html | 10 ++++ style.css | 1 + 6 files changed, 12 insertions(+), 167 deletions(-) create mode 160000 Building-Bootstrap delete mode 100644 CONTRACT.md delete mode 100644 LICENSE delete mode 100644 README.md create mode 100644 index.html create mode 100644 style.css diff --git a/Building-Bootstrap b/Building-Bootstrap new file mode 160000 index 0000000..87aa026 --- /dev/null +++ b/Building-Bootstrap @@ -0,0 +1 @@ +Subproject commit 87aa0266848157a669cc5cf4fdd8a3832ee10abf diff --git a/CONTRACT.md b/CONTRACT.md deleted file mode 100644 index 847527f..0000000 --- a/CONTRACT.md +++ /dev/null @@ -1,142 +0,0 @@ ---- -authors: -- "@asantos3026" -teamSize: 2 -issueNumber: 93 -title: Build Your Own Bootstrap -createdAt: '2016-10-08T05:47:41Z' -labels: -- practice -published: true -level: '1' -redirect_from: "/goals/93" ---- - -# Build Your Own Bootstrap - -## Challenge Rating - -This goal will likely be within your ZPD if you... - -- Can build basic web sites with HTML & CSS -- Are familiar with HTML/CSS frameworks like Bootstrap -- Are interested in strengthening your HTML & CSS skills -- Are interested in how HTML/CSS frameworks actually work -- Are interested in user interface (UI) design - -## Description - -- Tired of bootstrap templates 👎 that are so overused it makes the entire world wide web look the same? -- Passionate about front end development? -- Ever dreamt of designing web elements like carousels, navbars, jumbotrons, and grids based on your design aesthetic? -- Have you already built your own web elements in your previous LG projects? - -Then this is the project for you! 🎉 - -You will build your own web elements for the front end and publish that code so it can be later used by anyone to build their own site. Here is an example of a [Bootstrap type site that was built by 4 college kids!](http://materializecss.com/about.html) - -This project has two stages: - -1. _Reverse engineer_ a set of components from the [Bootstrap][bootstrap] framework. -2. _Modify_ your components with your own styles, fonts, and colors to make a unique set of design elements. - -## Context - -The first stage of the project will help you solidify your understanding of design elements on the web and how they work. You will get to know CSS and HTML inside and out. - -In the second stage, you will get a better understanding of design and user experience. Tap into your creative side on the front end. - -As you work through the project, make use of your browser's developer tools to fine-tune your design. Remember to keep your **feedback loops** small, fast, and specific! When you make changes to the HTML & CSS, don't just blindly guess-and-check: make hypotheses, test them, and then learn from your mistakes! - -Read and reference good resources on the web to build your conceptual understanding of HTML, CSS, and how the browser uses them to build a styled web page. Start with the [resources](#resources) section below. - -## Specifications - -### Required - -- [ ] Artifact is a GitHub repository (if you're looking for a name, why not "shoelace" ;) -- [ ] All CSS files are in a `css/` directory. -- [ ] Main page is called `demo.html` and includes an example of each component. -- [ ] No external CSS libraries/modules are used. Everything is written from scratch. -- [ ] The artifact produced is properly licensed, preferably with the [MIT license](https://opensource.org/licenses/MIT). - -### Stage 1: Reverse Engineer Bootstrap Components - -- [ ] Styles include replicas of Bootstrap's typography: - - [ ] [Headings](http://getbootstrap.com/css/#type-headings) - - [ ] [Body copy](http://getbootstrap.com/css/#type-body-copy) - - [ ] [Addresses](http://getbootstrap.com/css/#type-addresses) - - [ ] [Blockquotes](http://getbootstrap.com/css/#type-blockquotes) -- [ ] Styles include replicas of Bootstrap's [buttons](http://getbootstrap.com/css/#buttons) -- [ ] Components include replicas of Bootstrap's: - - [ ] [Button Groups: Toolbar](http://getbootstrap.com/components/#btn-groups-toolbar) - - [ ] [Breadcrumbs](http://getbootstrap.com/components/#breadcrumbs) - - [ ] [Pagination](http://getbootstrap.com/components/#pagination) - - [ ] [Labels](http://getbootstrap.com/components/#labels) - - [ ] [Badges](http://getbootstrap.com/components/#badges) - - [ ] [Jumbotron](http://getbootstrap.com/components/#jumbotron) - - [ ] [Page Header](http://getbootstrap.com/components/#page-header) - - [ ] [Thumbnails](http://getbootstrap.com/components/#thumbnails) - - [ ] [Alerts](http://getbootstrap.com/components/#alerts) - - [ ] [List Group](http://getbootstrap.com/components/#list-group) - - [ ] [Panels](http://getbootstrap.com/components/#panels) - - [ ] [Wells](http://getbootstrap.com/components/#wells) -- [ ] Each component is featured on the demo HTML page `demo.html` under its own header along with the code used to generate it (for a simple example of what this could look like, see https://purecss.io/buttons/) - -### Stage 2: Modify the Styles - -Now it's time to make it look good 😎. Make changes to the CSS (not the HTML) to apply your own styles to the design. - -- [ ] Demo page `demo.html` shows components/elements with customized styles, including (but not limited to): - - [ ] A different typeface (take a look at [Google Fonts][google-fonts] for inspiration) - - [ ] A unique and different color palette (take a look at [Adobe Color CC][adobe-color] for inspiration) -- [ ] Style should be cohesive, connecting the elements as a whole. For example, a similar color palette is chosen. - -### Stretch - -- [ ] Demo page for stylized components is published as a [GitHub Pages site](https://pages.github.com/) -- [ ] Site includes instructions for how to include and use your framework - -## Quality Rubric - -**Good code style** -- HTML and CSS files are well formatted with proper spacing and indentation. [50 points] -- Descriptive, well-named functions, variables, files, CSS classes, etc. [50 points] - -**Good project management** -- Commit messages are concise and descriptive. [25 points] -- All features are added via pull requests. [25 points] -- Every pull request has a description summarizing the changes made. [25 points] -- Every pull request has been reviewed by at least one other person. [25 points] - -## Resources - -Courses & tutorials - -- Frontend Masters: [Intro to Web Development tutorial](https://frontendmasters.com/courses/web-development/) -- Code School: [Frontend Formations tutorial](https://www.codeschool.com/courses/front-end-formations) -- Code School: [Cracking the Case with Flexbox](https://www.codeschool.com/courses/cracking-the-case-with-flexbox) -- CSS Tricks: [HTML & Flexbox](https://css-tricks.com/video-screencasts/148-laying-things-html-flexbox-dee-gill/) - -Games - -- [Flexbox Defense](http://www.flexboxdefense.com/) -- [Flexbox Froggy](http://flexboxfroggy.com/) -- [CSS Diner](https://flukeout.github.io/) - -Guides - -- [Shay Howe: Learn to Code HTML & CSS](http://learn.shayhowe.com/html-css/) -- [MDN: How CSS works](https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/How_CSS_works) -- [MDN: CSS Layout](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout) -- [MDN: Styling Text](https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_text) -- [MDN: Styling Boxes](https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_boxes) - -Tools - -- [Google Fonts][google-fonts] -- [Adobe Color CC][adobe-color] - -[bootstrap]: http://getbootstrap.com/ -[google-fonts]: https://fonts.google.com/ -[adobe-color]: https://color.adobe.com/explore/newest/ diff --git a/LICENSE b/LICENSE deleted file mode 100644 index 6fb79b3..0000000 --- a/LICENSE +++ /dev/null @@ -1,21 +0,0 @@ -MIT License - -Copyright (c) 2017 Ally - -Permission is hereby granted, free of charge, to any person obtaining a copy -of this software and associated documentation files (the "Software"), to deal -in the Software without restriction, including without limitation the rights -to use, copy, modify, merge, publish, distribute, sublicense, and/or sell -copies of the Software, and to permit persons to whom the Software is -furnished to do so, subject to the following conditions: - -The above copyright notice and this permission notice shall be included in all -copies or substantial portions of the Software. - -THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR -IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, -FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE -AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER -LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, -OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE -SOFTWARE. diff --git a/README.md b/README.md deleted file mode 100644 index c0d6b41..0000000 --- a/README.md +++ /dev/null @@ -1,4 +0,0 @@ -# Building-Bootstrap -Build Your Own Bootsrap Project -Stephani & Ally -http://jsdev.learnersguild.org/goals/93-Build_Your_Own_Bootstrap.html diff --git a/index.html b/index.html new file mode 100644 index 0000000..263a8ed --- /dev/null +++ b/index.html @@ -0,0 +1,10 @@ + + + + + Build your own Bootstrap + + + + + diff --git a/style.css b/style.css new file mode 100644 index 0000000..8b13789 --- /dev/null +++ b/style.css @@ -0,0 +1 @@ + From cf89400f1e1a6204f815a3eb80df74736e5e9425 Mon Sep 17 00:00:00 2001 From: Ally Kendall Date: Tue, 7 Mar 2017 14:16:45 -0800 Subject: [PATCH 04/19] pushing up work to share --- Building-Bootstrap | 1 - demo.html | 38 ++++++++++++++++++++++++++++++++++++++ index.html | 10 ---------- style.css | 25 +++++++++++++++++++++++++ 4 files changed, 63 insertions(+), 11 deletions(-) delete mode 160000 Building-Bootstrap create mode 100644 demo.html delete mode 100644 index.html diff --git a/Building-Bootstrap b/Building-Bootstrap deleted file mode 160000 index 87aa026..0000000 --- a/Building-Bootstrap +++ /dev/null @@ -1 +0,0 @@ -Subproject commit 87aa0266848157a669cc5cf4fdd8a3832ee10abf diff --git a/demo.html b/demo.html new file mode 100644 index 0000000..293a5ad --- /dev/null +++ b/demo.html @@ -0,0 +1,38 @@ + + + + + Build Your Own Bootstrap + + + +
+
+

Headings

+

To style headings in various sizes, add the .headings class to your <h1> through <h6> tags.

+
+

h1. Vast Quoll

+

h2. Vast Quoll

+

h3. Vast Quoll

+

h4. Vast Quoll

+
h5. Vast Quoll
+
h6. Vast Quoll
+
+ + <h1 class="headings">h1. Vast Quoll</h1> + +
+

Secondary Heading Text

+

Here is secondary text:

+

h1. Vast Quoll Secondary text

+

h2. Vast Quoll Secondary text

+

h3. Vast Quoll Secondary text

+

h4. Vast Quoll Secondary text

+
h5. Vast Quoll Secondary text
+
h6. Vast Quoll Secondary text
+ +
+
+
+ + diff --git a/index.html b/index.html deleted file mode 100644 index 263a8ed..0000000 --- a/index.html +++ /dev/null @@ -1,10 +0,0 @@ - - - - - Build your own Bootstrap - - - - - diff --git a/style.css b/style.css index 8b13789..97d9ae5 100644 --- a/style.css +++ b/style.css @@ -1 +1,26 @@ +.section-title { + color: blue; + background-color: #d6e2ed; +} +.element-color { + color: coral; +} + +.element-in-text { + color: coral; + background-color: #d6e2ed; +} + +.headings { + color: grey; + font-family: sans-serif; +} + +.class-name { + color: blue; +} + +.class { + color: green; +} From 20c0beb210dcbc8f53fde02fccfbe495a8a9bf39 Mon Sep 17 00:00:00 2001 From: Stephani McGrath Date: Tue, 7 Mar 2017 14:43:42 -0800 Subject: [PATCH 05/19] phase one headings --- Building-Bootstrap | 1 + demo.html | 10 ++++++++-- 2 files changed, 9 insertions(+), 2 deletions(-) create mode 160000 Building-Bootstrap diff --git a/Building-Bootstrap b/Building-Bootstrap new file mode 160000 index 0000000..87aa026 --- /dev/null +++ b/Building-Bootstrap @@ -0,0 +1 @@ +Subproject commit 87aa0266848157a669cc5cf4fdd8a3832ee10abf diff --git a/demo.html b/demo.html index 293a5ad..3e6ad59 100644 --- a/demo.html +++ b/demo.html @@ -19,8 +19,14 @@
h5. Vast Quoll
h6. Vast Quoll
- <h1 class="headings">h1. Vast Quoll</h1> +

<h1 class="headings">h1. Vast Quoll</h1>

+

<h2 class="headings">h2. Vast Quoll</h2>

+

<h3 class="headings">h3. Vast Quoll</h3>

+

<h4 class="headings">h4. Vast Quoll</h4>

+

<h5 class="headings">h5. Vast Quoll</h5>

+

<h6 class="headings">h6. Vast Quoll</h6>

 + + if needed example code --> From 9c4f2b201ad429d16abc1a497a9fcc5998b0a410 Mon Sep 17 00:00:00 2001 From: Stephani McGrath Date: Tue, 7 Mar 2017 17:47:01 -0800 Subject: [PATCH 06/19] day two headings and body copy --- Building-Bootstrap | 1 + demo.html | 79 +++++++++++++++++++++++++++++++++++++++------- style.css | 1 + 3 files changed, 70 insertions(+), 11 deletions(-) create mode 160000 Building-Bootstrap diff --git a/Building-Bootstrap b/Building-Bootstrap new file mode 160000 index 0000000..87aa026 --- /dev/null +++ b/Building-Bootstrap @@ -0,0 +1 @@ +Subproject commit 87aa0266848157a669cc5cf4fdd8a3832ee10abf diff --git a/demo.html b/demo.html index 293a5ad..d15a6ff 100644 --- a/demo.html +++ b/demo.html @@ -9,7 +9,10 @@

Headings

-

To style headings in various sizes, add the .headings class to your <h1> through <h6> tags.

+

To style headings in various sizes, add the + .headings class to your + <h1> through + <h6> tags.

h1. Vast Quoll

h2. Vast Quoll

@@ -18,21 +21,75 @@

h4. Vast Quoll

h5. Vast Quoll
h6. Vast Quoll
+ - <h1 class="headings">h1. Vast Quoll</h1> +

+ <h1 + class="headings">h1. Vast Quoll</h1> +

+

+ <h2 + class="headings">h2. Vast Quoll</h2> +

+

+ <h3 + class="headings">h3. Vast Quoll</h3> +

+

+ <h4 + class="headings">h4. Vast Quoll</h4> +

+

+ <h5 + class="headings">h5. Vast Quoll</h5> +

+

+ <h6 + class="headings">h6. Vast Quoll</h6> +

+ +

Secondary Headings

+

To create secondary text, add the .small class to your <h1> through <h6> tags.

+

h1. Vast Quoll Secondary text

+

h2. Vast Quoll Secondary text

+

h3. Vast Quoll Secondary text

+

h4. Vast Quoll Secondary text

+
h5. Vast Quoll Secondary text
+
h6. Vast Quoll Secondary text
+ --> +
+
+

Body copy

+

Vast CSS global default font-size is 13px, with a line-height of 1.5. This is applied to the <body> and all paragraphs. Including, <p> (paragraphs) receive a bottom margin of 10px. +

diff --git a/style.css b/style.css index 97d9ae5..03a123c 100644 --- a/style.css +++ b/style.css @@ -1,3 +1,4 @@ + .section-title { color: blue; background-color: #d6e2ed; From 7a867add149b1143b342d001cb1a11a420bfa1ae Mon Sep 17 00:00:00 2001 From: Stephani McGrath Date: Wed, 8 Mar 2017 09:34:28 -0800 Subject: [PATCH 07/19] first pull request --- demo.html | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/demo.html b/demo.html index d15a6ff..4905672 100644 --- a/demo.html +++ b/demo.html @@ -82,13 +82,14 @@
h6. Vast Quoll Secondary text

Body copy

-

Vast CSS global default font-size is font-size is 13px, with a line-height of 1.5. This is applied to the <body> and all paragraphs. Including, <p> (paragraphs) receive a bottom margin of 10px. +

From e292041e609f78eebacb11d86c53568bd637c359 Mon Sep 17 00:00:00 2001 From: Stephani McGrath Date: Wed, 8 Mar 2017 09:55:39 -0800 Subject: [PATCH 08/19] testing git --- demo.html | 1 + 1 file changed, 1 insertion(+) diff --git a/demo.html b/demo.html index 4905672..c18f2a7 100644 --- a/demo.html +++ b/demo.html @@ -76,6 +76,7 @@

h3. Vast Quoll Secondary text

h4. Vast Quoll Secondary text

h5. Vast Quoll Secondary text
h6. Vast Quoll Secondary text
+ --> From 9764372d88e80a420118a04495090ad0b2f637d6 Mon Sep 17 00:00:00 2001 From: Stephani McGrath Date: Wed, 8 Mar 2017 10:33:29 -0800 Subject: [PATCH 09/19] driver swap --- demo.html | 11 ++++++++++- style.css | 6 ++++++ 2 files changed, 16 insertions(+), 1 deletion(-) diff --git a/demo.html b/demo.html index c18f2a7..7b7a2f0 100644 --- a/demo.html +++ b/demo.html @@ -81,7 +81,7 @@
h6. Vast Quoll Secondary text
-
+

Body copy

Vast CSS global default font-size is <body> and all paragraphs. Including, <p> (paragraphs) receive a bottom margin of 10px.

+ +

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

+
+

Lead body copy

+

Make a paragraph stand out by adding .lead.

diff --git a/style.css b/style.css index 03a123c..bdb904e 100644 --- a/style.css +++ b/style.css @@ -25,3 +25,9 @@ .class { color: green; } + +p { + font-size: 13px; + line-height: 1.5; + margin-bottom: 10px; +} From 28e3c9cc386b73996497efe1264e76a02cae0812 Mon Sep 17 00:00:00 2001 From: Ally Kendall Date: Wed, 8 Mar 2017 12:08:20 -0800 Subject: [PATCH 10/19] finish structure body and leads --- demo.html | 164 +++++++++++++++++++++++++++++++++--------------------- style.css | 13 +++-- 2 files changed, 109 insertions(+), 68 deletions(-) diff --git a/demo.html b/demo.html index 7b7a2f0..3c87510 100644 --- a/demo.html +++ b/demo.html @@ -6,14 +6,17 @@ -
-
+

Headings

+ +

To style headings in various sizes, add the .headings class to your <h1> through <h6> tags.

-
+
+ +

h1. Vast Quoll

h2. Vast Quoll

h3. Vast Quoll

@@ -22,53 +25,56 @@
h5. Vast Quoll
h6. Vast Quoll
- -

- <h1 - class="headings">h1. Vast Quoll</h1> +

+ +

+ <h1 + class="headings">h1. Vast Quoll</h1> +

+

+ <h2 + class="headings">h2. Vast Quoll</h2> +

+

+ <h3 + class="headings">h3. Vast Quoll</h3> +

+

+ <h4 + class="headings">h4. Vast Quoll</h4>

- <h2 - class="headings">h2. Vast Quoll</h2> + <h5 + class="headings">h5. Vast Quoll</h5>

- <h3 - class="headings">h3. Vast Quoll</h3> + <h6 + class="headings">h6. Vast Quoll</h6>

-

- <h4 - class="headings">h4. Vast Quoll</h4> -

-

- <h5 - class="headings">h5. Vast Quoll</h5> -

-

- <h6 - class="headings">h6. Vast Quoll</h6> -

- + +
+ - --> +
+
+
+

Body copy

+ +
+

Vast CSS global default font-size is 13px, with a line-height of 1.5. This is applied to the <body> and all paragraphs. Including, <p> (paragraphs) receive a bottom margin of 10px. +

+
+ +
+

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

+
-
-
-

Body copy

-

Vast CSS global default font-size is 13px, with a line-height of 1.5. This is applied to the <body> and all paragraphs. Including, <p> (paragraphs) receive a bottom margin of 10px. -

-

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?!

+
+

Lead body copy

-

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.

+
+

Make a paragraph stand out by adding .lead.

+
-

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.

-
-
-

Lead body copy

-

Make a paragraph stand out by adding .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 + class="lead">...</p> +

+
+
diff --git a/style.css b/style.css index bdb904e..72d7088 100644 --- a/style.css +++ b/style.css @@ -1,3 +1,8 @@ +p { + font-size: 13px; + line-height: 1.5; + margin-bottom: 10px; +} .section-title { color: blue; @@ -26,8 +31,8 @@ color: green; } -p { - font-size: 13px; - line-height: 1.5; - margin-bottom: 10px; +.lead { + font-family: sans-serif; + font-size: 16px; + font-weight: lighter; } From 9b28ce750be3d2a49f596044e67c9d4612e0a734 Mon Sep 17 00:00:00 2001 From: Ally Kendall Date: Wed, 8 Mar 2017 17:19:52 -0800 Subject: [PATCH 11/19] fleshing out addresses section in html and adding address in css --- demo.html | 87 +++++++++++++++++++++++++++++++++++++++++++++---------- style.css | 12 ++++++++ 2 files changed, 84 insertions(+), 15 deletions(-) diff --git a/demo.html b/demo.html index 3c87510..fab331c 100644 --- a/demo.html +++ b/demo.html @@ -13,7 +13,8 @@

Headings

To style headings in various sizes, add the .headings class to your <h1> through - <h6> tags.

+ <h6> tags. +

@@ -91,13 +92,13 @@
h6. Vast Quoll Secondary text

Body copy

-

Vast CSS global default font-size is 13px, with a line-height of 1.5. This is applied to the <body> and all paragraphs. Including, <p> (paragraphs) receive a bottom margin of 10px. +

Vast CSS global default + font-size is + 13px, with a + line-height of + 1.5. This is applied to the + <body> and all paragraphs. Including, + <p> (paragraphs) receive a bottom margin of 10px.

@@ -128,14 +129,70 @@

Lead body copy

-

- <p - class="lead""lead">...</p> +

+ +
+
+ +
+

Addresses

+ +
+

Present contact information in our default style by using the <address> tag. Preserve your formatting by ending all lines with <br>.

+
+ +
+
+ Learners Guild
+ 492 Ninth Street (Garden Level)
+ Oakland, CA 94607
+ P: (123) 456-7890 +
+ +
+ Full Name
+ first.last@example.com +
+
+ +
+ + <address>
+ <strong>Learners Guild</strong><br>
+ 492 Ninth Street (Garden Level)<br>
+ Oakland, CA 94607<br>
+ <abbr + title="Phone">...</p> -

+ -->P:</abbr> + (123) 456-7890
+ </address>

+ <address>
+ <strong>Full Name</strong><br>
+ <a + href="mailto:#">first.last@example.com</a>
+ </address> +
diff --git a/style.css b/style.css index 72d7088..cf5c2e3 100644 --- a/style.css +++ b/style.css @@ -4,6 +4,14 @@ p { margin-bottom: 10px; } +address { + font-size: 14px; + line-height: 1.5; + margin-bottom: 7px; + font-style: normal; + font-family: sans-serif; +} + .section-title { color: blue; background-color: #d6e2ed; @@ -36,3 +44,7 @@ p { font-size: 16px; font-weight: lighter; } + +.tab { + margin-left: 40px; +} From ab0dec7e0a354d237de682326f868632a133f988 Mon Sep 17 00:00:00 2001 From: Ally Kendall Date: Thu, 9 Mar 2017 11:27:58 -0800 Subject: [PATCH 12/19] added blockquotes section in html and styled in css. made minor changes in other sections to clean up code. --- demo.html | 52 ++++++++++++++++++++++++++++++++++++++++------------ style.css | 8 ++++++++ 2 files changed, 48 insertions(+), 12 deletions(-) diff --git a/demo.html b/demo.html index fab331c..7a53122 100644 --- a/demo.html +++ b/demo.html @@ -103,7 +103,7 @@

Body copy

-

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 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 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 HODOR hodor, hodor hodor, hodor. Hodor hodor hodor.

@@ -121,11 +121,13 @@

Body copy

Lead body copy

-

Make a paragraph stand out by adding .lead.

+

Make a paragraph stand out by adding .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.

+

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

@@ -140,16 +142,17 @@

Lead body copy

- + -
-

Addresses

+
+

Addresses

-
-

Present contact information in our default style by using the <address> tag. Preserve your formatting by ending all lines with <br>.

-
+
+

Present contact information in our default style by using the <address> tag. Preserve your formatting by ending all lines with <br>. +

+
-
+
Learners Guild
492 Ninth Street (Garden Level)
@@ -163,7 +166,7 @@

Addresses

-
+
<address>
<strong>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.</p>
+ <blockquote> +
+
diff --git a/style.css b/style.css index cf5c2e3..c427699 100644 --- a/style.css +++ b/style.css @@ -12,6 +12,14 @@ address { font-family: sans-serif; } +blockquote { + font-family: sans-serif; + font-size: 75%; + margin: 0 0 20px; + padding: 10px 20px; + border-left: 5px solid #e5fdfa; +} + .section-title { color: blue; background-color: #d6e2ed; From 314811d702b28bf0f2bee3f63a944894b11b3a79 Mon Sep 17 00:00:00 2001 From: Stephani McGrath Date: Thu, 9 Mar 2017 12:02:58 -0800 Subject: [PATCH 13/19] added buttons in html --- demo.html | 65 +++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 65 insertions(+) diff --git a/demo.html b/demo.html index fab331c..b407614 100644 --- a/demo.html +++ b/demo.html @@ -195,5 +195,70 @@

Addresses
+ +
+

Buttons

+ +
+

Use the button classes on an + <a>, + <button>, or + <input>element. +

+
+ +
+

+ Link + + + +

+
+
+ +

+ <a + class="btn btn-default" + href="#" + role="button">Link</a> +

+

+ <button + class="btn btn-default" + type="submit">Button</button> +

+

+ <input + class="btn btn-default" + type="button" + value= + "Input"> +

+

+ <input + class="btn btn-default" + type="submit" + value="Submit"> +

+ +
+
From 0868e76424e8c28da514bc4533a32bcccdc26e5d Mon Sep 17 00:00:00 2001 From: Ally Kendall Date: Thu, 9 Mar 2017 14:15:06 -0800 Subject: [PATCH 14/19] added forward slash --- demo.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/demo.html b/demo.html index 7a53122..69e6277 100644 --- a/demo.html +++ b/demo.html @@ -220,7 +220,7 @@

Blockquotes

<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.</p>
- <blockquote> + </blockquote> From afd347114323a099395f306e1ede706a1e069a92 Mon Sep 17 00:00:00 2001 From: Ally Kendall Date: Thu, 9 Mar 2017 18:45:38 -0800 Subject: [PATCH 15/19] minor html cleanup and preliminary css styling --- demo.html | 73 +++++++++++++++++++---------------- style.css | 113 +++++++++++++++++++++++++++++++++++++++++++++--------- 2 files changed, 133 insertions(+), 53 deletions(-) diff --git a/demo.html b/demo.html index b400fc7..fa7e2e3 100644 --- a/demo.html +++ b/demo.html @@ -4,26 +4,33 @@ Build Your Own Bootstrap + +
+
+

Vast CSS

+
Because Bootstrap is b.s.
+
+

Headings

To style headings in various sizes, add the - .headings class to your + .vast-heading class to your <h1> through <h6> tags.

-

h1. Vast Quoll

-

h2. Vast Quoll

-

h3. Vast Quoll

-

h4. Vast Quoll

-
h5. Vast Quoll
-
h6. Vast Quoll
+

h1. Vast Quoll

+

h2. Vast Quoll

+

h3. Vast Quoll

+

h4. Vast Quoll

+
h5. Vast Quoll
+
h6. Vast Quoll
@@ -31,42 +38,42 @@
h6. Vast Quoll

<h1 class="headings""vast-heading">h1. Vast Quoll</h1>

<h2 class="headings""vast-heading">h2. Vast Quoll</h2>

<h3 class="headings""vast-heading">h3. Vast Quoll</h3>

<h4 class="headings""vast-heading">h4. Vast Quoll</h4>

<h5 class="headings""vast-heading">h5. Vast Quoll</h5>

<h6 class="headings""vast-heading">h6. Vast Quoll</h6>

@@ -74,15 +81,15 @@
h6. Vast Quoll
@@ -121,12 +128,12 @@

Body copy

Lead body copy

-

Make a paragraph stand out by adding .lead. +

Make a paragraph stand out by adding .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. +

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.

@@ -135,7 +142,7 @@

Lead body copy

<p class="lead""vast-lead">...</p> @@ -225,7 +232,7 @@

Blockquotes

-
+

Buttons

@@ -237,19 +244,17 @@

Buttons

-

- Link - - - -

+ Link + + +

<a class="btn btn-default" + -->"vast-btn" href="#" role="btn btn-default" + -->"vast-btn" type="submit">Button"btn btn-default" + -->"vast-btn" type="button" value= @@ -279,7 +284,7 @@

Buttons

<input class="btn btn-default" + -->"vast-btn" type="submit" value="vast-heading">h1. Vast Quollh1. Vast Quoll</h1>

- <h2 - class="vast-heading">h2. Vast Quollh2. Vast Quoll</h2>

- <h3 - class="vast-heading">h3. Vast Quollh3. Vast Quoll</h3>

- <h4 - class="vast-heading">h4. Vast Quollh4. Vast Quoll</h4> -

-

- <h5 - class="vast-heading">h5. Vast Quollh5. Vast Quoll</h5> -

-

- <h6 - class="vast-heading">h6. Vast Quollh6. Vast Quoll</h6> -

+

- +
+

Secondary Headings

+ +
+

To create secondary text, add the + .small class to your + <h1> through + <h6> tags. +

+
+ +
+

h1. Vast Quoll Secondary text

+

h2. Vast Quoll Secondary text

+

h3. Vast Quoll Secondary text

+

h4. Vast Quoll Secondary text

+
h5. Vast Quoll Secondary text
+
h6. Vast Quoll Secondary 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> +

+ +
+
-
+

Body copy

@@ -109,7 +156,7 @@

Body copy

-
+

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

@@ -124,7 +171,7 @@

Body copy

-
+

Lead body copy

@@ -132,7 +179,7 @@

Lead body copy

-
+

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.

@@ -151,7 +198,7 @@

Lead body copy

-
+

Addresses

@@ -159,53 +206,58 @@

Addresses

-
-
- Learners Guild
- 492 Ninth Street (Garden Level)
- Oakland, CA 94607
- P: (123) 456-7890 -
+
+

+

+ Learners Guild
+ 492 Ninth Street (Garden Level)
+ Oakland, CA 94607
+ P: (123) 456-7890 +
-
- Full Name
- first.last@example.com -
+
+ Full Name
+ first.last@example.com +
+

- <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>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> +

-
+ +

Blockquotes

@@ -213,7 +265,7 @@

Blockquotes

-
+

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. @@ -222,17 +274,20 @@

Blockquotes

- - <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.</p>
- </blockquote> +

+ + <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.</p>
+ </blockquote> + +

-
+

Buttons

@@ -241,9 +296,9 @@

Buttons

<button>, or <input>element.

-
+ -
+
Link @@ -294,5 +349,6 @@

Buttons
+ diff --git a/style.css b/style.css index ceb893d..a22262c 100644 --- a/style.css +++ b/style.css @@ -4,6 +4,10 @@ body { background-image: url("https://www.transparenttextures.com/patterns/tileable-wood.png"); } +.body-content { + margin: 0px 100px 50px; +} + #main-header { background-color: #f78671; color: #f6e5d7; @@ -11,22 +15,24 @@ body { position: fixed; top: 0px; display: flex; - align-content: center; justify-content: center; + flex-direction: row; + align-items: flex-end; + padding-bottom: 20px; } -#main-header h1 { +#title { font-size: 55px; font-family: 'Raleway', sans-serif; } -#main-header h6 { +#sub-title { font-family: 'Open Sans Condensed', sans-serif; font-size: 30px; } #headings-section { - margin-top: 200px; + margin-top: 220px; background-color: rgba(246, 299, 215, 0.3); } @@ -38,6 +44,11 @@ body { background-color: rgba(246, 299, 215, 0.3); } +small, .small { + color: #6d7370; + font-size: 0.8em; +} + #blockquotes { background-color: rgba(246, 299, 215, 0.3); } @@ -58,7 +69,7 @@ code { } address { - font-size: 14px; + font-size: 20px; line-height: 1.5; margin-bottom: 7px; font-style: normal; @@ -70,15 +81,20 @@ blockquote { font-size: 75%; margin: 0 0 20px; padding: 10px 20px; - border-left: 5px solid #e5fdfa; + border-left: 7px solid #f78671; } -.flex-container { +.flex-container.sample-text { display: flex; - flex-direction: column;; - width: 1000px; - height: 300px; - background-color: lightgrey; + flex-direction: column; + background-color: rgba(201, 210, 203, 0.8); + margin-bottom: -20px; + padding: 5px 200px; +} + +.flex-container.sample-text.buttons { + display: flex; + flex-direction: row; } .section-title { @@ -86,10 +102,8 @@ blockquote { color: #2f3733; background-color: #86baaa; text-align: center; -} - -.breakdown { - + margin-top: 0px; + border-radius: 5px; } .element-color { @@ -114,9 +128,46 @@ blockquote { margin-left: 40px; } -.vast-heading { +h1, .vast-h1 { + color: #2f3733; + font-family: 'Open Sans Condensed', sans-serif; + font-weight: 700; + font-size: 2em; +} + +h2, .vast-h2 { + color: #2f3733; + font-family: 'Open Sans Condensed', sans-serif; + font-weight: 700; + font-size: 1.5em; +} + +h3, .vast-h3 { + color: #2f3733; + font-family: 'Open Sans Condensed', sans-serif; + font-weight: 700; + font-size: 1.17em; +} + +h4, .vast-h4 { color: #2f3733; font-family: 'Open Sans Condensed', sans-serif; + font-weight: 700; + font-size: 1em; +} + +h5, .vast-h5 { + color: #2f3733; + font-family: 'Open Sans Condensed', sans-serif; + font-weight: 700; + font-size: .83em; +} + +h6, .vast-h6 { + color: #2f3733; + font-family: 'Open Sans Condensed', sans-serif; + font-weight: 700; + font-size: .67em; } .vast-lead { @@ -126,32 +177,40 @@ blockquote { } .sample-code { - background-color: rgba(47, 55, 51, 1); + background-color: rgba(47, 55, 51, 0.8); color: #f6e5d7; + padding: 0px 200px 5px 200px; } -.sample-text { - font-size: 13px; - -} - - button.vast-btn, input.vast-btn { font-family: 'Raleway', sans-serif; background-color: #f78671; + color: #2f3733; margin: 5px; border-radius: 5px; width: 100px; height: 50px; font-size: 23px; - - - } -a.vast-btn { +a { font-family: 'Raleway', sans-serif; font-size: 23px; color: #6b9488; padding-right: 5px; + padding-top: 15px; +} + +.breakdown { + padding: 0px 200px; +} + +.sections { + border: 2px solid #2f3733; + border-radius: 5px; + margin-top: 50px; +} + +.secondary-section { + margin-top: 20px; } From aa6a0d990fad4c16f2784876efa26b2dd29f7cb4 Mon Sep 17 00:00:00 2001 From: Stephani McGrath Date: Fri, 10 Mar 2017 19:01:16 -0800 Subject: [PATCH 18/19] final touchups and added button options --- demo.html | 160 +++++++++++++++++++++++++++++++++++++----------------- style.css | 25 +++++++++ 2 files changed, 135 insertions(+), 50 deletions(-) diff --git a/demo.html b/demo.html index 10e50ca..01d1381 100644 --- a/demo.html +++ b/demo.html @@ -148,7 +148,7 @@

Body copy

Vast CSS global default font-size is - 13px, with a + 20px, with a line-height of 1.5. This is applied to the <body> and all paragraphs. Including, @@ -288,8 +288,7 @@

Blockquotes

-

Buttons

- +

Buttons

Use the button classes on an <a>, @@ -297,58 +296,119 @@

Buttons

<input>element.

- -
+
Link -
-
- -

- <a - class="vast-btn" - href="#" - role="button">Link</a> -

-

- <button - class="vast-btn" - type="submit">Button</button> -

-

- <input - class="vast-btn" - type="button" - value= - "Input""vast-btn" + href="#" + role="button">Link</a> +

+

+ <button + class="vast-btn" + type="submit">Button</button> +

+

+ <input + class= "vast-btn" + type= "button" + value= + "Input"> +

+

+ <input + class="vast-btn" + type="submit" + value="Submit"> -

-

- <input - class="vast-btn" - type="submit" - value="Submit"> -

- -
-
+

+ + + +
+

Sizes

+
+

For your fancy pleasure we offer you a variety of sizes. Add + .btn-lg or + .btn-small for additional sizes. +

+
+
+

+ + +

+

+ + +

+
+
+ +

+ <p>
+ <button + type="button" + class="vast-primary-btn btn-large">Large button + </button>
+ <button + type="button" + class="vast-secondary-btn btn-large">Large button + </button>
+ </p> +

+ +

+ <p>
+ <button + type="button" + class="vast-primary-btn btn-small">Small button + </button>
+ <button + type="button" + class="vast-secondary-btn btn-small">Small button + </button>
+ </p> +

+ +
+
+
+ diff --git a/style.css b/style.css index a22262c..ee5701f 100644 --- a/style.css +++ b/style.css @@ -193,6 +193,31 @@ button.vast-btn, input.vast-btn { font-size: 23px; } +button.vast-primary-btn { + font-family: 'Raleway', sans-serif; + background-color: #f78671; +} + +button.vast-secondary-btn { + font-family: 'Raleway', sans-serif; + background-color: #f6e5d7; +} + +button.btn-large { + margin: 5px; + border-radius: 5px; + width: 150px; + height: 100px; + font-size: 23px; +} + +button.btn-small { + border-radius: 5px; + width: 75px; + height: 35px; + +} + a { font-family: 'Raleway', sans-serif; font-size: 23px; From 38b5a620dadf1cb479b5676033e1a27b0dc1f629 Mon Sep 17 00:00:00 2001 From: Ally Kendall Date: Fri, 10 Mar 2017 19:07:54 -0800 Subject: [PATCH 19/19] cleaned up HTML and CSS --- demo.html | 529 ++++++++++++++++++++++++++---------------------------- style.css | 181 ++++++++++--------- 2 files changed, 340 insertions(+), 370 deletions(-) diff --git a/demo.html b/demo.html index 10e50ca..cd71fb0 100644 --- a/demo.html +++ b/demo.html @@ -1,212 +1,193 @@ - - - Build Your Own Bootstrap - - - - + + + Build Your Own Bootstrap + + + +

Vast CSS

'Cause Bootstrap is B.S.

-
- -
-

Headings

- -
-

To style headings in various sizes, add the - .vast-h1 through - .vast-h6 class to your inline elements or simply use the - <h1> through - <h6> tags. -

-
- -
-

h1. Vast Quoll

-

h2. Vast Quoll

-

h3. Vast Quoll

-

h4. Vast Quoll

-
h5. Vast Quoll
-
h6. Vast Quoll
-
- -
- -

- <h1>h1. Vast Quoll</h1> -

-

- <h2>h2. Vast Quoll</h2> -

-

- <h3>h3. Vast Quoll</h3> -

-

- <h4>h4. Vast Quoll</h4> -

-

- <h5>h5. Vast Quoll</h5> -

-

- <h6>h6. Vast Quoll</h6> -

- -
- -
-

Secondary Headings

- +
+

Headings

-

To create secondary text, add the - .small class to your - <h1> through - <h6> tags. +

To style headings in various sizes, add the + .vast-h1 through + .vast-h6 class to your inline elements or simply use the + <h1> through + <h6> tags.

-
-

h1. Vast Quoll Secondary text

-

h2. Vast Quoll Secondary text

-

h3. Vast Quoll Secondary text

-

h4. Vast Quoll Secondary text

-
h5. Vast Quoll Secondary text
-
h6. Vast Quoll Secondary text
+

h1. Vast Quoll

+

h2. Vast Quoll

+

h3. Vast Quoll

+

h4. Vast Quoll

+
h5. Vast Quoll
+
h6. Vast Quoll
-

<h1>h1. Vast Quoll - <small>Secondary text</small></h1> + -->h1. Vast Quoll</h1>

<h2>h2. Vast Quoll - <small>Secondary text</small></h2> + -->h2. Vast Quoll</h2>

<h3>h3. Vast Quoll - <small>Secondary text</small></h3> + -->h3. Vast Quoll</h3>

<h4>h4. Vast Quoll - <small>Secondary text</small></h4> + -->h4. Vast Quoll</h4>

<h5>h5. Vast Quoll - <small>Secondary text</small></h5> + -->h5. Vast Quoll</h5>

<h6>h6. Vast Quoll - <small>Secondary text</small></h6> + -->h6. Vast Quoll</h6>

- -
-
-
- -
-
-

Body copy

- -
-

Vast CSS global default - font-size is - 13px, with a - line-height of - 1.5. This is applied to the - <body> and all paragraphs. Including, - <p> (paragraphs) receive a bottom margin of 10px. -

-
- -
-

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

+

Secondary Headings

+
+

To create secondary text, add the + .small class to your + <h1> through + <h6> tags.

-
- -
-

Lead body copy

- -
-

Make a paragraph stand out by adding .vast-lead. -

+
+

h1. Vast Quoll Secondary text

+

h2. Vast Quoll Secondary text

+

h3. Vast Quoll Secondary text

+

h4. Vast Quoll Secondary text

+
h5. Vast Quoll Secondary text
+
h6. Vast Quoll Secondary 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> +

+ +
- -
-

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

-
- -
- +
+
+
+

Body copy

+
+

Vast CSS global default + font-size is + 13px, with a + line-height of + 1.5. This is applied to the + <body> and all paragraphs. Including, + <p> (paragraphs) receive a bottom margin of 10px. +

+
+
+

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. 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 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 - class="vast-lead">...</p>

- +
+
+
+

Lead body copy

+
+

Make a paragraph stand out by adding .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 + class="vast-lead">...</p> +

+ +
-
- -
-

Addresses

- -
-

Present contact information in our default style by using the <address> tag. Preserve your formatting by ending all lines with <br>. -

-
- -
+
+
+

Addresses

+
+

Present contact information in our default style by using the <address> tag. Preserve your formatting by ending all lines with <br>. +

+
+

Learners Guild
@@ -214,82 +195,73 @@

Addresses

Oakland, CA 94607
P: (123) 456-7890
-
Full Name
first.last@example.com

- -
- +
+ +

+ <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> +

+ +
+
+
+

Blockquotes

+
+

Style and content changes for simple variation on a standard <blockquote>. +

+
+
+

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

- +
-
- -
-

Blockquotes

- -
-

Style and content changes for simple variation on a standard <blockquote>. -

-
- -
-
+

- 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. + + <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.</p>
+ </blockquote> +

-
-
- -
-

- - <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.</p>
- </blockquote> - -

-
-
+
-
-

Buttons

- +

Buttons

Use the button classes on an <a>, @@ -297,58 +269,57 @@

Buttons

<input>element.

- -
+
Link -
-
- -

- <a - class="vast-btn" - href="#" - role="button">Link</a> -

-

- <button - class="vast-btn" - type="submit">Button</button> -

-

- <input - class="vast-btn" - type="button" - value= - "Input"> -

-

- <input - class="vast-btn" - type="submit" - value="Submit"> -

- -
-
- - + +
+ +

+ <a + class="vast-btn" + href="#" + role="button">Link</a> +

+

+ <button + class="vast-btn" + type="submit">Button</button> +

+

+ <input + class="vast-btn" + type="button" + value= + "Input"> +

+

+ <input + class="vast-btn" + type="submit" + value="Submit"> +

+ +
+
+ + diff --git a/style.css b/style.css index a22262c..0d41633 100644 --- a/style.css +++ b/style.css @@ -4,57 +4,8 @@ body { background-image: url("https://www.transparenttextures.com/patterns/tileable-wood.png"); } -.body-content { - margin: 0px 100px 50px; -} - -#main-header { - background-color: #f78671; - color: #f6e5d7; - width: 100%; - position: fixed; - top: 0px; - display: flex; - justify-content: center; - flex-direction: row; - align-items: flex-end; - padding-bottom: 20px; -} - -#title { - font-size: 55px; - font-family: 'Raleway', sans-serif; -} - -#sub-title { +code { font-family: 'Open Sans Condensed', sans-serif; - font-size: 30px; -} - -#headings-section { - margin-top: 220px; - background-color: rgba(246, 299, 215, 0.3); -} - -#body-copy { - background-color: rgba(246, 299, 215, 0.3); -} - -#address { - background-color: rgba(246, 299, 215, 0.3); -} - -small, .small { - color: #6d7370; - font-size: 0.8em; -} - -#blockquotes { - background-color: rgba(246, 299, 215, 0.3); -} - -#buttons { - background-color: rgba(246, 299, 215, 0.3); } p { @@ -64,24 +15,31 @@ p { margin-bottom: 10px; } -code { - font-family: 'Open Sans Condensed', sans-serif; +.body-content { + margin: 0px 100px 50px; } -address { - font-size: 20px; - line-height: 1.5; - margin-bottom: 7px; - font-style: normal; - font-family: 'Open Sans Condensed', sans-serif; +.sections { + border: 2px solid #2f3733; + border-radius: 5px; + margin-top: 50px; } -blockquote { - font-family: 'Open Sans Condensed', sans-serif; - font-size: 75%; - margin: 0 0 20px; - padding: 10px 20px; - border-left: 7px solid #f78671; +.secondary-section { + margin-top: 20px; +} + +.section-title { + font-family: 'Raleway', sans-serif; + color: #2f3733; + background-color: #86baaa; + text-align: center; + margin-top: 0px; + border-radius: 5px; +} + +.breakdown { + padding: 0px 200px; } .flex-container.sample-text { @@ -97,13 +55,14 @@ blockquote { flex-direction: row; } -.section-title { - font-family: 'Raleway', sans-serif; - color: #2f3733; - background-color: #86baaa; - text-align: center; - margin-top: 0px; - border-radius: 5px; +.sample-code { + background-color: rgba(47, 55, 51, 0.8); + color: #f6e5d7; + padding: 0px 200px 5px 200px; +} + +.tab { + margin-left: 40px; } .element-color { @@ -123,9 +82,48 @@ blockquote { color: #c9d2cb; } +#body-copy { + background-color: rgba(246, 299, 215, 0.3); +} -.tab { - margin-left: 40px; +#address { + background-color: rgba(246, 299, 215, 0.3); +} + +#blockquotes { + background-color: rgba(246, 299, 215, 0.3); +} + +#buttons { + background-color: rgba(246, 299, 215, 0.3); +} + +#main-header { + background-color: #f78671; + color: #f6e5d7; + width: 100%; + position: fixed; + top: 0px; + display: flex; + justify-content: center; + flex-direction: row; + align-items: flex-end; + padding-bottom: 20px; +} + +#title { + font-size: 55px; + font-family: 'Raleway', sans-serif; +} + +#sub-title { + font-family: 'Open Sans Condensed', sans-serif; + font-size: 30px; +} + +#headings-section { + margin-top: 220px; + background-color: rgba(246, 299, 215, 0.3); } h1, .vast-h1 { @@ -170,16 +168,31 @@ h6, .vast-h6 { font-size: .67em; } +small, .small { + color: #6d7370; + font-size: 0.8em; +} + .vast-lead { font-family: 'Open Sans Condensed', sans-serif; font-size: 27px; color: #828784; } -.sample-code { - background-color: rgba(47, 55, 51, 0.8); - color: #f6e5d7; - padding: 0px 200px 5px 200px; +address { + font-size: 20px; + line-height: 1.5; + margin-bottom: 7px; + font-style: normal; + font-family: 'Open Sans Condensed', sans-serif; +} + +blockquote { + font-family: 'Open Sans Condensed', sans-serif; + font-size: 75%; + margin: 0 0 20px; + padding: 10px 20px; + border-left: 7px solid #f78671; } button.vast-btn, input.vast-btn { @@ -200,17 +213,3 @@ a { padding-right: 5px; padding-top: 15px; } - -.breakdown { - padding: 0px 200px; -} - -.sections { - border: 2px solid #2f3733; - border-radius: 5px; - margin-top: 50px; -} - -.secondary-section { - margin-top: 20px; -}