Tag: CSS

Ethan Marcotte’s Responsive Design

Ethan Marcotte said that he wanted to make each screen size look different. It is none more apparent than the difference between Mobile and Tablet Portrait. They each have a specific design that is both very similar but different and the same time.

 

This is an example of the code for Mobile on the site.

@media (min-width: 768px) {
.dl-horizontal dt {
float: left;
width: 160px;
overflow: hidden;
clear: left;
text-align: right;
text-overflow: ellipsis;
white-space: nowrap;
}
.dl-horizontal dd {
margin-left: 180px;
}
}

Whereas with this example of the tablet in portrait mode, It has many more bits that effect the layout.

@media (min-width: 768px) {
.col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 {
float: left;
}
.col-sm-12 {
width: 100%;
}
.col-sm-11 {
width: 91.66666667%;
}
.col-sm-10 {
width: 83.33333333%;
}
.col-sm-9 {
width: 75%;
}
.col-sm-8 {
width: 66.66666667%;
}
.col-sm-7 {
width: 58.33333333%;
}
.col-sm-6 {
width: 50%;
}
.col-sm-5 {
width: 41.66666667%;
}
.col-sm-4 {
width: 33.33333333%;
}
.col-sm-3 {
width: 25%;
}
.col-sm-2 {
width: 16.66666667%;
}
.col-sm-1 {
width: 8.33333333%;
}
.col-sm-pull-12 {
right: 100%;
}
.col-sm-pull-11 {
right: 91.66666667%;
}
.col-sm-pull-10 {
right: 83.33333333%;
}
.col-sm-pull-9 {
right: 75%;
}
.col-sm-pull-8 {
right: 66.66666667%;
}
.col-sm-pull-7 {
right: 58.33333333%;
}
.col-sm-pull-6 {
right: 50%;
}
.col-sm-pull-5 {
right: 41.66666667%;
}
.col-sm-pull-4 {
right: 33.33333333%;
}
.col-sm-pull-3 {
right: 25%;
}
.col-sm-pull-2 {
right: 16.66666667%;
}
.col-sm-pull-1 {
right: 8.33333333%;
}
.col-sm-pull-0 {
right: auto;
}
.col-sm-push-12 {
left: 100%;
}
.col-sm-push-11 {
left: 91.66666667%;
}
.col-sm-push-10 {
left: 83.33333333%;
}
.col-sm-push-9 {
left: 75%;
}
.col-sm-push-8 {
left: 66.66666667%;
}
.col-sm-push-7 {
left: 58.33333333%;
}
.col-sm-push-6 {
left: 50%;
}
.col-sm-push-5 {
left: 41.66666667%;
}
.col-sm-push-4 {
left: 33.33333333%;
}
.col-sm-push-3 {
left: 25%;
}
.col-sm-push-2 {
left: 16.66666667%;
}
.col-sm-push-1 {
left: 8.33333333%;
}
.col-sm-push-0 {
left: auto;
}
.col-sm-offset-12 {
margin-left: 100%;
}
.col-sm-offset-11 {
margin-left: 91.66666667%;
}
.col-sm-offset-10 {
margin-left: 83.33333333%;
}
.col-sm-offset-9 {
margin-left: 75%;
}
.col-sm-offset-8 {
margin-left: 66.66666667%;
}
.col-sm-offset-7 {
margin-left: 58.33333333%;
}
.col-sm-offset-6 {
margin-left: 50%;
}
.col-sm-offset-5 {
margin-left: 41.66666667%;
}
.col-sm-offset-4 {
margin-left: 33.33333333%;
}
.col-sm-offset-3 {
margin-left: 25%;
}
.col-sm-offset-2 {
margin-left: 16.66666667%;
}
.col-sm-offset-1 {
margin-left: 8.33333333%;
}
.col-sm-offset-0 {
margin-left: 0;
}
}

7 Tips to Clean CSS You May or May Not Know

  1. Clean VS. Messy Code – If you are making a CSS intensive site, sitting and staring at a mess of code can rack your brain. However, if you use comments, you can make it easier for yourself, and/or other people.
  2. Comments – Comments can easily explain code that you used to anybody viewing the code, and are not valid code. For instance, if you wanted to let people know the color codes for different Hexadecmial Values you can make a “Guide” using comments. An example of this would be something like

    /************************************************
    *************************************************
    COLOR GUIDE

    # Dark Grey (Text): #333
    # Dark Blue (Headings, links): #000066
    # Mid Blue (Header): #333399
    # Light Blue (Top Navagation): #CCCCFF
    # Mid Grey: #666

    *************************************************
    *************************************************/

    This is obvious to the reader but the browser does not “see it”.

  3. Shorthand – If you have have to change five or so lines of code just for thing to happen, it may frustrate you. That is why depending on what you are styling, you can just go to one line of code and change what you want. For Example: Instead of typing

    body {
    margin-top: 20px;
    margin-right: 20px;
    margin-bottom: 20px;
    margin-left: 20px;
    }

    You can type:

    body {
    margin: 20px 20px 20px 20px;
    }

  4. Master CSS – To save loading time, you can create a Master CSS file. What this allows you to do is import multiple CSS files to one and use only that in your HTML. This way, the page only has to load one file as apposed to countless numbers of them.
  5.  Structure Template – If you are planning on making many websites using a similar design, you may want to use a template to reduce coding time, if you have already coded it.
  6. Unnecessary Line Breaks – If you have too much white space, it will take longer for the page to load, and is actually not as clean as less white space. If you only have one expression in a set of brackets, just use one line.
  7. Remove Unused Selectors – If you forget about a selector, or refer to it somewhere else, you should delete it. It causes the page to load slower and uses unneeded lines of code that may or may not do anything.

 

Also from watching the CSS Visual Optimization course on Lynda.com, I leaned that I need to comment more and use less white space.