Dabblet: ukazky "krapy first" technicke implementace

dabblet.css

/*
 * Dabblet: ukazky "krapy first" technicke implementace
 */

/*
 Vrstva pro krapy:
 * reset/normalizace
 * zakladni typografie
*/ 

body {
  font: 15px/20px sans-serif;
}

p, ul, ol, dl, h1, h2, h3, h4, h5, h6, fieldset, form, blockquote, table {
  padding-bottom: 0;
  padding-top: 0;
  margin-top: 0;
  margin-bottom: 20px;
}

a img
  {  border: 0; }

hr
  { margin-bottom: 36px;}

/*
 Vrstva pro smartphony:
 * vzhled prvku (barvy, vlastni pisma, formatovane boxy)
*/
@media screen {

	h1 {
	  color: #FF33FF;
	}
	
	#container {
	  width: auto;
	}

}

/*
 Vrstva pro tablety a desktop:
 * uprava vzhledu
 * layout
*/
@media screen and (min-width: 481px) {

	body {
	  background: #666;
	}
	
	#container {
	  background: #fff;
	  margin: 20px auto;
	  width: 500px;
	  padding: 20px;
	  border-radius: 20px;
	  box-shadow: 5px 5px 50px rgba(0,0,0,.5);
	}

}

dabblet.html

<div id="container">

 	<h1>Křápy first</h1>
 	
 	
 	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras feugiat augue id risus dictum ullamcorper. 
 	<p>Phasellus a ante nisl. Pellentesque pellentesque, eros eu porta iaculis, ligula mauris vehicula augue, vitae cursus sapien lorem a mauris. Etiam elementum diam consectetur arcu laoreet in ultricies neque euismod. Nullam et ipsum nec nisi eleifend ullamcorper id ac erat. 
 	<p>Aenean quis enim urna, id pulvinar erat. Donec suscipit semper laoreet. Morbi interdum, tellus ac varius ultrices, augue justo feugiat justo, eget sollicitudin nisi ipsum vel erat. 
 	
</div>

settings.json

{"view":"split","prefixfree":"1","page":"css"}