CSS – Responsive Web Design


Responsive Web Design (RWD) / HTML5 / CSS3

Break words between any two letters:
word-wrap: break-word;

Responsive video: padding-bottom

position: relative;
padding-bottom: 56.25%; /* 16:9 */
padding-top: 25px;
height: 0;

Technique makes use of the unique way padding-top and padding-bottom deal with percentage values – they will be interpreted as a percent of the width of the containing element.

box-sizing


box-sizing: content-box
box-sizing: padding-box
box-sizing: border-box

content-box
This is the default style as specified by the CSS standard. The width and height properties are measured including only the content, but not the padding, border or margin.


The width and height properties include the padding size, and do not include the border or margin.

border-box
The width and height properties include the padding and border, but not the margin. This is the box model used by Internet Explorer when the document is in Quirks mode. Note: Padding & border will be inside of the box

The HTML

Element represents self-contained content, frequently with a caption (

)







La Tour Eiffel

La Tour Eiffel


A picture
Caption for the picture

Ruby Notepad Bookmarklet :
RAW

CSS

Media Queries:
http://www.w3.org/TR/css3-mediaqueries




@media (orientation: portrait)  { }
@media screen and (color)  { }

Window.matchMedia()

if (window.matchMedia("(min-width: 400px)").matches) {
  /* the view port is at least 400 pixels wide */
} else {
  /* the view port is less than 400 pixels wide */
}

The following example inserts the URL in parenthesis after each link:

a:after {
    content: " (" attr(href) ")";
}

Columns

Divide the text in a

element into three columns, and specify a 40 pixels gap between the columns.

div {
    -webkit-column-count: 3; /* Chrome, Safari, Opera */
    -moz-column-count: 3; /* Firefox */
    column-count: 3;

    -webkit-column-gap: 40px; /* Chrome, Safari, Opera */
    -moz-column-gap: 40px; /* Firefox */
    column-gap: 40px;

-webkit-column-rule: 4px outset #ff00ff; /* Chrome, Safari, Opera */
    -moz-column-rule: 4px outset #ff00ff; /* Firefox */
    column-rule: 4px outset #ff00ff;
}

Css Validator:
http://jigsaw.w3.org/css-validator


@charset "UTF-8"; /* you need this line as first line */
@import url(css-file-1.css);
@import url(css-file-2.css);
@import url(css-file-3.css);


#cookie-consent-container button {
        background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAACXBIWXMAAAsTAAALEwEAmpwYAAABu0lEQVR4nGMUExNjgAE3J1trc2NLMyO4yPFT546ePLtr32G4CCNEAw83V09LpZKCPAM2cO/Bw5Ka9i9fv0E18HBzLZ7Vx83FhVU1BHz99i02rejL129MDAwMPS2V+FUzMDBwc3H1tFQyMDAwB/p6eLs7QURv3bl/7NR5BgYGESFBBgaG+w+fLFu7+d27DypK8gwMDIICAi9fv2Fxd7KFG3Pzzv11m3cJCwtkJEaws7E3dU35++8fsj3uTrYsutoacL6aiqKwsMDLV287Jszm4uT88/cvCzOzl4s9XIGutgYTsgHqKooZiRHs7Gw/f/56/+GjoAB/U1W+orwMshoUDQwMDP/+/mdhZoawv33//vPXTzQFKBoeP30+c8HK799/cHNxQuyZMX/FzTv3kdUwW1uYiIuJQDhFNe2fv3wVFRbKTY2xtTK+cfve69fvrty4baCrxcPNxcDAcPnqDaadyNHOyMjKylKQGa+moqiiqJAaFy4oyP/5y9ffv39DFOzcd5hRTExsRn8zrkTx4tWb379/S4iJsLKy3nvwMKOwlqyk8eXrt9i0onsPHuJSfe/BQ4hqBnhqhQBikjcAag20dJxdteYAAAAASUVORK5CYII=) no-repeat;
        position: absolute;
        width: 16px;
        height: 16px;
        top: 12px;
        right: 12px;
        border: 0;
        text-indent: -9999px;
    }

References

Web Fundamentals – Best practices for modern web development
https://developers.google.com/web/fundamentals/

Simple, responsive boilerplate:
http://getskeleton.com/

GRID SYSTEM with LESS:
http://semantic.gs/

Build Responsively Workshop:
https://github.com/sparkbox/Build-Responsively-Workshop

Adaptive Images:
http://adaptive-images.com/

http://www.sencha.com/learn/how-to-use-src-sencha-io/

https://github.com/bencallahan/rwd-retrofitting

https://twitter.com/rwd

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *