Tinker:Bootstrap group 4

# Tinker:Bootstrap group 4 #### Group Members: Ada Zhou, Dilys Han, Sandra Sowah --- ## 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? :::info Here’s our response: Font and alignment changes. Because in order to read bootstrap, the file needs to be imported first, since bootstrap is used in HTML. ::: - What is Bootstrap really? :::info Here’s our response: It is a series of codes with HTML, CSS and JavaScript-based design templates that makes the process of improving the aesthetic effects (alignment, font, icons, colours etc) of a document easier. ::: - I have a few CSS rules in the CSS pane. Comment them out. - What happens to the page and why? :::info Here’s our response: Alignment goes off. Because CSS dictates the alignments and colours. ::: - What is the relation between my CSS and the External Resource? :::info Here’s our response: They both adjust the alignment, background colours and other aesthetic aspects of the webpage. ::: - How does my CSS "intersect" with the External Resource? :::info Here’s our response: They both adjust the alignment, background colours and other aesthetic aspects of the webpage. ::: - What do you think is the sequence of how the External Resource and my CSS are loaded? :::info Here’s our response: Sequence matters because a particular file (E.g. A) could be needed to read another file (E.g. B). If B is placed before A, the system is unable to call out any file to read B. Hence, B will be seen as a code with no meaning. ::: - What kinds of things could happen, if I am careless with my own CSS rules? :::info Here’s our response: You are not able to change the colours/fonts/alignments of the targeted portions. Certain files cannot be read if the sequence of importing is wrong, and desired aesthetic effects will not appear on the webpage. ::: - 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 Here’s our response: No, we are not stuck with all of Bootstrap's rules. We can put additions in a separate file and link it below the bootstrap.css link. Then you can add your own classes and/or overwrite the Bootstrap classes in your own file. ::: - 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 Here’s our response: In CSS, we had to add padding and margin to align our web content aesthetically. But in Boostrap we just use container then nest rows and columns within. We also no longer need to call out a specific class in Bootstrap to add effects to it. ::: - What then is the _advantage_ of using a framework like Bootstrap? :::info Here’s our response: Bootstrap has a grid system, but CSS doesn’t. This allows us to arrange information easily in columns and rows without having to estimate the rems and pixels. CSS does not provide responsive pages or website but Bootstrap does. Using CSS also means we need to write the codes from scratch but for Bootstrap, there are already pre-defined classes that we can add to the code without having to write the code from scratch. ::: - What are some _disadvantages_ of using a framework like Bootstrap? :::info Here’s our response: It is difficult to do customisation in Bootstrap because there are already codes for standard designs. It would take a lot of time to rewrite files or do style overrides to attain a preferred style. Furthermore, if no customisation is done, then every website would look the same. ::: - 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 Here’s our response: No, they are not the same thing. In Bootstrap, .container is the basic layout element so that we can use the Grid System. In CSS, .container is used to place content together with same font-color, background-color, font-size, font-family. ::: - There are many more `classes` used in this week's Tinker. Where do these classes come from? :::info Here’s our response: Bootstrap is a collection of CSS classes and JavaScript function ::: - 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 Here’s our response: img-thumbnail gives an image a rounded 1px border appearance. Danger class colours things red These classes change the alignment and outlines and colours of things. ::: - 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 Here’s our response: No, they are not important with regard to whether the main content appears on the webpage or not. They are only important of the page fails to load or cannot be read by the computer. Placeholder tells users what the missing image or text is. ::: - If you deviate from the specifications, particularly: 1) the classes used, 2) the hierarchy expected, how might that affect your result? :::info Here’s our response: However, if deviated from specifications, then the desired outcome will not show at all. The arrangement and style of the content will simply revert to the basic HTML style, without aesthetic customisations. ::: - 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 Here’s our response: Intended displays do not show. For example, in Checks, when remove <d i v class="form-check">, the display changes aesthetically, but the checkbox still works. But when remove the ones highlighted in blue (see image), an error message of ‘502 Bad Gateway’ shows. ![](https://i.imgur.com/Jr2G6vN.jpg) ::: - What are the key aspects you need to be paying attention to when learning and implementing these framework features? :::info Here’s our response: We must pay attention to the pattern of the codes, like how a Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding. We must also note the differences between similar terms in Bootstrap and CSS like container, because they have different functions. ::: - What is the best way to learn how to use a new framework feature? :::info Here’s our response: Fork a code, try to match each line of the code to a line in the display to understand what the code means. Remove or swap certain classes to see their impact on the output. ::: - Think about your experience building a page from scratch last week. - What is your attitude on using, learning new frameworks like this? :::info Here’s our response: We must understand the pros and cons of each framework so that we know which to use to create the desired product. For example, if I want to create a highly customised webpage, I will simply use CSS and not Bootstrap. Learning new frameworks is good because it gives us more options to produce our desired web products more efficiently. ::: ### 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? :::info Here's our response: The left margin of the whole page disappeared. ::: - Move a column outside a row but within a container. What happens? :::info Here's our response: The inside content will take up the whole row with default 12 columns. For example, in the Bootstrap Tinker, we moved **.col-4** outside of **.row nyan-row**, then the image of the Grumpy Cat took up the whole row instead of 4 columns. Additionally, the content inside h3 and p element took the left 8 columns. ```html= <div class="container"> <div class="col-4"> <div class="row nyan-row"> <img class="img-thumbnail" src="https://jmk2142.github.io/mstu5003/week01/visualize/images/catZero.jpg"> </div> <div class="col-8"> <h3>Grumpy Cat</h3> <p>I'm unimpressed. Shut up and code.</p> </div> </div> </div> ``` ::: - What is the importance of using these three classes together `container`, `row`, `col-__` and in the correct hierarchical sequence? :::info Here's our response: Using these three classes together in the correct hierarchical sequence ensures the grid system can work structually. The container provides the defualt grid system. The default container class is a responsive, fixed-width container. Then row class works as wrappers for columns that provides equal paddings. Columns, of course, also have default styles, such as padding and margin, created in 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 Here's our response: When we move the h3 Grumpy Cat outside of .col-8, the h3 content starts in a new row and breaks the original inline 8-block space. The p element inside of .col-8 was also affected. ::: - 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 Here's our response: - When replacing col-12 to col-4, the paragraphs end up taking 1/3 of the page. - The xs, sm, md, lg, xl, xxl represent six default breakpoints of the Bootstrap's grid system. Six default breakpoints are **Extra small (xs), Small (sm), Medium (md), Large (lg), Extra large (xl), Extra extra large (xxl).** The max container width are different between default breakpoints. ::: - 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 Here's our response: The default grid system has 12 columns. And the number in the column name represent how many column this class take. For example, col-3 means it takes 3 columns out of 12 which means the content would stack in 1/4 of the page. ::: - 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 Here's our response: The similarities are that the grid systems all have certain number of **equal** sized columns in the page. But Semantic UI has **16** columns, while Materialize, Skeleton and Bootstrap all have **12** columns at default grid system. They can all change their column numbers by giving a number in the column class. But Bootstrap uses .col-3, .col-4..., Skeleton uses ration value (one-third, one-half...), Materialize uses s3,s4, s6..., and Semantic UI uses four column rows, eight column rows...to define the column numbers. ::: - What is a Grid System _convention_ vs. _rule_? Can you give an example? :::info Here's our response: 12 column grids is a convention and it's not a standard. But the way of naming would be rules to follow in different grid systems. Otherwise, the computer would not understand. ::: - What would happen to my columns if I remove Bootstrap from my page? :::info Here's our response: The grid system of equal container width would disappear. And the page layout shifts. When removing Bootstrap, the computer would not understand the .col-4, then the content inside the class would not be divided into three equal-sized columns. ::: - Is the class, `col-xs-6` for example, really that special? :::info Here's our response: The xs(extra small) usually works on mobile phones. .col-6 will span half the screen on the mobile phone. Defining appropriate breakpoints and number of columns can help you read content more comfortable. So when you view content in different tablet, the content will adjust looking automatically for you. ::: - 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 Here's our response: Comparing to last week's Tinker, tools like Bootstrap provides a more convient way to display results. And it definetely makes the layout more structualized since the codes had been made by Bootstrap. ::: - 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 Here's our response: Simply observing the code would not be helpful for users to memorize how code works. But observation allows us see how may code change the result. The combination of different ways of playing around with code would provide learners hands on experiences. And individuals may encounter different errors with codes. Therefore, learners can better understand and resolve problems with coding. ::: ## 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 Here's our response: Looking at how the information is presented, you see the following pattern in the documentation: 1. We first get information on what the component can do: the functionality for the componnet is presented. It answers the question: "WHAT does this do?" 2. We are then provided with examples of how the components would look like on a deployed page. We pick up on posiible characteristics and options for the componenet, in addition to the code that creates it. There is an effort to answer the question: "HOW does it work and look like?" 3. We are then provided with OPTIONS for each type of component we might want to use. Each options has its applicable code to help with expanding the use-case for each component. It answers the question: "WHEN is this component use-case most applicable?" 4. We get exposure to how the code would work in CSS or Java. It is to help us expand our knowledge into other syntax or semantics that produced the same outcome for the component creation on the page. . When learning to use new components in a framework, we think that the best practice would be to: 1.READ about it in the documentation if you can or find a resource that explains the component, its functionality, use case, and its limitations (if applicable) 2. PRACTICE programming the code that creates the component so you are comfortable with recreating the code 3. TRY TO BREAK the code so you can learn what not to do 4. EXTEND your knowledge and understanding by applying it in insightful ways or creative use-cases. ::: - 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` :::info Here’s our response: Please note that the coding in the "Extremely Deadly" does not contain the code with the ".bg-danger" in its CSS, but the bootstrap tinker has the coding. For the "Extremely Deadly" coding, changing the CSS updated the background to pink: `.danger { background-color: pink !important; border-radius: 3px; color: #FFF; font-weight: bold; padding: 4px 6px; font-size: .5em;` There wa nothing to realy report. The actual response and outcomes are clearer in the Bootstrap exercise. In the bootstrap exercise we change the ".bg-danger" color and have responses for outcomes (see below). ::: - Try removing the `!important` and what happens? Why? :::info Here’s our response: When we applied this to the bootstrap excercise, here are the following observations: 1. using only ".bg-danger" does not change the color to pink. You have to use "text-bg-danger" in order to interact with the background for the CSS. 2. Using the option of "text-bg-danger" having a color of pink only does not override the CSS to display pink. 3. You need to override by using "!important" for the background to stay pink. See the code below: `.text-bg-danger { background-color: pink !important; }` The CSS does not get overwritten without "!important" applied as this prioritizes what gets changed. This is because the use of this sematic in the coding tells the program that the color attribute assigned to the ".bg-danger" class is getting a new look: pink! ::: - What affect might this have on other parts of my page? :::info Here’s our response: The other elements that belong to this class ".bg-danger" were also changed on the page. This means that we need a stricter category or more specific relationship so that a paticular change to one component does not impact the other. I tried to make the code more specific so only one text box is changed at a time for the bootstrap exercise. The use of an "id" element would accomplish that. If the intent is to select all classes, then the rest of the page changing accordingly meets the required outcome. ::: - Pick a few different components you find interesting. Try to implement them into your Tinker fork on Codepen. :::info Here’s our response: We decided to apply the same color to the DANGER button. We first selected all the buttons and then used the override command to turn them pink. Then we refined the selection by applying the pink color only to the "btn-danger" class. See the code below: `[type="button"].btn-danger { background-color: pink !important; }` The intersting observation with the button override is that only buttons changed, whic is expected. For the text changes, the rest of the page was affected. ::: - Share with your group what you found about the experience of learning to use new features and what your takeaway was. :::info It was a difficult exercise figuring out why the ".bg-danger" color was not changing, but a very great opportunity to learn about overrides. I had to actually perform an override using Javascript, which only changed one of the "Extremely Badly" cell to pink. I could iterate over the cells, but that would be out-of-scope for the current class. Here is the Javascript code: `document.querySelector(".danger").style.backgroundColor = "pink";` The new knowledge about being able to override with either the CSS or Javascript and getting the opportunity to practise both methods has been insightful. My key takeawat from this was that practise often; break the code and learn how to fix it; give yourself lots of time to get used to new information; and never give up! :::