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