TINKER: Bootstrap Response

--- tags: mstu5003, tinker, html, css, bootstrap --- # TINKER: Bootstrap Response --- **Group4：Zexin Lyu, Xinyan(Helen) Song, Yiran Wang,** Codepen we played on: https://codepen.io/Lexie-/collab/VwWJqxg ### 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? >**Answer**: There is no css style. The previous css all disapeared. Because the previous css style used Bootstrap's CSS, which will do the work for us itself. And if we remove the Bootstrap, then everything will be 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? >**Answer**:It seems like the page includes sets of different CSS styles. It is a pre-write CSS style sheet. If you use the same classname or ID name of the Bootstrap, it will directly use the previously finished style sheet to help you style the page. - I have a few CSS rules in the CSS pane. Comment them out. - What happens to the page and why? >**Answer**: Paddings and and margins of different divs changed. Background color of `<div class="card-body cat-jumbo">` (with the text Meow meow meow meow) changed from grey to white. - What is the relation between my CSS and the External Resource? >**Answer**: We feel like the external resource did most of the styling through using their classname in HTML, and you used the few additional CSS rules for adjustment. - How does my CSS "intersect" with the External Resource? >**Answer**: Bootstrap already have pre-set color and styling, we were wondering if CSS rules can override those pre-set stylings. We tried giving the `class="badge bg-danger` a CSS rule changing its background color to black, but it seems there's no change. Eventually we figured out that adding `!important` to the end helps CSS rule override Bootstrap ```css= .bg-danger {background-color: black !important;} ``` - What do you think is the sequence of how the External Resource and my CSS are loaded? >**Answer**: According to what we have done, we notice that the sequence is that loading external resources, and then it will load my CSS. (that's why we can override it with a !important) - What kinds of things could happen, if I am careless with my own CSS rules? >**Answer**: The page would't look like what we've envisioned, would just looks like the pre-set from Bootstrap. - 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? >**Answer**: According to what we have done, we understand that the external resources already have a `!important` to its' rule. If we want to over-write, we will need to add `!important` behind my CSS rules. Or we can write new class name and give that class our own css style. - 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? >**Answer**: Last MeowMix's CSS included very sepecific stylings for font, container, table, box, images etc. (it was a lot) but this week's CSS only defined margin and padding to slightly style the page. - What then is the _advantage_ of using a framework like Bootstrap? >**Answer**: 1. Save time to write all CSS style on our own. 2. The Style is very consistant. 3. We tried to used the dev tool and look at both pages in iphone and ipad view and noticed that using Bootstrap styling helped the page to still have margins (thanks to the container) even in iphone view. However with manual CSS (from last week's page), contents look cramped in iphone view i.e. the border and margins doesn't look suitable. - What are some _disadvantages_ of using a framework like Bootstrap? >**Answer**: 1. You have to go with Bootstrap's style so therefore lack personalities of your own style. 2. Many other websites might use Bootstrap, so yours is not unique. - 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? >**Answer**: If we are not using Bootstrap`.container` is just a div. We can style it by refering to this class in CSS. If we are using Bootstrap, `.container` correspond with a Bootstrap style. We researched on the [Bootstrap website](https://getbootstrap.com/docs/5.0/layout/containers/) and learnt that the default `.container` class is a responsive, fixed-width container, meaning its max-width changes at each breakpoint. - There are many more `classes` used in this week's Tinker. Where do these classes come from? >**Answer**: They all come from Bootstrap's components. Those are all pre-set classes with styles. - 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? > **Answer**: We tried removing the class name `img-thumbnail` and found the picture became bigger. We think it removed the styling from Bootstrap We then moved the `img-thumbnail` from `<div class="col-4">` to`<div class="col-8">` and found the picture moving from the left column to the right column. - 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?) > **Answer**: No, non-class attributes are not important when getting Bootstrap to work. Since the Bootstrap is a style libarary, and only class can have general access to the public style libarary for everyone to use. So the non-class attributes often can not help us when we want to refer the elements in CSS. ```html=  <form class="row"> <div class="col mb-3"> <label for="yourEmail" class="form-label">Email address</label> <input type="email" class="form-control" id="yourEmail" placeholder="Email"> </div> <div class="col mb-3"> <label for="yourName" class="form-label">Name</label> <input type="text" class="form-control" id="yourName" placeholder="Full Name"> </div>``` - If you deviate from the specifications, particularly: 1) the classes used, 2) the hierarchy expected, how might that affect your result? > **Answer**: We have to use the specific Bootstrap class to achieve the corresponding style, so if changed the style would not be achieved. E.g., we changed the code from ```html= <form class="row"> <div class="col mb-3"> <label for="yourName" class="form-label">Name</label> <input type="text" class="form-control" id="yourName" placeholder="Full Name"> </div> ``` > to ```html= <div class="col mb-3"> <form class="row"> <label for="yourName" class="form-label">Name</label> <input type="text" class="form-control" id="yourName" placeholder="Full Name"> </div> ``` >and the from changed from 2 columns to one column, with 2 rows. We think the hierarchy of divs (chunks of codes) doesn't affect Bootstrap (as long as we have the correct class name attached.) But we need to follow the container-row-column sequence. - Manipulate the form to "exclude" certain classes as prescribed by the Bootstrap guide and examples. - How does not following the specifications affect the output? > **Answer**: As answered before, the output wouldn't follow Bootstrap's styling. We deleted the class name `"form-control"` and `"form-input"` , so the form's previous style that are controled from bootstrap are gone. > ![](https://i.imgur.com/lty3jdh.png) - What are the key aspects you need to be paying attention to when learning and implementing these framework features? > **Answer**: > 1. Paying attention to class names. > 2. Follow the regulations of Bootstrap (e.g. using a `<div class='row> </div>'` to wrap around `<div class= 'col-*-*>` ) - What is the best way to learn how to use a new framework feature? > **Answer**: 1. Search on Bootstrap's offical website style guide. See how they use the features. > 2. Try it out in Codepen. > 3. If anything is not right, try watching a youtube video or other web-page which introduce the feature you want to use. - Think about your experience building a page from scratch last week. - What is your attitude on using, learning new frameworks like this? > **Answer**: USEFUL, We need to always keep trying. These frameworks an be a "shortcut" when building functional websites and making it look coherent. ### GRID SYSTEM ```htmlmixed= <div class="container"> <div class="row"> <div class="col-__">  </div> </div> </div> ``` - FIND the above pattern(s) within the HTML. - Move a `.row` to the outside of a container. What happens? > **Answer**: We used the first container in Tinker, and moved the `.row` above `.container`. This action expanded the gray box behind the container to the full width of the page. > ![](https://i.imgur.com/RytBQb7.png) - Move a column outside a row but within a container. What happens? > **Answer**:The column will be the first grid, and then the row will within the column. You can see there is a left and right margin within the container, which might be caused by the difference in style of "column" and "row" > ![](https://i.imgur.com/GY4MqDk.png) - What is the importance of using these three classes together `container`, `row`, `col-__` and in the correct hierarchical sequence? > **Answer**: You need to put three classes all together in order to put everything within the grid. And because the bootstrap have previously set the style of these three classes. So including all can ensure you add all style to all elements. Putting a `col-__` above `row` would be like putting the elements into a box without even segmenting the page into a 12 column grid box system. Then of course the columns can't be placed into the grid. - 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? > **Answer**:They would lost their width retricted by the column style in Bootstrap. If we continue the analogy of 12 column as 12 boxes, it would be removing the element out of their supposed boxes. - 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? > **Answer**: "xs" means extra small; "sm" means small; "md" means medium; "lg" means large, "xl" means extra large; "xxl" means extra extra large. These refers to the size of the elements. It also refers to the display screen. sm usually use on phone, and md might often use for desktop, and lg will use for large desktop. > We changed the size of columns and realized that on a normal laptop, md can give the three columns we segmented (using three `col-md-3`). However, if we change it to `xxl`, only on one team member's bigger monitor would show the columns' styling. - 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? > **Answer**: The number means the width that the col will take refer to the 12 grid system. For example, `col-12` means it can take up to the whole col. and `col-3` means it can only take up to 3 out of 12 of that whole col. - 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? > **Answer**: > **Similarities:** > 1.They all use a grid system to manage the columns. > 2.They all use row and column to manage the grid. > 3. No matther how their class names are formatted, it all included how wide an element would be i.e. how many columns an element would take > **Differences:** 1. Bootstrap use 12 grid system, same as materializecss and skeleton, however, semantic used a 16 grid system which divides up the col to 16 parts. 2. The `.name` used for different websites are in different formats. - What is a Grid System _convention_ vs. _rule_? Can you give an example? > **Answer**: The Grid System convention refers to things that everyone would agree on when building the Grid. For example, the hierarchy of Container, Row and Column would be a Grid system convention. Everyone use these three to organize their webpage in to the right shape. And Grid System rule refers to different libaray's rules. For example, bootstrap will use the "row" "col" to represent row and columns, but Semantic would use totally different class naming rules. - What would happen to my columns if I remove Bootstrap from my page? > **Answer**: Then the style from Bootstrap will disapear, and everything will back to follow the HTML and CSS code's style and format. - Is the class, `col-xs-6` for example, really that special? > **Answer**: It is special in the sense that it only correspond to one Bootstrap's format, not any other sources. It is not special in the sense that the stlying it provides us can also be achieved through our own CSS coding or using other outside sources. - 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? > **Answer**: It really helps us to organize the whole web-page into a grid system with style. So that you can imagine the whole web-page as a large grid with different boxes. By using tools like Bootstrap, it helps you to put everything in to the right box, so that the webpage will look neat. And it also saves you a lot of time to do the basic styling and oraganzing. - How does the combination of different ways of observing, manipulating, thinking, and applying code help learners to develop a comprehensive mental model of understanding? > **Answer**: It helps students to understand the rules behind each web-page elements, and also get to explore different ways to apply the code. For example, comparing how different libaries would write grid-system allows learners to see the basic of web-page building, and how different rules can have different effect. Overall, it makes coding experiences not only a copy and paste process with out thinking, but a thinking process with understanding. ## 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? > **Answer**: First, we want to read through the style sheet and guide. Observe what the element looks like (on the web page and as codes) and where it should be used. Then learn from the examples that the style sheet provided. Second, we can always try to use the component in our code. Try it out and see what could happen. We think this would be the best way to learn and practice. - 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? > **Answer**: If we remove the !important, the background color would get back to the .bg-danger original color red. Because the style of Bootstrap already have !important to every style. And also because the Code will process Bootstrap's style first and then to our own CSS file, no !impotant will not make your own style cover the Bootstrap's style. - What effect might this have on other parts of my page? > **Answer**:For the current page, no effects. But if there are other elements on the page with the class `.bg-danger`, then its color would change 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. > **Answer**: We tried using "Navbar" on the top of the page. We added ID attribute to `<h2 id="Intro">Introduction to Purrr</h2>` and ` <h2 id="analysis">Analysis of Felis Catus</h2>` then linked them to Navbar so we can easily jump to these headings. ```htmlmixed= <div class="container"> <ul class="nav justify-content-center"> <li class="nav-item"> <a class="nav-link active" aria-current="page" href="#">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#Intro">Intro</a> </li> <li class="nav-item"> <a class="nav-link" href="#analysis">Analysis</a> </li> </ul> </div> ``` >It looks like this: ![](https://i.imgur.com/AEnBxmm.png)