**MSTU 5003- Tinker Bootstrap Group 3**
Yanjun Wang, Anqi Wang, Yifan Chen, Jinny Park

:::success
https://codepen.io/yjp2110/collab/wvjxvpe
:::

### FRAMEWORK: OVERARCHING

**1. 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 elements are displayed in default styles. Because the classes in the html is linked to bootstrap CSS document in the link. After deleting it, the classes in html is not defined in CSS and the elements return to the default styles.

- **You can add the resource back:** https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css

**2.Enter the above resource directly into your browser URL input to go to the page and scan through the resource.**
- **What is Bootstrap really?**
It is a huge combination of CSS rules that developer can apply to their webpages. It provides a CSS framework.

**3. I have a few CSS rules in the CSS pane. Comment them out.**
- **What happens to the page and why?**
The format/ style has chaged a little bit. However, the major noticeable change is that the picture and pargraphs now have less margin after I commenting out the css rules.
- **What is the relation between my CSS and the External Resource?**
Your CSS has overwritten the external resources when they are put into effect.
- **How does my CSS "intersect" with the External Resource?**
A guess is that the CSS rule intersects with the external resource in terms of margin and one padding issue.
- **What do you think is the sequence of how the External Resource and my CSS are loaded?**
External resources run first and then your CSS.
- **What kinds of things could happen, if I am careless with my own CSS rules?**
If there are some mistakes, we think the page will just go with the rules in the external resources.
- **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?**
First, we need to find the class that we dislike about in the bootstrap rules, then we add specific CSS rules ourselves to overwrite it.

4. **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?**
We don't need to write the attributes on our own. We can use the existing class in bootstrap.
We don't need different selectors to target elements. Everything is defined by classes.
- **What then is the _advantage_ of using a framework like Bootstrap?**
Save time
Better display
img/icon resources
- **What are some _disadvantages_ of using a framework like Bootstrap?**
using unknown class without understanding the meaning
no need to use for simple or highly customized webpage

**5. Compare the HTML from this week's Tinker vs. last week's Tinker HTML. Anqi**
- **I use a class called `.container` in both. Is this a special `class`? Are they the same thing?**
I don't think they are the same thing. For class container from last week, the class container is for the whole body. However, for this week's tinker, class container works for different sections but not the whole body.
- **There are many more `classes` used in this week's Tinker. Where do these classes come from?**
We try to use those new classes to connect with the css rules provided from the framework.

**6. Remove classes like `img-thumbnail` and some of the `danger`, `info`, etc. classes in the table and/or try adding them to other elements. Might work, might not. Anqi**

- **How do these kinds of `classes` relate and rely on the bigger structure and `class` rules of a framework?**
When I deleted the img-thumbnail class for the image of business cat, the image becomes bigger.
Class can be a way to help the text to connect with the `class` css rules of a framwork.

**7. Analyze the form and refer to https://getbootstrap.com/docs/5.2/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`.**

To convert the basic form to an horizontal form, one should add `.row` class to apply the horizontal forms. And one can define the columns using `.col-form-label-sm` or `.col-form-label-lg` to the `<label>`

- **Are the non-class attributes important in terms of getting Bootstrap to work? (How do you know?)**
Non-class attributes are important in terms of getting boorstraps to work as it influenced by the code for the class attirbutes. Also non-class attributes determine the elements inside of the class attributes or outside of the class attributes.

- **If you deviate from the specifications, particularly: 1) the classes used, 2) the hierarchy expected, how might that affect your result?**
I tried to use different classes and change the hierarchy expected.
An element need classes to display correctly and hierarchy is used to better organize the content.
If I deviate from the classes, the element cannot be correctly displayed. But deviate from hierarchy by changing the order of hierarchy may influence the position of elements changed but the children remain the same display.

**8. Manipulate the form to "exclude" certain classes as prescribed by the Bootstrap guide and examples.**
- **How does not following the specifications affect the output?**
Not following the specifications affects the output of creating errors or the specifications. For instance, to apply color yellow, different wording is used that is not yellow; "warning" refers to color yellow in bootstrap
- **What are the key aspects you need to be paying attention to when learning and implementing these framework features?**
One of the key ascpets we need to be paying attnetion to when learning and implementing these framework features is that the spelling and organization matter in allowing the framework features to be applied.

- **What is the best way to learn how to use a new framework feature?**
The best way to learn how to use a new framework feature is from deleting existing code to see the changes applied to the result. On the other hand, applying new code by looking at the cheatsheet allows you to learn to use the new framework feature.

**9. Think about your experience building a page from scratch last week.**
- **What is your attitude on using, learning new frameworks like this?**
It makes the coding easier.
It also makes buildig a website faster.

### GRID SYSTEM

<div class="container">
  <div class="row">
    <div class="col-__">
      <!-- CONTENT -->
    </div>
  </div>
</div>

**10. FIND the above pattern(s) within the HTML.**
- **Move a `.row` to the outside of a container. What happens?**
After moving "Delish! Meow meow meow meow" from the container, it takes up the whole space.

- **Move a column outside a row but within a container. What happens?**
Moving "Delish! Meow meow meow meow" out of the row made no change to the visual representation，probably because it is a column-12.
When we did the same thing to the black business cat and the content "grumpy cat..." the CSS rules of Flex no longer apply as they went into different lines.

- **What is the importance of using these three classes together `container`, `row`, `col-` and in the correct hierarchical sequence?**
Only if they are used in the correct hierachical sequence, then the CSS rules from the external resouces would be applied in the correct manner.

**11. 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?**
In some cases, the spacing/format might not change ( when we move the heading Cat Opinions). In other cases, the content would transform into its default setting (e.g. the image).

**12. Manipulate the column classes to replace some `col-12` to `col-xl-4`. 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`, `xxl` represent in the column `class` notation?**
When we made the screen extremely large or small, they are the same. We think these terms are used for different screen sizes.

**13. 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?**
Under the same notation of "md," we can see that the number is referred to the column space. One single line has 12 columns. If the number is 12 after the col, it means the content is going to take up 12 columns.

**14.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?**
Similarities:
- All the column have a parent element with class "row" or "grid" indicating that the inside are columns.
- All columns have a class that can control the width of the column
Difference:
- Different column class naming system have differnet number of columns per row. 16 or 12
- Some use multiple classes to difine a column. Boorstrap use one class.
**- What is a Grid System _convention_ vs. _rule_? Can you give an example?**
convention: All the column have a parent element with class "row" or "grid" indicating that the inside are columns. All columns have a class that can control the width of the column
rule: the specific name of classes indicating it is a column/grid and columns' width
**- What would happen to my columns if I remove Bootstrap from my page?**
The columns messed up. They cannot be displayed in desired width.
**- Is the class, `col-xs-6` for example, really that special?**
Not really. It can be substituted by class="six column" in skeleton, class="six wide column" in semantic-ui, class="col s6" in materializecss.

**15.Visit the following link:** [Grid System Explained](https://www.youtube.com/watch?v=Wqu-d_b3K-0)
**- What is the advantage of using popular tools like Bootstrap?**
It is much easier to find some video explainations about those tools. And it would have some practise exercise about how to use them. People can easily get familiar with those new tools.

:::success
**Did you know?** As a student, you have access to the full Lynda.com / LinkedInLearning library. These are fantastic resources if you want to actually see the details of specific feature implementation.

Thing with these tutorials is that they tend to explain _how to do_ specific things, but don't quite address the issue of deeper understanding to explicitly address how concepts relate and tie together. That said, used in _conjunction_ with activities like the Tinkers, can be a very powerful combo.

To access Lynda.com:
- Log IN with your student account
- https://www.linkedin.com/learning
- See the Bootstrap Essentials VIDEO Tutorial
- https://www.linkedin.com/learning/bootstrap-5-essential-training
:::

**16.How does the combination of different ways of observing, manipulating, thinking, and applying code help learners to develop a comprehensive mental model of understanding?**
After using those different ways to explore a tool, we can find out some relationships between different words here used in Bootstrap. By trying to add or delete something from the codepen, we may see things differently each time to figure out what each element stands for.

## COMPONENTS

**17.Browse through the different [COMPONENTS](http://getbootstrap.com/components/) of the Bootstrap Framework and observe _the pattern_ of how the documentation is presented. Experiment with BUTTONS for a good** example: https://getbootstrap.com/docs/5.2/components/button-group/
**- When learning to use new components in a framework, what do you think is the best practice on how to learn about the feature?**

Experiencing with Button figure, I realized that all code start with attribution of class. For instance, to make a group button, class is required to provide the devision: `<div class="btn-group">`
On the other hand, if one does not want to group the buttons, they can write it as <botton type "whatever"> </botton> In writing a grouping code, first one defines `class="btn-group"` Then provide of the `role="tool bar"` then provide aria-lable

<div class="btn-group" role="group" aria-label="Basic radio toggle button group">

Examples:
<div class="btn-group" role= "tool bar" aria-lable="Large button group">
<a href="#" class="btn btn-success">Green</a>
<a href="#" class="btn btn-danger">red</a>
<a href="#" class="btn btn-primary">blue</a>
<a href="#" class="btn btn-warning">Yellow</a>
</div>

<br></br>

**18. In my table, I have "Extremely Deadly" as a label of sorts, that is bright red which is defined by the `.bg-danger` class. OVERRIDE this rule in your custom CSS pane to make `.bg-danger` a `pink` color using the following value: `pink !important`**


Overridding `.bg-danger` class with `pink !important` value changes the text extremely deadly into pink color from white.

**- Try removing the `!important` and what happens? Why?**
Removing `!important` did not make any changes.Becase there color is not specified in the previous properties.

However, when I applied to .bg-danger as with background-color property,

The color of the button itself changed. From here, when I delete `!important`, the color changes back to red as there's no override effect applied to that property. (image below)


**- What affect might this have on other parts of my page?**
It will not affect other parts of my page since I specified the CSS pane just for .bg-danger. If I had applied to badge in general, it might have affected the other parts.

**19.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.
**Card component**
We used the card class to rearrange te Gerumpy Cat row. Using class like "card-text" and "card-title" can quickly build a card-like object on webpage.

  <div class="card" style="width: 18rem;">
  <img src="https://jmk2142.github.io/mstu5003/week01/visualize/images/catZero.jpg" class="card-img-top" alt="cat">
  <div class="card-body">
    <h5 class="card-title">Grumpy Cat</h5>
    <p class="card-text">I'm unimpressed. Shut up and code.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>

Dropdown:
We created a dropdown and customized the class to set an offset and to forbid clicking outside to close.

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false" data-bs-offset="10,20" data-bs-auto-close="inside">
    Cat Opinions
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Grumpy Cat</a></li>
    <li><a class="dropdown-item" href="#">Nyan Cat</a></li>
    <li><a class="dropdown-item" href="#">Business Cat</a></li>
  </ul>
</div>