Tinker: Bootstrap TEAM

# Tinker: Bootstrap TEAM **Team**: _Jing Yi (Yvonne) Wang, Yucheng (Richard) Pan, and Alex Jagiello_ ## FRAMEWORK: OVERARCHING **Q1: 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?** Once removed the CSS resource link, the webpage lost its Bootstrap styles. The HTML file is only affected by the styles written in our own CSS file. **You can add the resource back: https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.css** Adding the resource again, we see that the Bootstrap styles are back. **Q2: Enter the above resource directly into your browser URL input to go to the page and scan through the resource.** **What is Bootstrap really?** Bootstrap is a helpful framework that allow us to easily style our page. It contains a variety of prebuilt templates （HTML, CSS and some JavaScript) for front-end development. Bootstrap is commonly used in web development. Using these pre-designed templates, we can quickly structure our website with the CSS and JavaScript Bootstrap provided. One thing to be cautious of is that we have to follow the Bootstrap rules and naming system. For instance, using specific class name in a tag to create our desired Bootstrap effects and structure our HTML in their designed way. Here is an example: ```html= <div class="container"> <div class="row"> <div class="col"> content... </div> </div> </div. ``` As the example shows, we have to make sure to writethe content inside this tag named "col", and have this tag nested within another tag named "row". Furthermore, this class="row" tag should be nested within another tag with a class called "container". These are the specific structure and rules we had to follow in order to properly use Bootstrap. We consulted Bootstrap's official website for this question: https://getbootstrap.com/. **Q3: I have a few CSS rules in the CSS pane. Comment them out.** - **3a: What happens to the page and why?** By commenting out the CSS rules written in the pane, the page only has the Bootstrap CSS styles left. Some of self-written CSS rules (e.g. those that target the Bootstrap CSS classes) are used to overwrite the corresponding Bootstrap CSS styles. Some other CSS rules, such as ```css= footer { margin: 30px 0; } ``` are used to add on CSS styles, in addition to the Bootstrap styles. It might not be necessarily overwritting Bootstrap styles. - **3b: What is the relation between my CSS and the External Resource?** As mentioned, the relation between my CSS and the external resource is that my CSS codes either overwrites specific Bootstrap CSS styles or adds more CSS styles on the page based on the effect of the Bootstrap css styles. The webpage overall look is based on the effect of the Bootstrap and then the effect of our own CSS rules. Often times, our own CSS rules have more priority over the Bootstrap styles since our CSS file is added later than the Bootstrap css link. If we work using the codepen project mode, you will inlude both css links in the head of HTML. However, the Bootstrap link will be placed on top of our own CSS file link. This is related to CSS specificity. If two CSS styles have the same weight/importance, the latter style is used. - **3c: How does my CSS “intersect” with the External Resource?** Our own CSS intersects with the external resource when each of their styles affect some properties of the same tag and the end result is a combined effect of our own CSS and the external codes on the same tag. For example, ```css= .jumbotron { background-color: #666; color: #FFF; } ``` This is our CSS code, this changed the color and background-color of a tag (in case it is a div tag) with a class name of "jumbotron." The tag helps marketing messages on the page by making the tag content visually apparent. Our code changes the color and background color of the marketed messages from "#e9ecef" background-color and black text color to "#666" background-color and "#FFF" text color. In this example, our CSS code "intersect"/crosses path with the external codes and overwrites the color and backgroun-color property. Notably, the page continuously apply the external code regarding the tag's other properties, such as its padding. - **3d: What do you think is the sequence of how the External Resource and my CSS are loaded?** As mentioned above, our CSS should load after the external resource, so that we can overwrite or expand on the CSS rules that we implemented from other resoruces - **3e: What kinds of things could happen, if I am careless with my own CSS rules?** If you delete your CSS rules, the Bootstrap rules will appear on the page. If there is not Bootstrap rules for the tag you address, then the default rules will apply. If you randomly design your own CSS rules, you might loose the benefit of including this easily used and nicely designed external framework (e.g. Bootstrap). - **3f: 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?** Nope, we are definitely not stuck with all the Bootstrap rules. Our CSS can overwrite the Bootstrap rules that we dislike. We can address the tags with the Bootstrap classes and write in our own codes, targeting the properties of the tag that we want to change. **Q4: Compare this Tinker’s custom CSS vs. last week’s CSS.** - **4a: 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?** Last week, the codepen demo did not use any external resource (e.g. Bootstrap) to help with CSS styles. Some custom CSS styles could have be done by using Bootstrap. For instance, in the last week's demo, the div tag with a class name of "thumbnail-pane" could be replaced by Bootstrap's "row" class and the img tag could give a claass name "img-thumbnail" and be nested within another div with a "col-3" class, and the inner div could give a class name "col-9". Thus, this section could have the img and inner div stay on the same line/row and the img has a width of 25% and the inner has a width of 75%. Specifically, the HTML code in the last week codepen demo is: ```html= <div class="thumbnail-pane"> <img src="https://jmk2142.github.io/mstu5003/week01/visualize/images/catZero.jpg" alt="grumpycat"> <div> <h5>Grumpy Cat</h5> <p>I'm unimpressed. Shut up and code.</p> </div> </div> ``` Some of the CSS codes are ```css= .thumbnail-pane { font-size: 0; margin-bottom: 20px; } .thumbnail-pane img { border: 1px solid #DDD; border-radius: 4px; width: 25%; padding: 4px; } .thumbnail-pane > div { display: inline-block; padding: 0 30px; vertical-align: top; width: 75%; } ``` If we used Bootstrap, then our HTMl could be written as: ```html= <div class="row"> <div class="col-3"> <img class="img-thumbnail" src="https://jmk2142.github.io/mstu5003/week01/visualize/images/catZero.jpg" alt="grumpycat"> </div> <div class="col-9"> <h5>Grumpy Cat</h5> <p>I'm unimpressed. Shut up and code.</p> </div> </div> ``` Another example is that the table in last week's codepen demo, the span tag with a class name "danger" could be achieved by replacing the class to "badge badge-danger." Last week's Codepen Demo: ```html= <table id="catDanger"> <tbody> ... <tr> <th>Large</th> <td><span class="danger">EXTREMELY Deadly</span></td> ... </tr> </tbody> </table> ``` Same effect created by using the following codes and applying Bootstrap CSS: ```html= <table id="catDanger"> <tbody> ... <tr> <th>Large</th>  <td><span class="badge badge-danger">EXTREMELY Deadly</span></td> ... </tr> </tbody> </table> ``` - **4b: What then is the advantage of using a framework like Bootstrap?** The advantage of using a framework like Bootstrap is that you can "window shop" what design you like to have on your page on the Boostrap website. Once you found the one you like, you can follow the Bootstrap template, e.g. writing the proper HTML code and paying close attention to the tags' class names, you can get a similar effect on your website quickly. - **4c: What are some disadvantages of using a framework like Bootstrap?** However, sometimes these Bootstrap styles might have some hidden effects that you might not be aware of. These could offset your website/design. Also, sometimes it might be counter-productive to use Bootstrap. For example, if you want to create your own design that is somewhat similar to the Bootstrap template design, then you need to change and overwrite a lot of Bootstrap implemented codes, and maybe at some points, you realize that you would be better off if you just design your own CSS codes. It is especially challenging if you do not fully understand the Bootstrap codes. Overwritting the Bootstrap codes requires you to understand what properties you need to overwrite. **Q5: Compare the HTML from this week’s Tinker vs. last week’s Tinker HTML.** - **5a: I use a class called `.container` in both. Is this a special `class`? Are they the same thing?** Last week's class ".container" is different from this week's. It is a normal class name if you do not implement external resoures, such as Bootstrap, that has various in-built templates using different class names, including ".container" class. In this week's codepen, the div tag with a class named ".container" has Bootstrap styles applied on it, becuase ".container" is a unique Bootstrap class. Basically, the coding design of the Bootstrap framework made the ".container" class special. - **5b: There are many more `classes` used in this week’s Tinker. Where do these classes come from?** These classes are all Bootstrap classes. We can find these classes from Bootstrap website's docs page. For instance, classes ".row" and ".col-(number)" can be found under grid system section in the Bootstrap website. **Q6: 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 removing the classes like 'img-thumbnail', 'danger', and 'info' from the HTML it becomes apparent that the bigger framework is designed like a grid system. One analogy that we thought of is comparing the commenting out of the classes is like taking a pair of scissors to a piece of paper. You basically just cut out the piece you want, and everything else stays the same. **Q7: Analyze the form and refer to https://getbootstrap.com/docs/4.5/components/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`.** - **7A: Are the non-class attributes important in terms of getting Bootstrap to work? (How do you know?)** To convert a basic form to a horizontal form involves adding .row to the class. By incorporating .row, it adds another element to the grid. By converting from a basic form to a horizontal or inline form, we are able to manipulate the grid to create forms of various shapes and sizes. - **7B: If you deviate from the specifications, particularly: 1) the `classes` used, 2) the hierarchy expected, how might that affect your result?** When manipulating the classes and deviating from the specifications, we expected the computer to not understand the code. However, by changing the order of the specifications from `<div class= "form-group row"> `to `<div class="row form-group">`, the computer output was the same. **Q8: Manipulate the form to “exclude” certain `classes` as prescribed by the Bootstrap guide and examples.** - **8a: How does not following the specifications affect the output?** - **8b: What are the key aspects you need to be paying attention to when learning and implementing these framework features?** - **8c: What is the best way to learn how to use a new framework feature?** The formatting of the prescribed code is structured in a way that requires all class code to be presented in order to achieve the proper formatting. Issues with formatting are prompted when excluding certain classes as prescribed by the Bootstrap guide. It is like doing a jigsaw puzzle, all pieces must come together in order to create the larger picture. When learning a new framework feature, we can compare the web appearance of adding and that of removing the specific framework code. We should also closely follow the framework instruction and pay specific details to the HTML hierarchical structure and the names of the framework classes. **Q9: Think about your experience building a page from scratch last week. What is your attitude on using, learning new frameworks like this?** Compared to the previous week, it appears that using Bootstrap to create web pages can be quicker to build and refine. Bootstrap is a useful add-on to simplify the styling and layout of the page through the use of predesigned templates and the advanced grid system. ## GRID SYSTEM ```html= <div class="container"> <div class="row"> <div class="col-__">  (Note: I will be trying out using a text and an img) </div> </div> </div> ``` I will be using ".col-4" for the ".col-_" tag above in the following questions. **Q1: FIND the above pattern(s) within the HTML.** - **1a: Move a `.row` to the outside of a container. What happens?** After moving the ".row" outside of the container, the ".row" tag would be the parent tag of the the container and the container will be the parent of ".col-4" tag. Detecting using the inspect function in the Google Chrome browser, I see that initially the ".row" tag covers the content portion of the container tag, but after the position switch, the ".row" tag covers the entire row and its content portion filled by the container tag. Also, before the tag position change, the ".col-4" tag takes the width of 33.333333% with no margin. After the change, the ".col-4" tag content seems to stay at a relatively the similar position yet its margin fills the rest of the container's content space. Specifically, before the change, the ".col-4"'s content (width x height) is 289x231. After the change, its content is 279x224. To figure out this small size difference, I took another closer look. I found a suprising result: the the padding of the container is actually overlaps of the ".row" tag. When following the Bootstrap format, the ".row" tag is not within the content of the container tag; it actually within the margin of the container. However, when having our tag position change, this overlap of container and ".row" tag does not exist. The row covers the entire row, the container is within it, the col-4 is within the content (not the margin) of the container. Also, the visual difference was not very appearent, thus I decided to change the given HTML by adding another ".col-4" tag as a sibling tag of the original ".col-4" tag. In this case, the sibling ".col-4" tag does not stay in the same line as the original ".col-4". If we utilized the above proper HTML pattern by nested ".row" within the container, we should have see the two ".col-4" tags equally take up the row. Thus, the ".row" tag when placed outside of the container, it does not work as intended by the Bootstrap. - **1b: Move a column outside a row but within a container. What happens?** I found out that with this tag position change, the ".row" tag covers the inner content (The content I used to try out was a text and an img), yet it covers both the padding and content of the ".col-4" tag. Since ".row" tag does not have padding or margin, the content (text and img) actually goes beyond the content space of the ".col-4" tag. Also, as you can see in below image, the margin of the ".col-4" tag is huge, but this does not show up if we use the Bootstrap HTML format. Using the Bootstrap format, the ".col-4" tag only takes the 33.33333% of the row. Thus, if we were to add more ".col-(number <= 8)" tag, such as ".col-6" tag, it will be in the same line as this original ".col-4" tag. <img src="https://i.imgur.com/WKsuVuR.png" alt="example of '.col-4' tag"> - **1c: What is the importance of using these three `classes` together `container`, `row`, `col-__` and in the correct hierarchical sequence?** Without using these classes in the correct hierarchical sequence, you would not be able to have the designed layout that you want, especially with the class ".row" and ".col-_". When using the ".row" class you want to have the inner ".col-(number)" tags to be in the same line if the col numbers added up to be equal or less than 12. This shows the importance of following the hierarchical sequence **Q2: 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 taking the content outside of the ".col-_" tag, the content is influenced by its new parent tag. For instance, if I moved it into the ".row" tag but outside of the ".col" tag, the content does not affect by the ".col" style, which supposes to limit the width of the content. **Q3: 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` represent in the column class notation?** When change the column from `col-12` to `col-xl-4`, the column size changed with the browser screen size (as we dragging the browser). The `col-xl-4` tag will apply the following CSS styles when the screen width is at a minimum of 1200px. ```css= @media (min-width: 1200px) .col-xl-4 { -ms-flex: 0 0 33.333333%; flex: 0 0 33.333333%; max-width: 33.333333%; ``` When the screen is less than 1200px, the tag goes by this code (a default code when @media does not apply): ```css= .col, .col-1, ..., .col-9, .col-auto, ...,.col-lg-auto, .col-md, .col-md-1, ..., .col-sm-9, .col-sm-auto, .col-xl, .col-xl-1, ..., .col-xl-auto{ position: relative; width: 100%; padding-right: 15px; padding-left: 15px; } ``` We learned that to use `xs`, `sm`, `md`, `lg`, `xl`, we follow a format of ".col-{breakpoint}-(number/auto)". These terms help us to design responsive columns. Responsive design means being able to dynamically change the appearance of the webpage based on the screen size. Thus, these features made our lives easier when designing responsive websites. We made this table to help us understand the concept (we also added "xxl"): <table class="table"> <thead> <tr> <th></th> <th class="text-left">Full Name</th> <th class="text-left">Device</th> <th class="text-left">Grid Breakpoints</th> <th class="text-left">Container Max-width</th> </tr> </thead> <tbody class="text-left"> <tr> <td>xs</td> <td>Extra small</td> <td>Phone (Portrait)</td> <td><576px</td> <td>None (auto)</td> </tr> <tr> <td>sm</td> <td>Small</td> <td>Phone (Landscape)</td> <td>≥576px</td> <td>540px</td> </tr> <tr> <td>md</td> <td>Medium</td> <td>Tablet</td> <td>≥768px</td> <td>720px</td> </tr> <tr> <td>lg</td> <td>Large</td> <td>Desktop</td> <td>≥992px</td> <td>960px</td> </tr> <tr> <td>xl</td> <td>Extra Large</td> <td>Large Desktop</td> <td>≥1200px</td> <td>1140px</td> </tr> <tr> <td>xxl</td> <td>Extra Extra Large</td> <td>Extremely Large Desktop</td> <td>≥1400px</td> <td>1320px</td> </tr> </tbody> </table> Grid breakpoints are related to the screen size of the devices (e.g. phone, tablet, and desktop). **Q4: 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 number represent the precent in the whole 12 box. For example "3" means 1/4 of the row width. **Q5: 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 - 5a: What are the similarities and what are the differences? Differences: some of them use 12 columns, and some use 16 columns. The name of the class are not the same. Similarity: the grid system all seem to divide the row to a certain part. And the class is needed to define the width of the component. - 5b: What is a Grid System convention vs. rule? Can you give an example? Conventions: the system should be put in a container and that is the father container which grid system do the cut. For example, the one in the Semantic UI: ```html= <div class="ui grid"> </div> ``` Rules: we can use the number of the colomn to represent the width. For example, the one in the Materialize: ```html= <div class="container">  <div class="row"> <div class="one column">One</div> <div class="eleven columns">Eleven</div> </div>  <div class="row"> <div class="two columns">Two</div> <div class="ten columns">Ten</div> </div> </div> ``` - 5c: What would happen to my columns if I remove Bootstrap from my page? It will fall to the ones with only the default style. The colums will arrange in the order of the order flow. - 5d: Is the class, `col-xs-6` for example, really that special? I think it is not that special. In fact, part of the function can be overwritten like this ```css= .col-xs-6 { width: 50%; } ``` The other part can be redefined, too. **Q6: Visit the following link: Grid System Explained** **What is the advantage of using popular tools like Bootstrap?** :::info Did you know? As a student, you have access to the full Lynda.com 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.tc.columbia.edu/idesign/external-resources/ - See the Bootstrap Essentials VIDEO Tutorial - https://www.linkedin.com/learning/bootstrap-4-essential-training ::: One advantages of using this popular tool, Bootstrap, is that you have many other users, who have been implementing this framework on their websites and thus you can learn from inspecting their websites. More importantly, you could see the questions they ask (likely you would be asking similar question) and debug your code accordingly. Also, popular frameworks usually are frequently maintained and thus they might be more trustworth and reliable than other small/just designed frameworks. Bootstrap has many versions (5.0.1 seems to be the newest), thus you know that its has been continuously developed and there is likely a team working for this framework. Finally, as you can see, there are a lot of training videos about Bootstrap online. You could easily learn about this framework online. **Q7: How does the combination of different ways of observing, manipulating, thinking, and applying code help learners to develop a comprehensive mental model of understanding?** By observing, the learner can see the effect of the model and have a very first image of the model. By manipulating, in fact, with more imagination and thinking, one will understand the rules and what he need to obey and what can be break to creat new things. Finally, with first applying to one's own website, one need to change the smallest thing step by step to achieve the final goal of the website. ## COMPONENTS **Q1: Browse through the different 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/4.5/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?** First, we need to look at the source code and try to understand the structure of the code and if possible we need to understand the meaning of each tag. Then, we need to focus on the pattern of the components and how to use it in the page. In this period, we need to think about the position of the components and the relationships to other componets. Finally, we can use the component for ourselves. **Q2: In my table, I have “Extremely Deadly” as a label of sorts, that is bright red which is defined by the `.danger` class. OVERRIDE this rule in your custom CSS pane to make `danger` a `pink` color.** **What affect might this have on other parts of my page?** I use the code following to change the background color of the botton. If others use the badge-danger class, it will also be pink. ```css= .badge-danger { background: pink; } ``` **Q3: 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.** We use a “Carousel” to show the images of different cat. And we add/use the "With captions" ones to illustrate the cat. We change the text and the image. And, we find the image is not at the same size, and the carousel seems cannot cut the images. The example is great, but if we want a good effect, we need to do a lot of customization.