Uncategorized

Allen Morgan

Responsive Tips, Tricks, and Pointers

Having fun with CSS3, W3.CSS, and Bootstrap

Firstly, you might be wondering what the difference is between these three names. CSS3 is simply the latest version of CSS (Cascading Style Sheets). This is the standard language used to style HTML. W3.CSS and Bootstrap are both responsive web design frameworks that allow easy web application customization by using classes.

One way you can make your web applications more exciting is by adding animations with CSS3 or W3.CSS.  Animations allow you to change the style of an element easily without using JavaScript or Flash. The possibilities with animations are literally endless, so I’ll just focus on a few.  For some examples of what you can do with animations, check out this site: http://1stwebdesigner.com/css-effects/

Icons

Both frameworks that we have mentioned, W3.CSS and Bootstrap, support the use of icons. An icon can be used anywhere on your site. You can put it in line in text, in your navbar, in headers and footers, forms, and even in buttons!

In Bootstrap, these icons are called glyphicons and there are 260 of them. You can use icons as symbols or you could make them hyperlinks, or use them to style buttons. Look at the following code:

1

 

This is the output:

2.png

This is an example of a few different ways to use glyphicons with bootstrap. Notice that you must give it a class of glpyhicon and specify the name by typing glyphicon-glyphName. You can also resize the glyphs with the font-size property.

W3.CSS is a little different than Bootstrap in this aspect. They do not have any pre-loaded icons. Instead, you must use an icon library like Font Awesome Icons, Google Material Icons, or you can even use Bootstrap Icons. These are included by adding a <link> in the <head> of your web application.

Font Awesome Link:
<link rel=”stylesheet” href=”http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css”&gt;

Google Icons Link:
<link rel=”stylesheet” href=”https://fonts.googleapis.com/icon?family=Material+Icons”&gt;

Bootstrap Link:
<link rel=”stylesheet” href=”http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css”&gt;

Using Bootstrap icons with W3.CSS is the exact same syntax as with Bootstrap. Using Font Awesome is very similar. You will still use class names to insert them, however instead of typing “glyphicon glyphicon-glyphName” you will type “fa fa-iconName”. For example:

3

Using Google Material Icons is a little different. You declare in a class name that you are using Google Icons by typing “material-icons” then you specify the icon name in the middle of the tag. For example:

4

 

You can also combine W3.CSS features such as animations or sizing to these icons.

Word-Wrap

A very handy trick for responsive web design is the word-wrap property. This property allows you to break words midway if it reaches the border of its container. For example, you have a <div> that contains a paragraph of text. It is responsive so it shrinks down to a specified size when you resize a window or view on a smaller device. If we have a long word or url, the word/url will extend beyond the edge of the <div>. This is not desirable for aesthetic reasons. Here is an example without word-wrap applied:

5

Here is the same example with word wrap applied:

6

And here is the CSS to do it:

7

It really keeps your site looking tip-top to apply the word-wrap property to your elements!

Overflow

Another problem that several web applications have is the content going below the <div> This can be fixed by adding the following CSS:

8

This will make the vertical scroll bar visible at all times, even if the content is smaller than the visible area of the application. This way the content will remain in the <div>. Note that there is an overflow-x for horizontal access.

CSS3 animations

In order to use CSS3 animations, you must specify keyframes using the @keyframes rule.  These keyframes specify what styles the element will have at specific times. The second thing you must do is bind the keyframe rule to an element, for example:

9

This says we are going to create an animation called example which will change from a background color of red to yellow. We then bind this with our div element by saying “animation-name: example;” and we also specify a duration for the animation. This means that the color will gradually change from red to yellow over a period of 4 seconds. Note that if you don’t input a duration, no animation will take place because the default value is 0.

There are so many different options that you can choose to use when using CSS3 animations that there is no way I could cover them all here. I recommend going to http://www.w3schools.com/css/css3_animations.asp if you are interested in seeing the different possibilities.

You can also check out https://daneden.github.io/animate.css/ for examples of animations.

W3.CSS animations

W3.CSS animations are even easier to use than CSS3. All you have to do is add a class to an HTML element. For example:

10

This example will fade the contents of the div in and out.

Although W3.CSS is easier, it doesn’t offer as much customizability as CSS3. W3.CSS allows you to slide elements, fade elements in, infinite fade in and out, zoom elements, and spin elements.

A cool trick is that you can add these animations to media queries! You do it the same way you would normally use a media query. This allows you to create animations for different devices based on their screen size which creates ultimate responsiveness!

There are several tips, tricks, and pointers that can make our lives easier when designing responsive web applications. There are also several things we can do to make our web applications more exciting. Between Bootstrap, W3.CSS, and CSS3, our lives have definitely become easier in regards to responsive web applications!

http://resizemybrowser.com/

http://www.w3schools.com/bootstrap/default.asp

http://www.w3schools.com/w3css/default.asp

http://fontawesome.io/

https://design.google.com/icons/

http://getbootstrap.com/components/

 

Allen Morgan

Media Queries

You might be wondering what a media query is. Well, it is actually quite simple. A media query, simply stated, allows the size of the screen on your device to adapt the content of web applications to the screen size. For example, in the picture below, notice how the website changes its appearance based on the device? This makes viewing content on smaller devices easier while still retaining the integrity of the content.

Media queries are a part of CSS3 and are a W3C recommendation.
media - Copy

In addition to adapting the screen size of your device, media queries can also access the viewport, the visible area of a web page, the orientation and the resolution.

How to use them

Firstly, media queries are accessed by the @media rule and placed in your style sheet. Look at the following code:

code

This is the basic syntax to use a media query.  This says that when the screen size is 480 pixels or more, the body will have a light green background color, anything less than this will have a background of light blue. This is what is known as a breakpoint.

You can also have more than one breakpoint. This allows you to have different styles for desktop computers, laptops, tablets, and cellphones all at once. Media queries can also access different stylesheets. The following example uses 3 different stylesheets based on the devices screen width:

code2

Design for Mobile First!

When you are using media queries to create a responsive web application, always design for mobile first. What I mean by this is design your web application for mobile devices before designing for any other device. For example, we should change our styles when the devices width gets larger rather than when it gets smaller. This makes pages display faster for smaller devices.

Orientation

Another consideration when using media queries is the devices orientation because media queries can also be used to change the layout based on the orientation!

Using the same example as above, look at the following:

code3

Notice that instead of passing a min/max-width, we gave it an orientation. If you were to look at this web application on a tablet, the background color would be light blue in portrait mode, but would change to light green if you flipped it to landscape mode. It knows that the device is in portrait mode when the window is taller than it is wide and landscape when the window is wider than it is tall.

We have just seen how to use the @media rule with CSS3 using min/max-width and orientations.

To view a list of the different media features such as these, you may visit: http://www.w3schools.com/cssref/css3_pr_mediaquery.asp

Bootstrap and Media Queries

Now that we have seen how to use the @media rule with CSS3, let’s see how the number 1 responsive framework, Bootstrap, handles this. In my previous post, I explained how the grid system worked. If you recall, I mentioned that there are 12 columns in the grid, Bootstrap allows you to put classes on these columns.

Consider the following:

code4

5 - Copy

This code means that for devices with a “small” screen size (more on this in a bit), the first column will be of span 3 and the second column will be of span 9. Notice that their total adds to 12. In the above example, any device with a width smaller than the “small” size will cause these two columns to stack vertically.

Bootstrap predefines 4 sizes.

  • xs for extra small, used for phones and spans 1 to 767 pixels
  • sm for small, used for tablets and spans 768 to 991 pixels
  • md for medium, used for desktops and spans 992 to 1199 pixels
  • lg for large, used for larger desktops and spans 1200 pixels and above.

If we specify a column screen size, anything larger will be fine, but anything smaller will stack vertically. For example if we specify a col-md, anything smaller than 992 pixels will be stacked vertically, but anything above 992 pixels will remain as styled.

Bootstrap allows you to specify multiple column widths in one line. This way you can address the different devices you are styling conveniently. Consider the following:

6

Media queries are very simple and easy to use but can be used to accomplish huge tasks. They are a pretty awesome tool and when utilized in addition to fluid grid, can make for a powerful and responsive web application!

References:

http://zenit.senecac.on.ca/~dma502_141a15/wordpress/?m=201403

http://www.w3schools.com/cssref/css3_pr_mediaquery.asp

http://www.w3schools.com/bootstrap/bootstrap_grid_system.asp

http://getbootstrap.com/getting-started/

 

Pat

Bootstrap, front-end development

bootstrap.b

What is Bootstrap, you ask?

Sounds western doesn’t it? And the location given by one of the Bootstrap creators was San Francisco, when he signed up for Twitter back in September of 2011, and i don’t think you can get much further west than California, so maybe there was a little western influence in the naming. [4]

Speaking of Twitter, Bootstrap was created in mid-2010 and was known as Twitter Blueprint. The backstory on how it becomes open-source is best shared in their own words, “Twitter held its first Hack Week and the project exploded as developers of all skill levels jumped in without any external guidance. It served as the style guide for internal tools development at the company for over a year before its public release, and continues to do so today.”[5]

The goals of the two original developers Mark Otto and Jacob Thornton was to create a framework for consistency of design most especially for the user interface, as, up until then, their  use of libraries had “led to inconsistencies and a high maintenance burden.” [1]

Front end / Back end

So we might ask, front end – back end, what are we talking about? Let’s clarify so the significance of this is clear. In the language of the web, we have communication via the internet between clients and servers. These clients are not customers but rather the recipients of the information provided by the servers.

What has moved us into web 2.0 and with the addition of mobile devices into the so-called responsive web is the ability of having the clients (client side browser) to process information for the user rather than the user having to wait on the server to process and provide the information.

According to Mike Jewett in his blog about frontend and backend development, “Languages, frameworks, methodologies may differ, but there are two aspects of web development that will be common for all jobs: frontend and backend.” [4] So, we are addressing the front end processing for the web, which at one time was the exclusive domain of the designer. This has now changed considerably with the advent of the framework known as Bootstrap.

Frameworks

Once again SitePoint brings clarity to what could be a bit of geek-speak by explaining the changes and importance of front-end development and helps position the role of designers for the responsive web 2.0: “Responsive web design is not so hard to implement but it can be a little bit tricky to make it all work on all targeted devices. Frameworks make this job easier. They allow you to create responsive, standard-compliant websites with minimum effort while at the same time keeping everything simple and consistent. Frameworks give you a lot of benefits such as speed and simplicity, consistency across different devices . . .” [2]

bootstrap.b

Let’s have a little fun …

For those not certain what responsive design actually means, SitePoint references a site to allow you to experiment and see for yourself: “You can see just how responsive web design works at the Media Queries gallery site.” [3]  Please check it out and you can see quickly the tremendous impact of responsive web design.

And according to SitePoint, “Bootstrap is definitely the most popular and widely used framework, nowadays. It’s a beautiful, intuitive and powerful web design kit for creating cross browser, consistent and good looking interfaces. It offers many of the popular UI components with a plain-yet-elegant style, a grid system and JavaScript plugins for common scenarios.”[3]

Bootstrap is written in the language of the web

Bootstrap is written in HTML, CSS, LESS, Sass and JavaScript. It is browser based client side scripting using HTML and CSS-based design templates.[2] Bootstrap also makes use of the *GitHub repository: https://github.com/twbs/bootstrap.

*More on GitHub which, according to How-To-Geeks, is the go to place for developers: http://www.howtogeek.com/180167/htg-explains-what-is-github-and-what-do-geeks-use-it-for/

If we want to know about the forward-looking team at Bootstrap, “Originally released on Friday, August 19, 2011, we’ve since had over twenty releases, including two major rewrites with v2 and v3. With Bootstrap 2, we added responsive functionality to the entire framework as an optional stylesheet. Building on that with Bootstrap 3, we rewrote the library once more to make it responsive by default with a mobile first approach.” [1]
The keywords here, in this author’s opinion, are by default.

They are preparing for Web 3.0 and so are we …

 

Back to Top

References:

  1. Bootstrap. About, n.d. Retrieved February 23, 2016, from https://getbootstrap.com/about/#team.
  2. Bootstrap. Twitter, n.d. Retrieved February 23, 2016, from Twitter: https://twitter.com/getbootstrap.
  3. Gerchev, Ivaylo. Top 10 Front-End Development Frameworks, June 16, 2013. Retrieved February 23, 2016 from SitePoint: http://www.sitepoint.com/top-10-front-end-development-frameworks/
  4. Jewett, Mike. A Comparison of Frontend and Backend Web Development,  January 19, 2015. Retrieved February 23, 2016, from Bloc: https://blog.bloc.io/frontend-vs-backend-web-development/.
  5. Wikipedia. Bootstrap (front-end framework), n.d. Retrieved February 23, 2016 from Wikipedia: https://en.wikipedia.org/wiki/Bootstrap_(front-end_framework).

 

Allen Morgan

The Grid

 

What is it?

The grid is used by nearly every responsive framework to achieve a responsive website. It works by sitting on top of the DOM. As you can see in the image below, a standard computer screen is divided into 12 different columns. You can use any combination of these columns on your page. For example, you can have four span 3 columns, or two span 5 columns with 2 span one columns. The only thing to remember is that the columns must always total 12.
1

Why use it?

It is important to have things responsive and positioned correctly and not floating and jumping around the page when the screen is resized. The grid helps accomplish this. Have you ever been on a website and resized it and had several div boxes (or something similar) start moving and stacking in weird ways? This is because the site was not using a grid. The grid holds items in their place no matter the screen size. The grid should be used because you can place anything inside these columns: text, images, videos, you name it!

Fluid vs. Static

There are two types of grids, fluid and fixed. A fluid grid will keep the grid at 100% of the screens width at all times. The columns will grow and shrink in size according to the screen size. This means that if you have 12 span 1 columns, it will look like this on a computer:
2

And it will look like this on a small screen:

3

Notice how the columns shrank in width but grew in height in order to accommodate all of the text. The fluid grid uses percentages to size the columns. The fixed grid uses pixels to size the columns. It will never shrink below the specified width, but instead will stack the columns. For example, I have created 6 span 2 columns with a minimum width of 150px each:

4

Notice that the columns grow to fill the screen, because I did not specify a maximum width. I have had an even bigger screen, these columns would grow to fit the screen. However, here is the same example resized to a small screen:

5

Notice that once the columns reached that minimum width of 150 pixels, they stopped shrinking and instead started stacking. Depending on what you want in your website, fluid grids and fixed grids both have pros and cons. Some frameworks, like Bootstrap, allow you to have different column spans for different sized screens, making the fluid grid very responsive. For instead, on a desktop you might want four span 3 columns to take up the whole screen; however, this would look cramped on a smaller screen, so you would want four span 12 columns stacked vertically. This is easily accomplished by using responsive design frameworks.

Offsetting

Now, you might say, this is neat and all, but what if I don’t want my columns beside each other like that? Well, there is a cool feature with grids called offsetting. This allows you to leave gaps in between your columns. For example:
6

This gives you the freedom to customize the layout of your page however you want.

Nesting

Another cool feature of grids is that you can nest them, meaning you can put a grid inside of a grid. This means that you could divide a span 1 into 12 columns if you wanted. I’m not sure that you would ever want to do this, but the possibilities are endless.

Grids are a pretty revolutionary tool to responsive web design. There are so many different things that we can do with grids to achieve precise responsive results.  Depending on what our site needs, fluid or fixed are both good options. I tend to lean more towards fluid, being sure to assign multiple column spans for the different screen sizes to ensure ultimate responsiveness.

 

Back to Top

References:

http://www.w3schools.com/bootstrap/bootstrap_grid_system.asp

http://getbootstrap.com/2.3.2/scaffolding.html