# TINKER: Bootstrap
Original Codepen: https://codepen.io/jmk2142/pen/yLXdqbd
Group: (Alex) Yixuan Xu, Chenyou Wu, Bill Wang

### 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?
- All the styles returned to default settings, including the fonts, image styles etc.
- This is because Bootstrap has preset CSS scripts that we can just simply use to style our page, so when we removed it, all style changes were gone.
- You can add the resource back: https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/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?
- Bootstrap is really just pre-written CSS code. They have pre-written CSS code for different screen sizes that help us making web pages more responsive.
- I have a few CSS rules in the CSS pane. Comment them out.
- What happens to the page and why?
- The header goes up & the footer goes bottom,the elements are more crowded together.
- We noticed that there is a background color in `cat-jumbo` class, we tried to see the differences but it was very subtle color difference (light light grey vs white background) so it's hard to notice.
- What is the relation between my CSS and the External Resource?
- Your CSS is adding onto/complementing the external CSS. It's additional styling that further changes the details like margins, paddings etc.
- *How does my CSS "intersect" with the External Resource?
- While external CSS has some preset styles, your CSS further style the layout of the page by overwriting specific properties like margins/paddings.
- _(later) observe the overlapping structure to see why both of them write like that way?_
- What do you think is the sequence of how the External Resource and my CSS are loaded?
- We think that the external CSS was loaded first and then your CSS. This is because we noticed that your CSS overwrites specific properties such as `body {margin: 0;}` in Bootstrap. Your CSS was loaded later and changed the `body` margin to `25px`.
- What kinds of things could happen, if I am careless with my own CSS rules?
- If we are not careful, you may not successfully overwrite Bootstrap preset styles and the page will only have Bootstrap styles or the default styles in Codepen.
- 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?
- We aren't stuck with all the rules, we can add our own styles and overwrite parts of Bootstrap's rules. For example, we can overwrite the Bootstrap `body` background color `#fff` by adding our own CSS:

body{
    background-color: #fff;
}

- 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 we had font styling like `font-size` or `font-weight` or`font-style` but this week we don't need to do that since Bootstrap already has font styles.
- Last week we had to style the positions of the thumnails and the texts next to them using `inline-block` and etc. Thanks to `row` and `col` in Bootstrap we don't have to do it this week.
- Last week we had border style but this week they are pre-written by the Boostrap;We added rules to images so they are same size but We do not need to add rules to images this week.
- What then is the _advantage_ of using a framework like Bootstrap?
- It saves a lot of time since there are so many prewritten styles, especially the responsive feature.
- If you're a designer, it's hard to make a web page looking nice quickly using raw CSS.
- What are some _disadvantages_ of using a framework like Bootstrap?
- Bootstrap works like a template, every website that uses Bootstrap will more or less look similar. If you want to make something different, you would have to overwrite a lot of CSS.
- If you heavily depend on Bootstrap, you may not want to learn any more regular CSS or write your own CSS rules.
- 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?
- These are different. This week's `container` class is a special class in Bootstrap that "contain, pad, and align your content within a given device or viewport."
- But last week's `container` class was a custom class where we can use to customize how the page look.
- There are many more `classes` used in this week's Tinker. Where do these classes come from?
- These classes contain styles declared in Bootstrap's framework, such as `row`, `col-x` and `card`.
- 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?
- We removed `img-thumbnail` from that image element, and the image displayed becomes bigger and overlay some texts that was previously on the side.
- We removed `bg-danger` from the table badge, and the background of that badge become white and we can no longer see the white text.
- These `classes` are all declared within the Bootstrap framework and need to be used according to Bootstrap's hierachy and rules to achieve the expected outcome.
- Analyze the form and refer to https://getbootstrap.com/docs/5.1/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 tried to convert the form into a horizontal form.
- We tried to remove `id`, and noticed that removing `id` in this case will not change the styling of that element. So we suspect that these non-class attributes are not important to get Bootstrap working.
- If you deviate from the specifications, particularly: 1) the classes used, 2) the hierarchy expected, how might that affect your result?
- 1. We removed classes for `input` and it changed how the input field looks visually.
- 2. We moved around `col-4` and it messed up the original structure of the checkboxes. So we think if we don't follow the structure, it will deviate from our intended results.

- Manipulate the form to "exclude" certain classes as prescribed by the Bootstrap guide and examples.
- How does not following the specifications affect the output?
- We removed `col-4` from the checkboxes and it changed how they are layed out on the page completely. If we don't follow the specifications, our output style will not use Bootstrap style and be set to default.
- What are the key aspects you need to be paying attention to when learning and implementing these framework features?
- Be very careful about using the hierachy of the framework, or the output won't be as expected.
- Make sure all classes are aligned with Boostrap's rules/classes.
- What is the best way to learn how to use a new framework feature?
- We feel that by copying the examples from the framework documentation and playing around with it help us better understand how the code is structured.
- When we are making our own code using the framework, we should always refer to the different documentations.
- Think about your experience building a page from scratch last week.
- What is your attitude on using, learning new frameworks like this?
- We feel like these frameworks can provide a lot of conveniences, e.g. the grid system in Bootstrap can provide an overall structure without us having to write all the complex CSS.
- However, we shouldn't rely too much on one framework and should be keep learning basic CSS to understand how different frameworks work in the future.

### 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?
- After moving `row` outside, the content shifted to the left of the page (the default style)
- Move a column outside a row but within a container. What happens?
- After doing that, the content shifted to the left a little bit.
- What is the importance of using these three classes together `container`, `row`, `col-__` and in the correct hierarchical sequence?
- Using all three of them and the correct sequence is important because then the displayed style is the correct order. We think of `container` as the parent of `row` and `row` as parent of `col`, we can then style the content accordingly.
- 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 will not stay in the columns but will be in the row, and still remain the same horizontal level as other columns.
- We assigned background color to see the structure more clearly:


- 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?
- By manipulating that, we noticed that the element that used to take up the entire row now takes 1/3 of the row in a bigger window size. Therefore, we think that these notations mean refer to when the window is at different sizes, such as extra small, small or medium-sized etc.
- 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 numbers mean the content will take up the space for however many out of the total 12 portions in the row, for example, the content in `col-3` will take up 3/12 (1/4) of the space of a 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:
- 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?
- We see that these frameworks all separate a row into a number of columns, some 12, some 16 etc.
- Different frameworks have different syntaxes, some writes grid classes like `one column`, some use numeric numbers.
- We also see that some frameworks have different functionalities like `offset` or `gutters`. For example, Materializecss has addtional settings in `containter` as 70% of window width.
- The responsive setting between devices differs in the webesites.
- What is a Grid System _convention_ vs. _rule_? Can you give an example?
- We think that a convention is something like dividing a row into a number of columns and that content will take up some portions of a row. A rule is more like the specific syntax and hireachy, such as how we specify a column class`col-xs-6` in Bootstrap.
- What would happen to my columns if I remove Bootstrap from my page?
- If we remove Bootstrap, there is no longer a grid system and all the styles are set to default. The columns are no longer inline but are blocks.
- Is the class, `col-xs-6` for example, really that special?
- We are not super sure what this question means. In the end, it's really just help us make responsive styles using the 12-column grid system in Bootstrap. We can probably write it ourselves but may take a much longer time than using what Bootstrap have.
- 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's fast to use and especially easy for us to make our page responsive. Bootstrap grids allow you to use containers, rows and columns in combination to create layouts however you need.
- It's flexible to use. For example, you can simply use two `col` without specifying the number and it will automatically divide the row into two columns.
- The grid system uses the flexbox as containers. The structure of layout can be written clear and structured.

- How does the combination of different ways of observing, manipulating, thinking, and applying code help learners to develop a comprehensive mental model of understanding?
- The syntax in the bootstrap can be combined in the multiple ways. For example, we can categorize them as styling parts and position parts. Styling button,columns etc. in different colors. Less memory load for us to link the chunks to visualize the webpage.
- By doing so, learners can first look up examples and templates that could meet their needs, then think and understand how do they work and perform which help them applying code effectively and developing a great mindset of understanding the comprehensive model of coding logic.

## 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.1/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?
- We feel that copying the examples and then tinker with it help us better see the changes and how this component is structured. We can see what breaks and what works by customizing it.
- 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?
- After removing it, the background color returned to being red. This is because `!important` forces the `bg-danger` background color to be pink.
- What affect might this have on other parts of my page?
- By changing the background color of `bg-danger` to pink using `!important`, all elements with class `bg-danger` on the page then have background color of pink.
- 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.
- We found the dropdown component interesting and tried to add it to the code. However, the dropdown doesn't work when we are clicking it. We were confused since we copied the exact code from Bootstrap. Then we went into JS and realized that the external libaries we were using are out of date. We switch them to the newest version and the dropdown button now works!
- We have added expand/collapse accordion to better organize our content which just like the dropdown component, it did not work initially,but after updating the JS, it worked as it should be.
- Learning to use new features was exciting. We can always find other ways to bring a better user-friendy webpage while keeping the webpage organized and informative.
- It will be interesting for us to combine the interactive features and the layout stuctures in the future.Right now we are still explore the seperate part of these settings and figure out how to make it more stylistic.