# Week 2 Tinker Project: Bootstrap
### 1. Framework: Overarching
#### In the settings of the CSS Pane (click on the gear) there is a section called Add External CSS. Remove the resource (Bootstrap) line. What happens to the page and why?
-- The webpage looses its style and visual appeal; however, the content stays the same. This happens because without bootstrap the rules in the code can not be read.
#### What is Bootstrap really?
-- Bootstrap is a framework that serves as a library for various styles and characteristics to make building the webpages easier and faster.
#### I have a few CSS rules in the CSS pane. Comment them out. What happens to the page and why?
-- Some charateristics on the webpage are gone because the html cannot read the invalid code after the CSS rules are commented.
#### What is the relation between my CSS and the External Resource?
-- External Resource like Bootstrap generally takes precedence than CSS. However, when CSS has the `!important` tag, CSS would overwrite the Bootstrap code.
#### How does my CSS “intersect” with the External Resource?
-- They both serve similar purposes to add characteristics to the elements. When created as a `class` or `id` in CSS, you can add specific design to specific tag, which is similar to how Bootstrap works.
#### What do you think is the sequence of how the External Resource and my CSS are loaded?
-- Generally, external resource is loaded first, and then CSS is loaded afterwards.
#### What kinds of things could happen, if I am careless with my own CSS rules?
-- Since one CSS could control multiple styles for html elements, one mistake on CSS could cause many places on the webpage to have undesirable outcomes.
--It's important to stay organized.
#### Are you stuck with all of Bootstrap’s rules?
-- No, you can write CSS code that overwrites Bootstrap rules.
#### How does our own CSS come into play if we don’t like a particular Bootstrap rule?
-- You can give html `class` or `id` to make adjustment through CSS to add new features that overwrite Bootstrap rule.
-- Either use the style attribute to add CSS inline on your divs, e.g.:
`<div style="color:red">` ... `</div>`
-- or create your own style sheet and reference it after the existing stylesheet then your style sheet should take precedence.
-- or add a `<style>` element in the `<head>` of your HTML with the CSS you need, this will take precedence over an external style sheet.
-- You can also add `!important` after your style values to override other styles on the same element.
#### Compare this Tinker’s custom CSS vs. last week’s CSS.
#### What kind of specific rules did I have to make last week that I did not have to do this week to achieve a very similar result?
-- Last week, you have to directly give seperate styles to each element (`h1 {`) in CSS. This week, you generally apply classes through CSS to change what's going on in html.
#### What then is the advantage of using a framework like Bootstrap?
-- It makes it easier and faster to create the style of a webpage because it already has a set framework for you.
#### What are some disadvantages of using a framework like Bootstrap?
-- Bootstrap is not that flexible-if you don’t like some of its styles, you need to recreate your own CSS to cover it.
-- Many people use the same framework, which is uncharacteristic (but also have the benefits of standardization).
#### Compare the HTML from this week’s Tinker vs. last week’s Tinker HTML. I use a class called `.container` in both.
#### Is this a special class? Are they the same thing?
-- While last week, `.container` means a specific reference to CSS, this week's `.container` means a unique thing specific for Bootstrap.
-- Last Week:
```HTML
.container {
margin: 0 auto;
max-width: 960px;
}
.container > div {
padding: 30px 60px;
}
.container-top {
background: #666;
border-bottom: 1px solid #CCC;
border-radius: 8px 8px 0 0;
min-height: 50px;
}
.container-main {
border-color: #CCC;
border-style: solid;
border-width: 0 1px 1px 1px;
min-height: 50px;
}
.container-bottom {
text-align: center;
}
```
-- In Bootstrap:
Containers are used to pad the content inside of them, and there are two container classes available:
The` .container` class provides a responsive fixed width container
The `.container-fluid `class provides a full width container, spanning the entire width of the viewport.
#### There are many more classes used in this week’s Tinker. Where do these classes come from?
-- These classes come from the built-in library of Bootstrap that needs to be structured in a specific way that involves usage of many classes.
```HTML
<div class="container">
<div class="row">
<div class="col-__-__">
```
#### Remove classes like thumbnail and some of the danger, info, etc. classes in the table and/or try adding them to other elements. Might work, might not. How do these kinds of classes relate and rely on the bigger structure and class rules of a framework?
-- The color of the grid change when removing classes like `.danger`,`.warning`, and `.info`.
-- The image size for the specific element would change to normal if the `.thumbnail` class is removed.
#### Analyze the form and refer to http://getbootstrap.com/css/#forms. Try to convert this BASIC form to an horizontal form and/or an inline form.
-- Basically, just add `class=“form-horizontal”` and `class=“form-inline”` to your form.
-- And for horizontal form, if you want your form to be well-organized, you can add `“col-sm-2 control-label”` to your label and `“col-sm-10"` to your type box, so that “Email address” and “Name” will have their own horizontal line.
```
<form class="form-horizontal">
<div class="form-group">
<label class="col-sm-2 control-label" for="yourEmail">Email address</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="yourEmail" placeholder="Email">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label" for="yourName">Name</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="yourName" placeholder="Full Name”>
</div>
</div>
</form>
```
#### Some of the examples have extra attributes like id, placeholder. Are the non-class attributes important in terms of getting Bootstrap to work? (How do you know?)
-- The non-class attributes are not important in terms of getting Bootstrap to work because the elements still function properly when the Bootstrap extension is gone.
#### If you deviate from the specifications, particularly: 1) the classes used, 2) the hierarchy expected, how might that affect your result?
-- All related content will become a mess. The corresponding class content will not be implemented as you expect. The disordered parent-child relationship will make the web page display the wrong content without logic.
##### Manipulate the form to “exclude” certain classes as prescribed by the Bootstrap guide and examples. How does not following the specifications affect the output?
-- It will mess up the visual appeal of the webpage.
##### What are the key aspects you need to be paying attention to when learning and implementing these framework features?
-- You need to pay attention to the order of the classes. It must read:
```HTML
<div class="container">
<div class="row">
<div class="col-__-__">
```
-- And then you have to be aware of the size and number of `columns` you input.
#### What is the best way to learn how to use a new framework feature?
-- Play around and practice.
#### Think about your experience building a page from scratch last week. What is your attitude on using, learning new frameworks like this?
-- This will make developing a webpage much quicker and easier because I will not have to use CSS as frequently to adjust many aspects of my page.
-- It's more efficient.
### 2. Grid System
```
<div class="container">
<div class="row">
<div class="col-__-__">
<!-- CONTENT -->
</div>
</div>
</div>
```
#### FIND the above pattern(s) within the HTML. Move a `.row` to the outside of a `.container`.
##### What happens? Move a column outside a row but within a container. What happens?
-- The text connected to the row goes off the page because it does not have a contain to base the edges off of.
##### What is the importance of using these three classes together container, row, col-__-__ and in the correct hierarchical sequence?
-- The container creates the outline of the webpage, the row creates horizontal groups within the webpage outline, the columns create vertical groups within that specific row.
#### Manipulate some of the content inside the columns to different parts of the page, keeping in mind whether the content is inside a row, or a container, or none.
##### What happens when content falls outside of the columns?
-- The content would fall outside of the outline on the webpage and make it look unorganized.
#### Manipulate the column classes to replace some `col-xs-__ `to `col-lg-__.` Then, drag your browser screen out to make it really large or really small. Or you can zoom in or zoom out of your browser to get the similar effect.
##### What does the xs, sm, md, lg, xl represent in the column class notation?
`.col-xs`- Extra Small ( < 576 px )
`.col-sm`- Small ( >= 576 px )
`.col-md`- Medium ( >= 768 px )
`.col-lg`- Large ( >= 992 px )
Bootstrap provides 12 columns per row which is made available in the Column class. So, you can control the width of column using specifying numbers in .col-*, where * means the width of the column in numbers.
#### Manipulate the column classes to replace some `col-__-12` to `col-__-3`. This is partly dependent on how large your browser window is so you might have to play with the size or zoom in and out to see differences.
##### What does the number in the column name represent with respect to the GRID system?
-- The number represents how many columns there are in the row.
#### Carefully observe and compare this column class naming system (i.e. opinion) that Bootstrap has, with the column naming system of these other GRID SYSTEMS:
##### What are the similarities and what are the differences?
-- Similarities: there are classes within classes;
-- Differences: the classes use different names to function properly;
##### What is a Grid System convention vs. rule? Can you give an example? What's the difference between convention and rule?
-- The convention is the common way of doing things (how to construct the grid system) while the rule is the different specific way of naming the functions.
For example:
```
<div class="row">
<div class="one column">One</div>
<div class="eleven columns">Eleven</div>
</div>
<div class="row">
</div>
<div class="col-xs-4">
</div>
```
##### What would happen to my columns if I remove Bootstrap from my page?
-- The entire structure of the webpage disappears, so it is just ugly blocks of text and unsized images.
##### Is the class, col-xs-6 for example, really that special?
-- Yes because the `xs` defines what type of screen it can be read on and the `6` will create a specific padding around the content.
##### What is the advantage of using popular tools like Bootstrap?
-- Fewer Cross browser bugs. Making coding easier and faster.
##### How does the combination of different ways of observing, manipulating, thinking, and applying code help learners to develop a comprehensive mental model of understanding?
-- By observing the code, learners could get a general sense of what certain code does. By manipulating the code, learners could further test if the functions of the code correspond to their assumptions before. After careful thinking and then applying the knowledge to build code on their own, learnings could futher deepen their knowledge to a more meaningful level. It is through a combination of these various process that learners could develop their mental model of understanding.
##### Browse through the different COMPONENTS of the Bootstrap Framework and observe the pattern of how the documentation is presented. Experiment with BUTTONS for a good example: http://getbootstrap.com/components/#btn-groups
#### When learning to use new components in a framework, what do you think is the best practice on how to learn about the feature?
-- To learn the **pattern** of how the code reads because that pattern can be applied across attributes. For example,
```HTML
class="btn btn-primary"
class="badge badge-secondary"
```
##### In my table, I have “Extremely Deadly” as a label of sorts, that is bright red which is defined by the `.danger` class. OVERRIDE this rule in your custom CSS pane to make danger a pink color. What affect might this have on other parts of my page?
-- Add another `pink class`
```
.pink{
background-color: #ffc0cb !important;
}
```
##### Pick a few different components you find interesting. Try to implement them into your Tinker fork on Codepen.
-- We successfully created a button using the following code:
```
<form action="/submit-response">
<input type="text" placeholder="Comments or questions" required>
<button type="submit">Submit</button>
</form>`
Google Drive
Gist
Clipboard
Sign in with Wallet
