Web Design 3: Week # 7

Quiz time!

Please take Quiz # 6 on D2L!

Learning Time

Now that we have the basics of our structure, let's get to styling (AKA every designers favorite part).

Please watch the videos from Bootstrap 3 Essential Training: Section 3. Exploring Basic Bootstrap Classes and Section 4. Adding other CSS styles.

You can style elements with the same styling given to header classes by using the appropriate header name. For instance, if you gave a class of "h1" to a div, that div would then look like the default h1 element.
The oft-forgotten "Small" tag is used in HTML to give a default smaller font-size to an element. In Bootstrap, the small tag also gives some additional styling, making the text greyed out a bit and, of course, smaller. Note that the "small" tag will have different styles depending on which element you place it in.

Headings and Small Copy

Learning Time

The "lead" class can also help you make your elements look more distinct compared to one another. Use this class when you want to make an element stand out against other types of the same element.
Inline Style Tags
Note that inline style tags might add some padding to your text, so be sure and adjust it in your CSS if you don't want any additional padding.
The Mark tag can be used to make whatever text you want appear as though it were highlighted with a marker.
The "S" tag will strikethrough your text (just like in Microsoft Word)

Inline Styles

Learning Time

The "del" tag is similar in style to the "S" tag, but you can use the del tag programmatically to determine which elements are actually deleted versus stricken through (if you were to create a Word type of program, for instance).
The "ins" and "u" tags both put underlines in their text, but the ins tag is used in programming to see which element was inserted. In our case, we'll just be using the "u" tag for underlining items (if need be).
The "strong" tag and "b" tag are used to bold text, but have different semantic meanings. The b tag should be used when you have text that means something slightly different than the rest of your text.
The "em" and "i" tags are used to italicize text, but the i tag is used primarily for text that are scientific.

Inline Styles

Learning Time

"text-left", "text-right", "text-center", "text-justify", and "text-nowrap" are used to align elements as they are named. That is, "text-left" will center the text to the left, etc.
You can also transform text using the classes "text-lowercase" and "text-uppercase", which lower the case and capitalize the case, respectively.
The "abbr" tag can be used to set an abbreviated word like "ave.". Simply put the full word in the title attribute of the tag. That way, when a user hovers over it, they can see the full word. If you need to add acronyms, like USA, you can use the initialism class on the abbr tag.

Alignment, Transformation, and Abbreviation

Learning Time

A blockquote creates a single large block of text. This is used when you want to create a quote. You can also use a footer tag within the blockquote in order to describe the author of the quote. If you want the blockquote to align to the right, simply use the blockquote-reverse class.

List Styles

Styling lists are pretty easy. If you add the "list-unstyled" class to an ol or ul tag, you can remove any styling from your list.
If you want to remove bullet points and make the elements inline, you can use the "list-inline" class.
The "dl-horizontal" class also adds some cool styling, making your elements and their content appear in a 2 column format once a breakpoint is achieved.

Block Quotes

Learning Time

If you want to display HTML code as a styled output, you can use the "code" tag.
To show keyboard keys, you use the "kbd" tags, which gives it a nice black background with white font.
Using "var" tags also help search engines find you better (if the user is searching for variables).
You can align and monospace your font using "pre" tags. Add a class of "pre-scrollable" to make your code have a scroll box.
You can show the output of code using "samp" tags (stands for sample). The code he shows in the video has escaped HTML, which uses Ascii codes to output HTML: http://www.ascii.cl/htmlcodes.htm.

Styling Code

Learning Time

Creating buttons in Bootstrap is as easy as adding classes. Simply create an element and add a "btn" class to the element. Then, give it a "btn-default" for a default style. You can also add different colors based on usage of the buttons. For instance, "btn-primary", "btn-success", "btn-info", "btn-warning", "btn-danger" are all classes that add blue, green, light blue, orange, and red colors to the background of the button, respectively.
If you want to change the size of the button, add either "btn-lg", "btn-sm", or "btn-xs". You caa even make the button take up the whole size of the container by using "btn-block"
Adding an "active" class to a button will make the button appear depressed (pushed down, not the mental state).
If you use the "disabled" class, you can make a link or button disabled (unable to be used).

Bootstrap Buttons

Learning Time

Adding a class of "table" to a table element will immediately give the table some great, default styles.
If you want to have every other row have a stripe, simply add a "table-striped" class to the table element.
With the "table-border" class on the table element, you create a border around the table.
"table-hover" class on the table element creates a hover state on each of the rows.
A smaller table can be achieved by using "table-condensed" class on the table element.
Adding colors to rows and columns can be done by adding any one of the following classes to a tr or td element: "active", "success", "info", "warning", and "danger".
There is also a way to add responsiveness to a table by just adding the class of "table-responsive" to a div and wrapping it around your table.

Bootstrap Tables

Learning Time

Creating responsiveness to an image is as easy as adding a class of "img-responsive" to your img tag. You can also use the "center-block" class along with the "img-responsive" class in order to get a centered image.
Creating rounded edges around your image can be done using the "img-rounded" class.
For circular images, use the class of "img-circle".
For a thumbnail-type look, use "img-rounded"

Responsive Images

Helper Classes

You can create different text styles using "text-primary", "text-success", "text-muted", "text-info", "text-warning", and "text-danger". You can also do the same colors but with the background color by switching the "text" with "bg" in any of the choices above, except for bg-muted.
Floats can also be done by adding a "pull-left" or "pull-right". You can clear floats as well using the "clearfix" class.
Hiding and showing elements can be done with the "hidden" and "show" classes as well. Leaving the image as "invisible" with the "invisible" class will cause the image to leave a space for the image there while still not showing.

Learning Time

Responsive utilities let you show or hide elements based on the breakpoint. Simply have either hidden or visible as the first argument for the class, then the breakpoint (xs, sm, md, or lg) and then inline or inline-block. An example class would be "visible-xs-inline"

Responsive Utilities

Learning Time

Please don't forget that you have me as a resource. Contact me if you're confused and I can set up a Skype session to help explain things.

Discussion

Don't forget to answer the discussion question for the week!

"Describe, in your own words, 5 different Bootstrap styles"

Project Update 7

Once you're done with the reading and the lecture, I'd like you to continue working on your web application.
This week, your project requirements will be:
1) Use Bootstrap styles to create a responsive table
2) Use Bootstrap styles to create a responsive image gallery
Remember, the assignment for each week will result in a completed project. The next 6 weeks will be based on completing a final project, so see the project guidelines to see what the minimum requirements will be for your projects.