Base Responsive Styles

Base-Responsive-Styles.md

Base Responsive Styles

This CSS file has a few simple rules that you can put in as part of the base CSS for a responsive site.

The first set applies a boder-box box model to all elements on the site. This makes doing a responsive layout much easier because it allows you to set a width property and then adding padding or margin won't change the overall width of the element and force you to adjust the width property accordingly. Paul Irish gets full credit for this and you can learn more by reading his article

The second allows images to resize responsively. If you put an image in a container element that is narrower than the image it will adjust its size to fit the container. If the container is bigger than the image, the image will NOT grow. Note: this is not a fully responsive image where different images are sent to different screen sizes

This CSS also affects the <video> element in the same way it works with the <img> element. This will not make embeded video (like from YouTube or Vimeo) responsive. See this gist for that.

Border-Box Explanation with Example

For example you might make four .box elements appear next to each other by applying a rule like this:

.box{
    width: 25%;
    float: left;
}

But then the content in each box would touch the content for the other boxes. So you might want to add some padding. This is often easier to do in px or em then to calculate a percentage

.box{
    width: 25%;
    float: left;
    padding: 10px;
}

If you are using the normal content-box model then you would have to go in and subtract 20px (10px on each side) from the width. Even if you used % for the padding unit you would still have to subtract the amount of padding you added from the width.

With the border-box model, you just set the padding and you're done. And if you want to go and add borders later, no problem either.

base.css

/*The following 7 lines are from Paul Irish and apply a border-box model. 
See this page for more info: http://www.paulirish.com/2012/box-sizing-border-box-ftw/ */
/* apply a natural box layout model to all elements, but allowing components to change */
html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

/* Basic Responsive Images and Video */
img,video{
  width: auto; 
  height: auto;
  max-width: 100%; 
}