# **Tinker 2** ## FRAMEWORK: OVERARCHING 1. 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**: The design layout become messy and not attractive. 2. 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**: A framework designed to speed up the process of creating web pages with many of the standard features you have already come to expect. 3. I have a few CSS rules in the CSS pane. Comment them out. - What happens to the page and why? **Answer**: The spacing between videos disappeared. - What is the relation between my CSS and the External Resource? **Answer**: If I removed the Bootstrap, the image layout/margin/ size run off. The table disappear too. - How does my CSS “intersect” with the External Resource? **Answer**: my CSS customizes the external resource, and they work together to dicate the style on the page. But, My CSS is over-rides the external resource, which means if I write font-family:Georgia to the code, then the font-family of that code will present as Georgia on the page, instead of the font family dicatated on the external resource. - What do you think is the sequence of how the External Resource and my CSS are loaded? **Answer**:If we did not apply CSS, external Resource will loaded. But if we customizes particular part in the my CSS (ex. background-color, font-size), my CSS of that part will overides the external resouse, and others will remain. - What kinds of things could happen, if I am careless with my own CSS rules? - Will not have good appearance like oversized images. - The content may still be read in order. - 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 will need to create every single elements in CSS such as margin: 10px, 20px, 30px, 10px for that specific image - However, if we have Bootstrap's rules we can adjust our row and column by using the 12 column fluid grid. 4. 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? - Need to count the pixel for the image's padding to achieve the similar result for CSS; now I just need to add "col-4" because of having Bootstrap's rules. - What then is the advantage of using a framework like Bootstrap? - No need to keep adjusting the pixel widths to get the design layout that you want - It had predefined terms, so it ease coders' life by just copy and pasting it (don’t need to create from scratch) - Help you save time. - What are some disadvantages of using a framework like Bootstrap? - Style maybe similar. - It actually restricted your design layout because it has certain standard set of grids and selectors 5. 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? - Always begin Bootstrap with div class= container, if not it will start behave differently; by adding container will receive predicatable behavior - There are many more `classes` used in this week's Tinker. Where do these classes come from? - To create boxed content, when designing the row and column elements. 6. 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? - When I change badge-success to badge-danger the "delish" box become red 7. 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, the non-class attributes will not afect Bootstrap work. Because when I removed these attributes, the form is still functional. - If you deviate from the specifications, particularly: 1) the classes used, 2) the hierarchy expected, how might that affect your result? **Answer**: deviate from the class used will afect deeply on the webpage appearance and function. and deviate from the hierarchy will move the order of content on the page. 8. 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**: exculding certain classes will casuse the change of the appearance on the webpage, including looking style and position. - What are the key aspects you need to be paying attention to when learning and implementing these framework features? **Answer**: Responsive utility classes and Customization - What is the best way to learn how to use a new framework feature? - Practice - Ask questions - Read books and other helpful resources 9. Think about your experience building a page from scratch last week. - What is your attitude on using, learning new frameworks like this? - It was painful last week when you need include elements (one by one from scratch) - A lot of things need to go through to make sure you have the right format - Positive,curious,and questionable, because I get to discover new things that I have never encounter before. - Keep try and error by testing different elements on my page to see the outcome. - Always be curious to try new things. ## GRID SYSTEM ```htmlmixed= <div class="container"> <div class="row"> <div class="col-__"> <!-- CONTENT --> </div> </div> </div> ``` 10. FIND the above pattern(s) within the HTML. - Move a `.row` to the outside of a container. What happens? **Answer**: When `.row` is removed to the outside of a container, the content will not be aligned with other parts of the page, it will extend to the pages. - Move a column outside a row but within a container. What happens? **Answer**: If move a column outside a row but within a container, this will changed the content position and make the content on the page misaligned. - What is the importance of using these three classes together `container`, `row`, `col-__` and in the correct hierarchical sequence? **Answer**: `col-__` has to be within `row`,`row` has to be within `container`. Otherwise, the improper nesting of these clases will make the content on the page misaligned. 11. 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**: It will mess up the page by fitting too much content in the box. 12. 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-extra small, sm-small, md-medium, lg-large, xl-extra large 13. 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 maximum number for the format is 12 column fluid grid, so if you put 3 at the left column the you remain 9 at the right column. 14. 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: - What are the similarities and what are the differences? - These Grid systems are all layout systems for creating web page layouts through a series of columns and rows. - Bootstrap has more pre-design clases. - In Bootstrap, column elements are placed within row elements. - What is a Grid System convention vs. rule? Can you give an example? - Rows must be placed within a .container or .container-fluid for proper alignment and padding. - Content should be placed within columns. - What would happen to my columns if I remove Bootstrap from my page? **Answer**: The content will not be layout and align. - Is the class, col-xs-6 for example, really that special? - I don't think so, because it can change to the format that I wanted such as "col-md-8". It is not neccessarily to be in that format. Visit the following link: Grid System Explained 16. What is the advantage of using popular tools like Bootstrap? - Help we design websites faster and easier. 17. How does the combination of different ways of observing, manipulating, thinking, and applying code help learners to develop a comprehensive mental model of understanding? - It will give learners to get more ideas about different ways of coding. # COMPONENTS 18. 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**: Try and error, so can compare and see the results immediately. Also write down all the questions that pop out and ask peers to help out. 19. 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**: `!important` will overrides all other styling rule of that element. When I only removed `!important`, the "Extermely Deadly" will still be pink, because `pink` is in the class `bg-danger`. - What affect might this have on other parts of my page? **Answer**: since I add `pink` in the class `.bg-danger`, anything(words) with that class will become a pink color. 20. 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**: when i change the .btn-primary {background-color:} in CSS , then button will change to red to blue because it stated primary rule in it. However, when i add <button type="button" class="btn btn-lg btn-primary" style="background:gold">Submit</button> in HTML, the button will become gold color. We assumed that maybe HTML override Bootstrap rule?