# TINKER: Bootstrap
This tinker is for our group study on the topic of HTML/CSS - Meow Mix.
The group members include:
- Yixiong Chen (yc2216)
- Regina Wright (rnw2118)
- Qiyang Di ()
- Ann Wong (aw3333)

> The deadline of submission is _October 9th, 2022_
## Tinker Tasks
### 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?
:::info
Response:
It removes all the stlying, alignment, margin etc. are gone. Bootstraps makes it easier for the website to be visually pleasing with a styling frame, and since we took it out, it is no longer embeded in the code.
:::
- You can add the resource back: https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css
- Enter the above resource directly into your browser URL input to go to the page and scan through the resource.
- What is Bootstrap really?
:::info
Reponse:
It’s like a template of code that helps the user to style website in a way that is more sophisticated. It gives value to each specific element so that the user can just enter the element/class without inputing the value manually.
:::
- I have a few CSS rules in the CSS pane. Comment them out.
- What happens to the page and why?
:::info
Reponse:
The page seems to get more compressed. The CSS rules here have a lot of items that deal with margin and paddings. Once they are commented out, those setting will not be there and the content do not have these margin and paddings anymore. It seems like the coder can over-ride Bootstrap properties by redefining the codes in CSS.
:::
- What is the relation between my CSS and the External Resource?
:::info
Reponse:
The code written in the CSS style sheet can override or provides extra setting in addition to the Bootstrap external resource. So, the CSS in the style sheet is like a way of customizing or changing certain elements of Bootstrap if you don't like them for your webpage. Bootstraps is a front end framework it uses CSS to design a responsive template/framework that coders/designers can fill in with their own content. So, css is like just using an easel and paints--and painting from scratch. External resources like Bootstrap on the other hand, is more like doing a paint-by-number or something similar to it that would allow the artist to just fill in the gaps.
:::
- How does my CSS "intersect" with the External Resource?
:::info
Reponse:
CSS override the external source or provides extra setting in addition to the Bootstrap external resource.
:::
- What do you think is the sequence of how the External Resource and my CSS are loaded?
:::info
Reponse:
External source is loaded first, then CSS is loaded.

:::
- What kinds of things could happen, if I am careless with my own CSS rules?
:::info
Reponse:
It could be in conflict with what is specified in the external source.
:::
- 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?
:::info
Reponse:
We can use CSS to override the rules in Bootstrap.
:::
- 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?
:::info
Reponse:
Last week in CSS, we defined much more elements than this week, such as h4, h5, h6, section, em, a, ....table, th, td, and more. It seems like CSS was used to define and style every single element from html, which was time consuming. However, since we imported Bootstraps this week, we only had to use CSS to adjust parts from Bootstrap styling, which is more time efficient.

:::
- What then is the _advantage_ of using a framework like Bootstrap?
:::info
Reponse:
A lot of preset rules that are already written which can be used by just importing the correct classes. By importing Bootstrap, users can also use less time to make the website more visually appealing.
:::
- What are some _disadvantages_ of using a framework like Bootstrap?
:::info
Reponse:
Some rules can be rigid, so we have to be careful about any additional CSS we add to personalize it.
:::
- 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?
:::info
Reponse:
This is a class specificially to each file. Although they are both named as 'container', but the rules for 'container' are not the same.

Last week, the rules for 'container' was explicitly lay out in the CSS file. However, this week, the rules for 'container' were pre-defined in bootstrap and were inherited from the framework.
:::
- There are many more `classes` used in this week's Tinker. Where do these classes come from?
:::info
Reponse:
Bootstrap framework.
:::
- 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.
- How do these kinds of `classes` relate and rely on the bigger structure and `class` rules of a framework?
:::info
Reponse:
classes like `img-thumbnail` and some of the `danger`, `info`, are all pre-defined classes in the bootstrap framework. In order for them to function as expected, their usage need to follow the syntax and the hierachy defined in the bootstrap. Thus, they can only work if the syntax is correct.

These kind of classes are 'children' of the bigger structure of bootstrap. They need to follow `class` rule of a framework.
:::
- 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`.
- Are the non-class attributes important in terms of getting Bootstrap to work? (How do you know?)
:::info
Reponse:
Yes, id is important. Because if the id is not unique, or not assigned, the form may not work as we expected. If placeholder is not added, then html won't know what type of answer is expected from the users.

:::
- If you deviate from the specifications, particularly: 1) the classes used, 2) the hierarchy expected, how might that affect your result?
:::info
Reponse:
The results can be unpredictable or undefined.

:::
- Manipulate the form to "exclude" certain classes as prescribed by the Bootstrap guide and examples.
- How does not following the specifications affect the output?
:::info
Reponse:
Unpredictable result, or simply error message.
:::
- What are the key aspects you need to be paying attention to when learning and implementing these framework features?
:::info
Reponse:
Rules such as hierarchy, spelling, punctuation etc.
:::
- What is the best way to learn how to use a new framework feature?
:::info
Reponse:
Trial and error. Looking up the documentation and examples to emulate from existed template.
:::
- Think about your experience building a page from scratch last week.
- What is your attitude on using, learning new frameworks like this?
:::info
Reponse:
(yc2216) Very positive and easy learning curve.
(aw3333) It was a bit challening trying to structure and add elements into the html, but very rewarding when the page was built.
(rnw2118) It is somewhat of a challenge, but it does make it a lot easier overall to build the website--so I feel positively about it.
:::
### 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?
:::info
Reponse:
The left margin disappeared.
:::
- Move a column outside a row but within a container. What happens?
:::info
Reponse:
The column will be a standalone piece of display. If the column is outside of a row and before the row, the column will be display before the row block.

:::
- What is the importance of using these three classes together `container`, `row`, `col-__` and in the correct hierarchical sequence?
:::info
Reponse:
The sequence is important. The `container` needs to come first. After that, the structure is built from top to down as it is the way people use to scroll the screen. Within the same row, the structure is built from left to right.

The sequence to fill up the space is the same sequence as we write in a piece of blank paper; left to right, top to bottom.
So, doing this keeps the visual display organized and following the rules of bootstrap.
:::
- 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?
:::info
Reponse:
First, the part of content is no longer part of the column. Then, depends on where the content goes. If the content is still part of the save row, then the content is inside the row block. If the content is outside of row, but within the same container, then the content is still part of the container block.

:::
- 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?
:::info
Reponse:
extra small, small, medium, large, large, extra large. However, xs does not seem to work as extra small.
:::
- 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?
:::info
Reponse:
The number represent how much the column occupies the page. The smaller the number is, the less space it occupies and the larger the number is, the more space it occupies. It only takes integer from 1-12, and anything value outside of that window will be display as if it is 12.
:::
- 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?
:::info
Reponse:
In bootstrap, we have row and column and they are named as class="row" or class="col-size-num".

In semantic-ui, "row" is replaced with "ui grid" and "col-size-num" is replaced as "num size column".

In grid-materialize, "row" stays the same, and the "col-size-num" is replaced by "col sizeNum" with no space between size and num and the first dash being replaced by a space.

In Skeleton, "row" stays the same. "col-size-num" is replaced by "nums column(s)".
:::
- What is a Grid System _convention_ vs. _rule_? Can you give an example?
:::info
Reponse:
The rule is that we need to go top to down, left to right to fill up the space.

The convention is how we represent each column in different class naming system, such as "col-size-num" in bootstrap vs. "num size column" in semantic-ui.

:::
- What would happen to my columns if I remove Bootstrap from my page?
:::info
Reponse:
The columns will no longer be defined in the page. Everthing displayed from left to right with Bootstrap will be displayed from top to bottom.
:::
- Is the class, `col-xs-6` for example, really that special?
:::info
Reponse:
It is special in the sense that it has a different impact than other size classes. When we change the numbers associated with "sm" for example, that creates a difference in visual appearance in terms of width of the display. Whereas when we change the numbers with "xs" it doesn't really change the appearance.
:::
- 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?
:::info
Reponse:
It is a versatile tool that a lot of people talk about it and we can get lots of free resource from youtube, etc.
:::
- How does the combination of different ways of observing, manipulating, thinking, and applying code help learners to develop a comprehensive mental model of understanding?
:::info
Reponse:
This combination helps people of all different learning styles develop a pattern of thinking that helps them think about code in different and more clear ways that could help make the overall design process easier even if you don't have all the rules, components, etc. memorized.
:::

## COMPONENTS

- 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?
:::info
Reponse:
Reading documentation, trial and error, watch a video, ask questions, emulating from the existing template.
:::
- 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`
- Try removing the `!important` and what happens? Why?
:::info
Reponse:
When we removed the !important, the color goes back to bright red again, meaning that !important is necessary when trying to override rules defined in bootstrap.
:::
- What affect might this have on other parts of my page?
:::info
Reponse:
If the same class "bg-danger" is used in other part of the page, this override will affect it too.
:::
- 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.
:::info
Reponse:
(yc2216) I found the class "offset-num" handy if we want to move a column to the middle of the page.
(rnw2118) I thought the !important + whatever rule you want to override was interesting. I like the idea of having a framework that reduces work in terms of basic coding, but allows us to customize it how we need/want it. In terms of learning new features, coding feels less overwhelming since we started exploring Bootstrap. It might be stressful or overwhelming at first to learn new features, but once you start to get the hang of it it can actually make your experience better/more easy.
(aw3333) I think learning different types of grid system was very helpful as each system works with similar logic but language that is tailored to different interface. Playing around with the grid system was very helpful in getting use to how to display the website in a clearer and aesthetic way.
:::