# Tinker Notes: Bootstrap
###### Group 12: Lauren (Chae Rin) Lee, Sharleen Loh, Alina Wang, Zhiyin Wang

## Tinker Tasks

- Like we did with the prior Tinker, fork the codepen to play with it.
- **COMPARE AND CONTRAST** this Tinker (which uses Bootstrap) with [last week's codepen](https://codepen.io/jmk2142/pen/dVMRRq).
- Use the guiding prompts and questions to **manipulate** the code **one thing at a time** and _see_ what happens.
- **Articulate** your understanding and share your findings and insights with your weekly group and/or the class.

### 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?
> [color=skyblue] The styling all disappeared as soon as we removed the Bootstrap resource. This is because the HTML elements on the page were styled through Bootstrap classes. Once the Bootstrap import was deleted, the classes were stripped of their stylesheet associations, losing their meaning.

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?
>[color=skyblue] Bootstrap is a library of CSS. It provides templates and frameworks for responsive web design and speeds up the web development process. When we copied the link into our browser, it was a horrendous amount of code. Bootstrap also offers html structural blueprints and javascript code.

>**Library**: any code you're borrowing from someplace else; typically a collection of functions.
>**Framework**: subset of library; set of tools with a specific way to use them, will break if not used correctly (grid system)
>
>But why is it called "Bootstrap"?
>In business, Bootstrap is the means/resources you have to start a business. In web deisgn, we can use resources someone else created to speed up our creation.

I have a few CSS rules in the CSS pane. Comment them out.
- What happens to the page and why?
> [color=skyblue] The margins and padding disappeared as we commented out the CSS rule applied on the headings and body. The background color of the card on the top of the website disappeared as we commented out the rule applied on the cat-jumbo class. The table of form also disappeared. This happened becasue the frameworks of bootstrap have certain rules for us to change.
- What is the relation between my CSS and the External Resource?
> [color=skyblue] Both provide stylesheet information, and style the linked HTML elements.
> In this codepen document, there aren't a lot of styles specified in our CSS, but bootstrap is bringing in default styles.
- How does my CSS "intersect" with the External Resource?
> [color=skyblue] Although Bootstrap comes with a lot of default formatting like color, font, and margin/padding, we can adjust them through our own CSS, such as the font family.

- What do you think is the sequence of how the External Resource and my CSS are loaded?
> [color=skyblue] It seems like the External Resource (Bootstrap) comes first as we were able to override the Bootstrap styles with the rules we apply through CSS.
- What kinds of things could happen, if I am careless with my own CSS rules?
> [color=skyblue] Many bad things. Among which might include messing up the formats of the External Resource's default formatting. Some of the External Resource's properties rely on other properties, which you don't want to mess up (i.e. padding, margin). ex: if I add background color with pink in the element of h1,h2, h3 with CSS and all the headline background color became pink color.
- 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?
> [color=skyblue] You can override Bootstrap's default rules in your CSS! As long as you figure out the right properties to adjust. But it is better to create your own class so they will not collide.

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?
> [color=skyblue] Font family/color/style, text alignment, a lot more margins/padding, borders, width/height. Lots of styles rules we have to set up by ourselves, such as font-size/weight,and text-decoration, etc.
- What then is the _advantage_ of using a framework like Bootstrap?
> [color=skyblue] You don't have to reinvent the wheel! Through pre-built structures, styles, and components, we do not have to work on them on our own! simple and convenient for us to import and use.
- What are some _disadvantages_ of using a framework like Bootstrap?
> [color=skyblue] You might want more customizability for certain features when Bootstrap only provides for certain format. Due to the default format, sometimes we have less choices to determine by ourselves.

Compare the HTML from this week's Tinker vs. last week's Tinker HTML.
> [color=skyblue]
- I use a class called `.container` in both. Is this a special `class`? Are they the same thing?
> [color=skyblue] The container class automatically centers things and prevents things from getting too wide. Container determines the structure of display. For bootstrap, containers are used for its grid system as there is a row in the container, and columns in that row. When we deleted the `.container` from last week's HTML, the distance between top and bottom padding became narrow; when we deleted `.container` from this week's, the padding moved from center to left. Thus, the `.container` used in this week's is a bit different from last week's. The class `.container` in bootstrap uses it for the layout of columns and rows for its grid system. They work with the rule of`.container` being the parent and `.row` being its child, and then `.column` as the child of `.row`. On the other hand, last week's `.container` was to simply set up the layout of the page, including margins, paddings, and alignment.
- There are many more `classes` used in this week's Tinker. Where do these classes come from?
> [color=skyblue] Imported from Bootstrap. You can look at the Bootstrap documentation to figure out which classes to use.

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?
> [color=skyblue] Images seem to need `img-thumbnail` in order to be fit into the determined size of the `.row` and `.col`.
> The danger/info/success/etc. classes can be added to existing classes (div, badge, etc.) to color them in a specific way. For example, changing the class of the table's cell to `success` changes the color of the cell to green.

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?)
> [color=skyblue]No. Boostrap is triggered by class. The non-class attributes add some styling to the page, but when we delete them, it doesn't affect the display of our page. For example, when we delete the placeholder, only the text in the box disappeared and nothing else changed. Deleting non-class attributes cannot affect the whole display, and bootstrap still works, but deleting the class attributes may lead some content to be disappeared.
- If you deviate from the specifications, particularly: 1) the classes used, 2) the hierarchy expected, how might that affect your result?
> [color=skyblue] For an inline-form, if we fail to put column classes inside of a row class (the wrong hierarchy), the columns will fail to display as inline boxes. Since the class triggers the boostrap, if we use the wrong class, we will not get the intended result.

Manipulate the form to "exclude" certain classes as prescribed by the Bootstrap guide and examples.
- How does not following the specifications affect the output?
> [color=skyblue] It messes up the page and doesn't show the desired, intended output. For example, simply excluding the `row` class distorts the margins and layouts of the page.

- What are the key aspects you need to be paying attention to when learning and implementing these framework features?
> [color=skyblue] When learning and implementing these framework features, it is important to fully understand how the layout and styling are impacted by certain codes and to pay attention to the parts that we should not mess around with in order to maintain the original structure. On the other hand, it is important to not only rely on what Bootstrap provides, but also try to see what we can do to play around with the given structures and components and create my own unique page.
> Also, we need to pay attention to the styles with classes since it will affect the layout of bootstrap.

- What is the best way to learn how to use a new framework feature?
> [color=skyblue] The best way to learn such new framework feature is to continuously practice it by trying the different codes and components myself, manipulating them to see what changes happen when we exclude or add some of them, and repeating such process to be familiar with them.

Think about your experience building a page from scratch last week.
- What is your attitude on using, learning new frameworks like this?
> [color=skyblue] Through building a page from scratch, we have all realized how difficult it is to style the page exactly like how we imagined and how complicated it is to create components we want to insert from scratch. Thus, frameworks like bootstrap is an eye-opening tool that will make our website much more aesthetically pleasing and will save so much of our time when designing pages. Because it seems like such a powerful tool to expedite our website builiding process, we are all very eager to learn more about it and figure out how to customize them in our own unique ways! The new frameworks seem to be very convenient, especially when we are stuck and have no idea on how to change our thoughts into code. They really provide a reference for our own code.

### 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?
> [color=skyblue] It loses its margins!
- Move a column outside a row but within a container. What happens?
> [color=skyblue] There is margin on the left and right of the card.
- What is the importance of using these three classes together `container`, `row`, `col-__` and in the correct hierarchical sequence?
> [color=skyblue] Using container, row, and col in correct sequence allows us to display content in desired format (we can split up a row into several columns and we can assign the width of each column.) However, if we put col outside of row, we cannot split the row into columns. Instead, the columns will display as seperate lines.

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?
> [color=skyblue] When the content fell outside of the columns, the margins, image sizes, and the entire layout of the content changed. Especially, when the content fell outside the `container`, the width completely changed as the content filled the entire screen without any margins on the sides. However, when the content was still inside a `container` and a `row` but just out of `col`, only the layout got messed up while the width (margins) was maintained. For example, when we move an image outside of the class `col-4`, the image takes up the entire row and the text originally on its right starts a new line below it.

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?
> [color=skyblue]They indicate the width of the container, which is usually linked to the width of device. If we change the col-4 to col-md-4 of the image Grumpy cat, the image will be expanded earlier than with col-sm-4 if we zoom in the page.

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?
> [color=skyblue] In booststrap a row is devided into 12 columns. The number represents the number of columns it occupies. Therefore, a `col-12` indicates that the column takes up the entire row, while a `col-3` is taking out 3 columns, that is, 1/4 of 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:
- 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?
> [color=skyblue] Similarities:
> 1. Rows are devided into columns (rows are hierarchically higher than coloumns).
> 2. All can sepecify how much space a column occupies.
>
> Differences:
> 1. For Bootstrap, materializecss and getskeleton, there are 12 columns in a row. But for semantic-ui, there are 16 columns in a row.
> 2. The class name for a row is different.
> 3. We can create gutters which contain multiple rows with a grid using Semantic-ui.
- What is a Grid System _convention_ vs. _rule_? Can you give an example?
> [color=skyblue] Grid system convention is a pratice that followed by most users, while grid system rules must be followed by users. For example, a rule requires that a row contains 12 columns, and each column should be a child of the row. And these cannot be violated. By convention, if there are 2 columns in a row and width is not specified, each column will take the width of 6. In general, columns within a row without specification of width will have equal width. Specifying the number of columns a column class takes is not compulsary.
- What would happen to my columns if I remove Bootstrap from my page?
> [color=skyblue] They would no longer be formatted as columns, instead performing as block elements stacked above/below each other.
- Is the class, `col-xs-6` for example, really that special?
> [color=skyblue] Nope! We need formatting from Bootstrap or other CSS stylesheets.

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?
> [color=skyblue] Boostrap allows us to deisgn and change the layout of our page very easily by giving the content a column class. It incoportes flexbox that allows more styles. Boostrap also enables layouts to adapt acoording to the screen width.

- How does the combination of different ways of observing, manipulating, thinking, and applying code help learners to develop a comprehensive mental model of understanding?
> [color=skyblue]It allows learners to see the impact of a class on the display, and the hierarcy and interrealtionship between elements. By tinkering around the code, such as moving the children out of their parent, learners can see the importance of hierarchy.

## 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?
> [color=skyblue] Tinkering! Copy the component code into a CodePen, then experiment with one element at a time to see what it does.

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?
> [color=skyblue] The background color changed back to red. This is because `!important` allows us to override previous styling, so taking it away means Bootstrap's styling takes preference.
- What affect might this have on other parts of my page?
> [color=skyblue] Since this is changing the entire `bg-danger` class, anything else styled with the `bg-danger` class will become pink as well.

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.
> [color=skyblue] First of all, we tried to create a card component with an image of a cat and some texts. It was very easy to create one with the bootstrap codes, and we were even able to change the color of the button through changing the code to `btn-success`.
> Moreover, we were also able to create alert buttons very easily as well by utilizing the Bootstrap codes for alerts.
> 
> Through such experiences of implementing various Bootstrap components, we realized how easy and quick it is to create various fun components on our website without extra time and effort if we use Bootstrap!