Skip to content

Instantly share code, notes, and snippets.

@jmk2142

jmk2142/TINKER: Simple Lesson.md

Created May 28, 2017 02:56
Show Gist options
  • Save jmk2142/c89dd9f8fc2d534265229321e03f2904 to your computer and use it in GitHub Desktop.
Save jmk2142/c89dd9f8fc2d534265229321e03f2904 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
TINKER: Simple Lesson.md

TINKER: Simple Lesson

See demonstration: https://jsfiddle.net/jmk2142/szLbonkv

JSFiddle External Bootstrap CSS URL

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. 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.)
  • 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:

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.

:::warning ABOUT FCC's

There is no FCC due this week. This is because: Bootstrap isn't actually necessary to build a page that can be used with Javascript in the future.

That said, the time it takes to do the FCC on FreeCodeCamp, and using Bootstrap will almost certainly save you time this week in terms of building the Project. So it is highly recommended. :::

:::success RECOMMENDED STUDY

To get the most of Bootstrap:

Tinker Tasks

  • Like we did with the prior Tinker, fork the JSFiddle to play with it.
  • COMPARE AND CONTRAST this Tinker (which uses Bootstrap) with last week's JSFiddle.
  • 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

  • On the left hand panel is a section called External Resources. Remove the resource.
  • Enter the above resource directly into your browser URL input to go to the page and scan through the resource.
    • What is Bootstrap really?
  • I have a few CSS rules in the CSS pane. Comment them out.
    • What happens to the page and why?
    • What is the relation between my CSS and the External Resource?
    • How does my CSS "intersect" with the External Resource?
    • What do you think is the sequence of how the External Resource and my CSS are loaded?
    • What kinds of things could happen, if I am careless with my own CSS rules?
    • 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?
  • 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?
    • What then is the advantage of using a framework like Bootstrap?
    • What are some disadvantages of using a framework like Bootstrap?
  • 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?
    • There are many more classes used in this week's Tinker. Where do these classes come from?
  • Remove classes like 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?
  • Analyze the form and refer to http://getbootstrap.com/css/#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?)
    • If you deviate from the specifications, particularly: 1) the classes used, 2) the hierarchy expected, how might that affect your result?
  • Manipulate the form to "exclude" certain classes as prescribed by the Bootstrap guide and examples.
    • How does not following the specifications affect the output?
    • What are the key aspects you need to be paying attention to when learning and implementing these framework features?
    • What is the best way to learn how to use a new framework feature?
  • Think about your experience building a page from scratch last week.
    • What is your attitude on using, learning new frameworks like this?

GRID SYSTEM

<div class="container">
  <div class="row">
    <div class="col-__-__">
      <!-- CONTENT -->
    </div>
  </div>
</div>
  • FIND the above pattern(s) within the HTML.
    • Move a .row to the outside of a container. What happens?
    • Move a column outside a row but within a container. What happens?
    • What is the importance of using these three classes together container, row, col-__-__ and in the correct hierarchical sequence?
  • 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?
  • Manipulate the column classes to replace some col-xs-__ to col-lg-__. 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?
  • 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?
  • 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:
  • Visit the following link: Grid System Explained
    • What is the advantage of using popular tools like Bootstrap?

:::success 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:

COMPONENTS

  • 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: http://getbootstrap.com/components/#btn-groups
    • When learning to use new components in a framework, what do you think is the best practice on how to learn about the feature?
  • 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?
  • Pick a few different components you find interesting. Try to implement them into your Tinker Fiddle.
    • 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. 😸

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment