TINKER: Bootstrap 5.x

--- tags: mstu5003, tinker, html, css, bootstrap --- # 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). :::info This Tinker is different with last week's codepen in its... 1. Format: This week's tinker does not have the container format that last weeks' tinker had. 2. Content: This week's tinker has embedded videos, a different set of content within the page than last week's tinker. 3. Form: This week's tinker has a form at the bottom of the page. ::: - 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 The table's format is cleared. The layout, size and color of the images changed. ::: - 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 It is a pre-made design template that provides the format and design elements for coders to build upon their projects. ::: - I have a few CSS rules in the CSS pane. Comment them out. - What happens to the page and why? :::info The page loses its design elements as the code for them is temporarily disabled. ::: - What is the relation between my CSS and the External Resource? :::info The external resource is more like a template that provides a meatier skeleton to build your own detailed css designs on. ::: - How does my CSS "intersect" with the External Resource? :::info The Boostrap and CodePen both sets CSS rules for margin. ::: - What do you think is the sequence of how the External Resource and my CSS are loaded? :::info The External Resource seems to be read first, but the CSS seems to write over the external resource when they clash/overlap. ::: - What kinds of things could happen, if I am careless with my own CSS rules? :::info There may be CSS rules that may clash with the External Resources. Although the ER gets read first, the CSS that I write will overwrite that, so if I have my own CSS rules that I do not want to overwrite the ER I export in, I should clear the rules I don't want to affect the page before I bring in the new code. ::: - 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 As mentioned above, even if a particular Bootstrap rule is there, it can be easily overwritten with my own rules on a forked codepen. ::: - 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's CSS had more rules than this week's code. This week's code was short as the Bootstrap does the work for most of the codepen without the need for writing out everything myself. ::: - What then is the _advantage_ of using a framework like Bootstrap? :::info Bootstrap saves time by constructing the basic framework for you for you to build your creative ideas or content on. While doing so, the bootstrap does not take too much space, allowing the code to be cleaner and more concise. ::: - What are some _disadvantages_ of using a framework like Bootstrap? :::info Perhaps the easiness of bringing in the framework will stunt the growth of creativity and independence in the ability to write your own code. ::: - 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 No. Last week's tinker's .container is code written manually and points to the sections set to contain the content. This week's .container adheres to bootstrap's specific rules, which "sets a max-width at each responsive breakpoint" (wording borrowed from bootstrap.com). ::: - There are many more `classes` used in this week's Tinker. Where do these classes come from? :::info These classes are predefined rules from the Bootstrap. For instance, the < div class="col-12" > works with the grid system that Bootstrap offers that makes creating structures more easily. ::: - 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 The classes here are defined by the bootstrap and decorate targeted elements. The class rules of a framework also call a certain element of the code; when the classes are adhered to other sections of the code, the bootstrap rules will apply to that section of the code. ::: - 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 The bootstrap format itself is not affected by the setting of the non-class attributes. The non-class attributes, however, do decide what the function for the content is, like in regular code. For instance, with the line < input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input" >, the "id" and "placeholder" here decides what the input of the code looks like/acts like. ::: - If you deviate from the specifications, particularly: 1) the classes used, 2) the hierarchy expected, how might that affect your result? :::info Like regular written code, when the classes and hierarchy is changed, the Bootstrap will not be able to select desired targeted elements. ::: - 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 As mentioned before, the exclusion of the classes makes the code fail to select targeted elements. ::: - What are the key aspects you need to be paying attention to when learning and implementing these framework features? :::info It would be seeing which part of the code reacts with your code; if overlapping or clashing code exists and must be cleared to clarify the format and function of the code. ::: - What is the best way to learn how to use a new framework feature? :::info I would copy+paste the code and play around with it by cutting and adding parts I am not familiar with to see which parts of the code is pivotal in keeping. ::: - Think about your experience building a page from scratch last week. - What is your attitude on using, learning new frameworks like this? :::info It definitely saves time while also buying time to add on new design or style preferences. ::: ### 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 The body of the content of the page bleeds outside of the container, as it manipulates with the format hierarchy of the page. ::: - Move a column outside a row but within a container. What happens? :::info Nothing changes visually, but the hierarchy is changed as the column now nests the row, not the row nesting the column. ::: - What is the importance of using these three classes together `container`, `row`, `col-__` and in the correct hierarchical sequence? :::info The hierarchy is important as the three classes nest eachother to function (container > row > column). ::: - 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 The content is no longer within the columns. ::: - 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`, `sm`, `md`, `lg`, `xl`, `xxl` all define the maximum widths of a column. `xs`: x small `sm`: small `md`: medium `lg`: large `xl`: xlarge `xxl`: xxlarge ::: - 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 The `number` in the column represents the number of columns that span within the GRID; 3 instead of the 12 columns per row. ::: - 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 Similarities: all of the GRID SYSTEMS are methods to create a formation of rows and columns. Differences: The code from bootstrap, materializecss.com and getskeleton.com have 12 columns for each row. The code from Semantic-UI.com divides has 16 columns for each row. ::: - What is a Grid System _convention_ vs. _rule_? Can you give an example? :::info A grid is a structure of columns and rows. A _convention_ of a Grid System classifies the rows and columns, while the _rule_ is the naming method of these classes. For instance, Bootstrap: (https://getbootstrap.com/docs/4.0/layout/grid/) ``` <div class="container"> <div class="row"> <div class="col-sm"> One of three columns </div> <div class="col-sm"> One of three columns </div> <div class="col-sm"> One of three columns </div> </div> </div> ``` Semantic UI: (https://semantic-ui.com/collections/grid.html) ``` <div class="three column row"> <div class="col-sm"></div> <div class="col-sm"></div> <div class="col-sm"></div> </div> ``` ::: - What would happen to my columns if I remove Bootstrap from my page? :::info Removing the Bootstrap from the page will break the code and the columns will no longer exist as the code for that will not be in the HTML. ::: - Is the class, `col-xs-6` for example, really that special? :::info Yes, because it changes the visual representation of the column. If not there, the column would no longer be xsmall or 6 grids. ::: - 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 helps simplify code especially when the code is complex or repetitive in itself. It acts like a premade template for a coder to dive into the more "unique" and "important" parts of the code that defines the website and its functions. ::: :::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 It helps promote the understanding of the overarching structure and logic of the code, such as the logic (how it works) and structure (how it is structured) as different types of applications are tinkered with and seen manipulate the code. ::: ## 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 I personally read through the page, then try out the code example in a forked codepen to see how it can apply to (and perhaps modify) my existing code. ::: - 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 When `pink !important` is removed, the pink color is not applied. When `pink !important` is added, on the other hand, bright red is overrid with pink. ::: - What affect might this have on other parts of my page? :::info Because the `.bg-danger` applies to only the one "extremely deadly" class, it does not affect other parts of the page. This is also the case for `pink !important` . ::: - 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. ## 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: