| <data> | |
| <hello>paste your xml here</hello> | |
| </data> |
| body { background:#EEE; min-height: 60em; } | |
| #logo { | |
| XXXborder: 0 solid #FFF; | |
| XXXborder-width: 0 .25em .25em 0; | |
| XXXborder-radius: .125em; | |
| width: 5em; | |
| height: 5em; | |
| background: #000; |
| body { background:#EEE; font-family: Georgia, serif; margin: 0; padding: 0; position: relative; } | |
| .wrap { | |
| min-width: 40em; | |
| max-width: 50em; | |
| min-height: 40em; | |
| margin: 1.5em auto 0 10em; | |
| padding: 3em 6em; | |
| XXborder: 1px solid red; | |
| XXXbackground: rgba(255,255,255,0.7); | |
| background: linear-gradient(rgba(255,255,255,0.9) 15%, rgba(255,255,255,0) 50%); |
| /* Some fancy experimenting with an animated, transformed, multiple-box-shadowed logo :/ */ | |
| body { background:#EEE; min-height: 60em; } | |
| #logo { | |
| XXXborder: 0 solid #FFF; | |
| XXXborder-width: 0 .25em .25em 0; | |
| XXXborder-radius: .125em; | |
| width: 5em; | |
| height: 5em; |
| /* Some fancy experimenting with an animated, transformed, multiple-box-shadowed logo :/ */ | |
| body { background:#EEE; min-height: 60em; } | |
| #logo { | |
| XXXborder: 0 solid #FFF; | |
| XXXborder-width: 0 .25em .25em 0; | |
| XXXborder-radius: .125em; | |
| width: 5em; | |
| height: 5em; |
| /** | |
| * CSS only 'lightbox' | |
| */ | |
| body { | |
| font: normal 1.5em/1.5 sans-serif; | |
| background: #0cf; | |
| color: #444; | |
| min-height: 100%; | |
| padding: 2em 10em; |
'OOCSS' methods such as SMACSS and BEM prescribe naming your selectors as such:
.room {} /* A base Module (BEM: block) */
.room__door {} /* A descendant element of the `.room` Module (BEM: element) */
.room--bedroom {} /* A different Sub-Module or 'version' of our base Module (BEM: modifier) */
Je website wordt in toenemende mate bekeken op apparaten anders dan de standaard PC: smartphones, tablets, tv's en game consoles. Deze apparaten verschillen nogal van de standaard computer: ze hebben bijvoorbeeld een kleiner beeldscherm en geen toetsenbord maar een touch-screen.
Het bekijken van websites die niet gebouwd zijn met dit brede spectrum aan apparaten in het achterhoofd is meestal een minder prettige ervaring: de website wordt bijvoorbeeld geschaald (en de tekst onleesbaar) of links en knoppen zijn veel te klein om met je vingers te raken.
Responsive Web Design (RWD) is een manier van het bouwen van websites met als doel een zo optimaal mogelijke beleving op een zo groot mogelijk aantal verschillende apparaten. RWD staat specifiek voor het ontwikkelen van websites met specifieke technieken maar is onderdeel van een filosofie van het bouwen van toekomstvriendelijke websites.
| /** | |
| * Slanted nav-menu items | |
| */ | |
| * { font-family: Helvetica, Arial, sans-serif; margin: 0; padding: 0; } | |
| body { | |
| background-color: rgba(0,0,0,0.03); | |
| } | |
| .nav-menu { | |
| background: #eee; |
| /* | |
| Note to self: put this in my base stylesheet :) | |
| - Note: some stuff would already be done by Normalize.css | |
| - Use Normalize.css :) | |
| ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ | |
| * { | |
| /* http://paulirish.com/2012/box-sizing-border-box-ftw/ */ | |
| -webkit-box-sizing: border-box; |