TINKER: Bootstrap 5.x

--- tags: mstu5003, tinker, html, css, bootstrap --- --- Group Members: Niv Iyer, Kate Orgera, Qianwenyi Xing, Xinyue Zhou --- # TINKER: Bootstrap 5.x --- **See demonstration: https://codepen.io/jmk2142/pen/yLXdqbd**  [codepen External Bootstrap CSS URL](https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css) After our run with basic HTML/CSS and trying to produce our websites, many of you have probably noticed that it's actually quite a chore to get your pages and parts of to align correctly using `margins` and `padding`, different `width and height units` like `px` and `%`. Actually, there are even more: `em rem vh vw` etc. To make matters even more difficult, I think you all have probably experienced how the representations of your visual layouts and definitions of dimensions is highly impacted by the hierarchy of your elements and what rules are set on the parents and grandparents of a particular thing. The nice thing is: **there are solutions to this.** ## Responsive Design and Bootstrap This week is mostly about continuing to practice the basic `html/css` we've learned last week in preparation for having some content and interactive user interfaces that we can use to make Javascript more interesting. Thus, I wanted this week's tinker problem to be around something called Bootstrap - which is simply a `CSS` file that two people at Twitter created so that you don't have create all those intricate rules yourself. Bootstrap provides a bunch of pre-defined helper classes that do things for the [LAYOUT](https://getbootstrap.com/docs/5.2/layout) Things like: - Set margins and paddings for you and provide a simple, predictable, yet flexible way to layout content at the page level, (see [Grid System](https://getbootstrap.com/docs/5.2/layout/grid/).) - Set rules that will automatically make your page change it's layout depending on what kind of screen is being used to view it. (e.g. 3 columns on a big screen but only 1 and content stacked in order if on mobile.) - Provide basic pretty styles to your typography and interfaces. - Provide ways to create components, which are groups of different elements to make a more sophisticated larger thing. - Provide more advanced javascript driven interactive interfaces and features. Bootstrap isn't the only option here. There are many different kinds of 3rd party libraries which we call HTML/CSS Frameworks. Examples: - https://getbootstrap.com/ - http://materializecss.com/ - https://getmdl.io/components/index.html - https://semantic-ui.com/usage/layout.html Bootstrap traditionally was one of the more popular ones as it's pretty easy to pick up and made significant contributions to this space. I will support Bootstrap in this class but if you learn to use Bootstrap, the basics concepts apply to other frameworks. You just need to learn the framework specific `classes`. Like mentioned, they generally share common features. The basic thing to keep in mind with these frameworks is: - Use the provided **GRID SYSTEM**. - The results are driven by the correct use of the framework provided `classes`. - In using their `classes`, you are agreeing to their _opinions_ about how to use the classes. - This means, `classes` tend to have distinct effects based on how they are used *together* and the *hierarchy* in which they are used. - Thus, you MUST follow their specifications exactly. :::success **RECOMMENDED STUDY** To get the most of Bootstrap: - Align your studies with FCC: Front End Libraries > Bootstrap unit - Read the Bootstrap documentation on Grids carefully: https://getbootstrap.com/docs/5.2/layout/grid/ --- They work in conjunction with `containers > rows > columns` - [Containers](https://getbootstrap.com/docs/5.2/layout/containers/) - [Grid](https://getbootstrap.com/docs/5.2/layout/grid/) - [Columns](https://getbootstrap.com/docs/5.2/layout/columns/) - Browse through the https://getbootstrap.com/docs/5.2/content page (i.e. typography, code, images, tables, figures) to be aware of the `classes` available to you to do certain stylistic things. - Browse through the https://getbootstrap.com/docs/5.2/components page to be aware of the _components_ available to you through Bootstrap and a gist of how `classes` are used to create these components. ::: ## 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 All the styling components and classes that come with bootstrap are removed. The webpage now goes back to default styling. ::: - 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? :::info Bootstrap is simply a CSS Framework for developing responsive and mobile-first websites. Bootstrap provides a collection of syntax for template designs and comprises of pre-defined components and classes that we can apply to the styling of our webpage output. ::: - I have a few CSS rules in the CSS pane. Comment them out. - What happens to the page and why? :::info Commenting out the rules for h1, h2, and h3 results in the margins returning back to the default (0px). Commenting out the rule for div.nyan-row:not(:last-child) creates 15px margin at the bottom of the row "old time-y nyan cat" but **not** at the bottom of the row "original nyan cat" ::: - What is the relation between my CSS and the External Resource? :::info The <link> HTML element specifies relationships between the current document and an external resource, such as the Bootstrap framework. Our CSS is complementary to the external resource, it adds further styling (individualized adjustments to our webpage) that may not be predefined in Bootstrap. ::: - How does my CSS "intersect" with the External Resource? :::info External CSS resources have some preset styles, but our CSS adds further styling to the layout of the webpage by overwriting specific properties like margins/paddings. ::: - What do you think is the sequence of how the External Resource and my CSS are loaded? :::info We think that the external resources is loaded in first and then our own CSS, because our CSS rules have the ability to overwrite Bootstrap's properties. ::: - What kinds of things could happen, if I am careless with my own CSS rules? :::info You could end up overwriting some aspects of the Bootstrap framework that may not be conducive to the final outlook of our webpage. For example, creating your own CSS rules for a class called "container" could be messy because Bootstrap already has a container class. ::: - 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 We can define a class/set of classes with our own CSS to overwrite a preset Bootstrap rule that we don’t like. ::: - 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 Last week, you had to specify a lot of different styles like font family, font sizes, margins, font and background colors, and so on. You didn't have to specify these rules this week because Bootstrap already predefines them. ::: - What then is the _advantage_ of using a framework like Bootstrap? :::info Frameworks like Bootstrap save us the time and effort when defining classes like “container” and rows and columns as these components already come predefined in Bootstrap. Bootstrap also adds some details and styling that may be difficult/time-consuming to code. This makes the process of designing our webpage a lot faster and smoother. Also, because Bootstrap is created by porfessional web designers and experts, it gives us a peek into what effective web design looks like, which is something we can carry forward in our future designing. ::: - What are some _disadvantages_ of using a framework like Bootstrap? :::info Ironically, using bootstrap may also be time-consuming because there are so many different preset components and classes that we have to be familiar with, and looking through the documentaiton itself is a task. Using frameworks like Bootstrap might also be contraining for a webpage designer and we are forced to use a specific set of predefined styles, when in reality we might want to be more flexible and apply a wide variety of stylistic features. ::: - 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 These are different. This week’s container class is a predfined component from Bootstrap that is “a responsive, fixed-width container” whereby “its max-width changes at each breakpoint". For instance, it contains rows and columns. In last week’s tinker however, the container class was defined by our own CSS rules such that we can customize how the page looks to our own taste. Both container classes function the same though, but because of the Bootstrap, there is already a lot more already encoded into the container class for this week than last week. ::: - There are many more `classes` used in this week's Tinker. Where do these classes come from? :::info These classes are imported from Bootstrap’s framework, such as “card” , “row” , “badge” , etc， and these barely are defined by Boostrap. ::: - 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 Removing “img-thumbnail” from any of the image elements that have said class results in the image becoming bigger (most probably its original size) and this large image takes up 100% of the width of the webpage. Removing “bg-warning” from one of the table badges results in the yellow background of that badge turning back to default white, and we can no longer see the white text “SOMEWHAT Deadly” Adding the class “bg-warning” to the div with class “card” on line 6 results in a yellow border forming around that div element, while the background color of that div element remains grey. This suggests that the class “bg-warning” wasn’t able to completely overwrite the properties of the class “card”. Therefore, the classes defined within the Bootstrap framework need to be used according to Bootstrap’s hierachy and rules in order to achieve the expected outcome. ::: - 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 Changing the form to a horizontal form by adding the class “row” to each div doesn’t really change the final look of the webpage form, except for the left-margin (returns to default 0px). But adding the class "col-form-label' to the email address element significantly changes how that input looks. The email entry bar wraps onto the first line, making it an inline block. Removing non-class attributes like #id also did not change any of Bootstrap’s conventions. This suggests that non-class attributes may not be super important in getting Bootstrap to work because Bootstrap is a class-driven framework. Non-class attributes are more for accessbility purposes. ::: - If you deviate from the specifications, particularly: 1) the classes used, 2) the hierarchy expected, how might that affect your result? :::info It would fail to link to the Bootstrap framework and we would end up having to write our own CSS rules. ::: - 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 Removing the class “form-check-input” from the checkboxes in the form messes up with the padding of each checkbox item. For example, removing it from the “Sushi Ootoro” checkbox item gives the text an indent. Also, removing the class “col-4” from each div within the form element results in all the content wrapping down to the next line, which makes it look like one long column. Removing the “row mb-3” class from the checkboxes changes how they are organized completely. It makes all the checkbox items fall into “one row”, which forces all the items to wrap and “stack up” on top of each other. So if we don’t follow the specifications, our output will return to HTML’s default styling. Removing the "card" class also removes the entire bordered styling of the form element. Basically, removing the classes removes Bootstrap's specifications and styling. ::: - What are the key aspects you need to be paying attention to when learning and implementing these framework features? :::info We need to pay attention to the sequence and hierarchy of these new features because messing up the sequence/hierarchy will result in our code not working. We also need to pay attention to the class labels and what attributes each class has, because Bootstrap is so class-driven and we need to keep track of what Bootstrap has, what it doesn't, and what we need to code for ourselves. ::: - What is the best way to learn how to use a new framework feature? :::info The best way is to read up on the documentation for a new framework feature, and use a trial-and-error approach in testing out this new feature. Moreover, we also need to use "search" function to search through the documentation during coding to save some time. ::: - Think about your experience building a page from scratch last week. - What is your attitude on using, learning new frameworks like this? :::info Using frameworks like Bootstrap is honestly a godsend because it makes our lives so much easier by saving time and energy in designing webpages. Defining a bunch of CSS classes from scratch is very time-consuming, so importing presets, like the grid system, from a framework makes organizing our webpage content 100x easier. Besides, the naming of the class from Bootstrap makes the general CSS code more organized. ::: ### 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 It made the horizontally aligned content vertically arranged instead. The column function disappeared. ::: - Move a column outside a row but within a container. What happens? :::info It divided the content into to rows. Only the column nested inside the row is formated. ::: - What is the importance of using these three classes together `container`, `row`, `col-__` and in the correct hierarchical sequence? :::info It is very important to make the container the parent, which nest the row as child, and then the column (more than one columns should be arranged as siblings). If not, the expected format and stlye might lose effectiveness. ::: - 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 I moved the h3 title "Grumpy Cat" outside above the column, then the text and image are not in a row anymore. Together with h3 title, its children paragraph are placed under the image. Therefore, if the content falls outside the columns, the in-line function may lose its effectiveness. ::: - 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 xs: extra small sm: small md: medium lg: large xl: 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? :::info It specifies the proportion of the width of a column element. Col-12 has a width of 12 out of 12 columns and col-3 has a width of 3 out of 12 columns, considering 12 is always the default number of the column in a row in Bootstrap. ::: - 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 Semantic-UI: 16 columns.four wide column. Materialize: 12 columns.col-s3. Skeleton: 12 columns.three column. The three grid systems have different dividing and naming system. Similar to Bootstrap, Materialize and Skeleton seperate interface into 12 columns as well, while Semantic-UI divide it into 16. They also use different class names to represent the same meaning. If I want to create a column that takes up the one fourth of the interface, I should use "four wide column" in Semantic-UI, "col-s3" in Materialize and "three column" in Skeleton. ::: - What is a Grid System _convention_ vs. _rule_? Can you give an example? :::info Conventions are best practices when it comes to writing code. An example with the grid system would be: organizing your webpage into rows and then dividing each row into a number of columns where content will go in. Rules specify the **right** way of doing things, like coding. A grid system rule for example, would involve the right syntax, sequence, and hireachy. For instance, the class "container" always comes before "row" and "col" when using Bootstrap. ::: - What would happen to my columns if I remove Bootstrap from my page? :::info All the content would wrap into the next line and follow default HTML styling (i.e. blocks) ::: - Is the class, `col-xs-6` for example, really that special? :::info In Bootstrap, as well as Materialize and Skeleton, 6 columns is equal to one-half of the page. Therefore, it is not as special as, for example, col-xs-5 or col-xs-3, which take up 5/12 and 1/4 of the interface. ::: - 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 It is fast and easy to use. Bootstrap grids allow you to use containers, rows and columns in many different permutations and combinations, which allow us to create layouts however we need. ::: :::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? :::info Understanding is developed when thinking and practicing are joint together. The process of tinkering provide students with trigger questions, so that once student see the questions, they start to think. Then student try to write, replace and move line of code themselves, so that they can test whether their preassumption is right or wrong. Through this process, learners can develop more well-rounded understanding of 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.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? :::info The BUTTON group starts from basic example and ends with vertical variations. The concepts and codes it introduces become more and more complicated. It follows the sequence like this: basci concept, adding colors, adding borders, making it more interactive by adding checkbox, buttons and dropdowns. For me, the best way to learn the feature is question-based learning. Bearing in mind what kind of visual I want to achieve, and search for it. If the visual representation is rather complex, which requires prio-knowledge, then I would go back and learn the basic concept. ::: - 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? :::info After removing it, the background color returned to being red. This is because !important seems to override all previous CSS rules for a specific element. ::: - What affect might this have on other parts of my page? :::info Changing the background color of bg-danger to pink using !important will result in all elements with class "bg-danger" to have a pink background color. ::: - 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. :::info I picked "Progress" components for a try. The animated stripes makes my page more vivid. To make an animated stripes, one should use 6 elements with attributes. Inside "class", input three attributes to define its overall pattern and animation. Use aria-valuenow to define how long the progress bar I want. Moreover, set minimum amd maximum to 0 and 100 to help computers understand its range. ``` <div class="progress"> <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%"></div> </div> ``` ::: ## 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: