# MSTU 5003 Tinker: Bootstrap Meow Mix
## Team Members: Maho Hayashi, Chenyue Fu, Anna Lizarov, Charlotte Price, and Ahyoung Kim

### CodePen
The link can be found here: https://codepen.io/al3868/collab/0360f7fe97c854769c724cd6cc858d3d

### 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?
You can add the resource back: https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.css

The page layout changes, especially the picture sizing. It looks like 90s type of website without the Bootstrap. The table is gone. Everything looks much smoother and more modern with Bootstrap.

* Enter the above resource directly into your browser URL input to go to the page and scan through the resource.
* What is Bootstrap really?

Bootstrap is a responsive CSS framework that permits mobile-first develpment. In particular, it allows the development of pages that can be readjusted to the screen size using the grid system.

* I have a few CSS rules in the CSS pane. Comment them out.
* What happens to the page and why?

The structure and the font are impacted. It changes the background color and the footer. But everything else remains the same.

* What is the relation between my CSS and the External Resource?

Your CSS builds off of the Bootstrap. We used the analogy of a cake - if you buy a frosted cake from the store, it still looks good, is edible. But you can use icing to add extra decoration, write a name on it, add extra details. Bootstrap is the cake, and your CSS is the additional icing.

* How does my CSS “intersect” with the External Resource?

See answer above. The main structure is from Bootstrap, this changes a few visuals.

* What do you think is the sequence of how the External Resource and my CSS are loaded?
It is better to load Bootstrap as External Resource first and then manipulate the CSS for elements that were covered in the Bootstrap.

* What kinds of things could happen, if I am careless with my own CSS rules?

The layout changes such as the padding and bottom. It seems Bootstrap code is fixed (like an actual cake) and CSS is for personalizing and customizing during the development process (like an icing on the cake).

* Are you stuck with all of Bootstrap’s rules? How does our own CSS come into play if we don’t like a particular Bootstrap rule?

It seems that you can override the Bootstrap rule with the CSS code. If we don't like a particular bootstrap rule, we just add a CSS rule for whatever part we want to modify, e.g., H2 font style if that's the part we don't like.

* 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's needed a lot of rules to define sizing especially of tables and margins, also colors and fonts.

* What then is the *advantage* of using a framework like Bootstrap?

It looks modern just from the basics - easier to build better design and manipulate, as well. You don't have to define as many rules to get a good layout and look.

* What are some *disadvantages* of using a framework like Bootstrap?

It's confusing, a bit tough to understand everything going into it because it's so detailed. Also, the Bootstrap code is fixed. You have to understand how CSS and Bootstrap intersect.

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

    * There are many more classes used in this week’s Tinker. Where do these classes come from?
    
    It is mostly came from Bootstrap. e.g. ```thumbnail```, ```row```,``` col``` aren't in last week's Tinker.

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

    They use the structure of Bootstrap - you don't have to define the sizing because of it. So if you use "thumbnail", you know it will be the same size as anything else with the same name, and resize appropriately when the window changes size. 

* 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. 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?)

    We think so? We aren't sure what a non-class attribute is in this case. Maybe like  for="yourEmail" on label, which doesn't change anything visually. It tells the person reading the code, and maybe also an application/the computer/browser what the purpose is. 
    
    * If you deviate from the specifications, particularly: 1) the classes used, 2) the hierarchy expected, how might that affect your result?

    The class defines what Bootstrap CSS gets applied, so that can really change the style if the wrong class is used, or no class. 

* 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 changes the placement in the grid. We removed ```form-group```, and not much changed except the spacing.

    * What are the key aspects you need to be paying attention to when learning and implementing these framework features?
    You need to understand how the grid system works and the location of the features on the grid. 
    
    * What is the best way to learn how to use a new framework feature?

    Try things, move things and see what happens. Manipulate it. Also, find an example of something that looks like how you want. Trial and error. You have to know what you are looking at.  

* Think about your experience building a page from scratch last week.
    * What is your attitude on using, learning new frameworks like this?
    
    It simplifies the development process. 

### 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?
    
    It changes the margin.
    
    * What is the importance of using these three classes together ```container```, ```row```, ```col-__-__``` and in the correct hierarchical sequence?
   We don't really know why, but you can't have col without row, and row without container. The ```container``` establishes the overall box width, and the ```row``` and ```col``` define the interior   
    
* 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?

    It changes the placement in relation to the edge of the screen, it's not in-line with the rest of the elements.

* 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?
    
    It allows to create flexible and dynamic layouts across different types of devices, ranging from phones to desktops. If you change the size of the desktop, the column size changes.
    
* 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?
    
    It specifies how many columns wide should the element be. 

* 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:
    * https://semantic-ui.com/collections/grid.html
        * Click on the ```<>``` on the page to see the actual code with classes
http://materializecss.com/grid.html
http://getskeleton.com/#grid
    * What are the similarities and what are the differences?
   
   It gives you different options for the sizing and relationships of the columns. One used "offset" which we didn't see in Bootstrap. The similarities are that they all are responsive design, and meant to look modern/"good". 
    
    * What is a Grid System convention vs. rule? Can you give an example?
    
    It is like a difference between ethics and law. Ethics is something to strive for but you will not be held legally accountable while when it comes to law, you are held legally acountable. In other words,Grid System convention is a suggested template that you can deviate from while Grid System rule is supposed to be followed. 
    
    * What would happen to my columns if I remove Bootstrap from my page?
    
    It does not have the same margin. It changes the relationship between spaces and margins
    
    * Is the ```class```, ```col-xs-6``` for example, really that special?
    
    We don't think so. It is still funtional even though it does not have those examples.

* Visit the following [link](https://www.youtube.com/watch?v=VaW4na2qkwQ): Grid System Explained
    * What is the advantage of using popular tools like Bootstrap?

    It defines a ton of styles to look modern and respond to current-day phones/tablets/browser varieties without having to define any of it yourself, which is awesome.

* How does the combination of different ways of observing, manipulating, thinking, and applying code help learners to develop a comprehensive mental model of understanding?

    You need to see how the code is set-up already to understand the framework, but you don't really know how things will impact each other until you play with the code.

### Components
* 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?

    The best practice is to look at examples of the finished result, the different availabilities of styles that can be applied, and to see how it fits within the framework (e.g., where do you put the code, what else could it impact).

* 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?
    
    There was no effect on the other parts of the page because no other parts of the page used the class ```danger```. 

* Pick a few different components you find interesting. Try to implement them into your Tinker fork on Codepen.

    * Share with your group what you found about the experience of learning to use new features and what your takeaway was.