TINKER: Bootstrap

--- tags: mstu5003, tinker, html, css, bootstrap --- # TINKER: Bootstrap Team member: Hanna Vanya, Claire Zheng, Yijia Wu --- **See demonstration: https://codepen.io/jmk2142/pen/yLXdqbd**  [codepen External Bootstrap CSS URL](https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css) ## 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? - You can add the resource back: https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css ``Once we removed the Bootstrap code, the format is basically gone and the texts are placed in HTML default format`` - Enter the above resource directly into your browser URL input to go to the page and scan through the resource. - What is Bootstrap really? ``It's a template or framework pre-formatted style for coders to work with HTML/CSS/JS. `` - I have a few CSS rules in the CSS pane. Comment them out. - What happens to the page and why? ``The margins are missing and the contents moved slightly upward, downward`` - What is the relation between my CSS and the External Resource? ``The relation between those is asynchronous because they both could change the webpage at the same time`` - How does my CSS "intersect" with the External Resource? ``Your CSS and the external resource code are complimenting each other as the external resource could work on its own (such as: giving a format to certain content/value`` - What do you think is the sequence of how the External Resource and my CSS are loaded? ``The external resources load first, and then you can add additional rules to format the style.`` - What kinds of things could happen, if I am careless with my own CSS rules? ``It will only change the style (the content will remain the same), and even if it's changed, it won't be significantly because the external resource has already provided the fundamental style/framework for the sites. The bootstrap has a really significant power against the CSS rules. Some of the pre-existing format couldn't even be changed (i.e.: the color of the Delish button)`` - 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? ``If we don't like the Bootstrap, we can either delete the rules or we can put another rule in our CSS to modify the output. We tried changing the font size and the font color of the Delish button and it worked!`` - 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? ``The CSS rules of last week's Tinker was more complicated as it contained fundamental format on the font type, font size, and everything else. In this week's Tinker, Jin only set up the margin in CSS rules`` - What then is the _advantage_ of using a framework like Bootstrap? ``You don't have to work hard on formatting the CSS! hahaha`` - What are some _disadvantages_ of using a framework like Bootstrap? ``We have to write a lot of class in HTML. We also have to follow the format that Bootstrap provides, like it or not`` - 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? ``In bootstrap, container not only serves as a container, it also has certain rules that need to be followed, it has to contain row and column in the bootstrap container.`` - There are many more `classes` used in this week's Tinker. Where do these classes come from? ``This week's classes are more than last week's as they come from Bootstrap's rules. The Bootstrap rules forces us to use classes in order for it to appear on the output`` - 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 we removed the img-thumbnail, the picture got bigger and suddenly has format. So the classes provide pre-formatted style that we need, like the width, the color of the button, and the color of the table row.`` - 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?) ``No bootstrap uses class to identify element function/apprance. Withour class a single element will stand by it self. id and placeholder are not necessary in bootstrap, but class is a must.`` - If you deviate from the specifications, particularly: 1) the classes used, 2) the hierarchy expected, how might that affect your result? ``I won't get the appearance/function I want to achieve with bootstrap.`` - Manipulate the form to "exclude" certain classes as prescribed by the Bootstrap guide and examples. - How does not following the specifications affect the output? ``When we disable some class. those parts will still show without any pre-designed styles. `` - What are the key aspects you need to be paying attention to when learning and implementing these framework features? ``Identify what is the most important elements in the framwork, for example, learn what class means when using bootstrap.`` - What is the best way to learn how to use a new framework feature? ``practice and ask feedback from instructors and peers.`` - Think about your experience building a page from scratch last week. - What is your attitude on using, learning new frameworks like this? ``Bootstrap is defintely a good way to start learning about website design. I get a better idea on what functions and layouts to apply on web design when I am exploring bootstrap. I think bootstrap is super beginner friendly. `` ### 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? ``The content under the row value will be moved outside the provided margin within the Bootstrap rules`` - Move a column outside a row but within a container. What happens? ``The content moved slightly above, very close to the previous content and found itself having no top margin`` - What is the importance of using these three classes together `container`, `row`, `col-__` and in the correct hierarchical sequence? ``Correct hierarchial sequence helps the computer to understand our order. It also helps the reader (website user) to understand parts of our website better.`` - 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? ``When we put the content outside the column, they will follow the rule of the class we put them under. For example, we tried to put the <h2> outside the column but still inside the row, nothing really changes much except the top margin. However, when we put it outside the container class, the header will have the agency at its own and move far to the left as we don't set up CSS rules for <h2>.`` - 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? ``I realize when we changed the card's class into col-xl-4, it will change its shape (as in smaller) when I zoom out the screen. After we played around with the size, we noticed that the notation represent something. xs, sm, md, lg, xl, and xxl represent the size of the screen that the user is gonna see our content from. XS stands for extra small, usually the size of a mobile screen. SM stands for small, MD for medium, LG for large, and XXL for double extra large.`` - 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 grid system divides web vertical space into 12 column. The number represents how many column the content will take space for. For example, Col-12 means the whole web page while Col-3 represent taking 3/12, which is a quarter of the whole vertical space.`` - 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? ``UI docs defult theme uses 16 columns while Skeleton and Materializes's default is 12 columns. They all use column system to divide a web page.`` - What is a Grid System _convention_ vs. _rule_? Can you give an example? - What would happen to my columns if I remove Bootstrap from my page? ``We tried adding a form first and then removed Bootstrap from CSS. We observed that all columns disappered and everything aligned on the right of the web page. `` - Is the class, `col-xs-6` for example, really that special? ``The Bootstrap grid system has four classes: xs (phones), sm (tablets), md (desktops), and lg (larger desktops). The classes can be combined to create more dynamic and flexible layouts.col-xs-6 specifies for the mobile version, column is 6.`` - 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? ``easier to collobrate becuase everyone follows the same guideance and rules, easier to debug, shorten the front end building process`` :::success **Did you know?** As a student, you have access to the full Lynda.com / LinkedInLearning library. These are fantastic resources if you want to actually see the details of specific feature implementation. Thing with these tutorials is that they tend to explain _how to do_ specific things, but don't quite address the issue of deeper understanding to explicitly address how concepts relate and tie together. That said, used in _conjunction_ with activities like the Tinkers, can be a very powerful combo. To access Lynda.com: - Log IN with your student account - https://www.linkedin.com/learning - See the Bootstrap Essentials VIDEO Tutorial - https://www.linkedin.com/learning/bootstrap-5-essential-training ::: - How does the combination of different ways of observing, manipulating, thinking, and applying code help learners to develop a comprehensive mental model of understanding? ``These ways of learning echos Bloom’s Taxonomy. The first step, observing, allows students to recognize how things works and what could be a potential problem. The next step, which is applying and further manipulating, will help students to gain a comprehensive understanding of bootstrap after carefully following the process. Coding is not something that students can ONLY learn by watching tutorial videos without actually practice it. So learning by doing (in this case, applying and manipulating) is considered the best way for students to learn. `` ## 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? ``Tinker with it! Try more kinds of components to see the variation of feature, and try to figure out the principles behind different components. Plus, we can also code according to components presented on Bootstrap to facilitate our work, and modify the features based on the current components.`` - 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? ``It shows its' bright red color again. Because '! important' has the top priority. When removing it, the color get back to the 'bg-danger'.`` - What affect might this have on other parts of my page? ``'!important' defines the top priority feature, thus, it would definitely change the specific component. However, it would not affect other parts of the page. `` - 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. ``Initially, we tried to implement the Accordion component. I copied the code from Bootstrap. However, we find the arrow cannot fold when we click it; because the css we copied only controls features, and if we want to convert it into button, we need to add Javascript. we also tried implement card. Using the sizing options can customize the card accoding to our page design.`` ``We think the important point when we learn component is that We need to use carefully the different principles of different components and practice more. Do not be afraid of making mistakes.`` ## JAVASCRIPT :::info Some components, mostly those that will react to user interaction are driven by Javascript. We aren't quite there yet. You are free to play with these features, but for the group conversation try to focus on the non-programmatic features. ::: ## NOTES I'm hoping that this week's tinker will help you implement your design ideas for the project due at the end of the week. The purpose is to 1) provide you with a set of concepts that build on your prior experiences to deepen your understanding and 2) provide you with a practical set of tools that will reduce the development time of your project dramatically. I recommend that during your discussion, you also address your design ideas for this week's project which I have outlined in the Project Specifications. You can use that as a guide to talk about the important learning design concepts you are considering. Looking forward to seeing what you come up with. :smile_cat: