Niels Doorn nielsdoorn

## 55-bytes-of-css.md

      
              1 file
            
          
              115 forks
            
          
                32 comments
              
            
              2151 stars
            
          
                JoeyBurzynski
                / 55-bytes-of-css.md
            
            
              Last active
              December 27, 2025 06:03
            
              
                58 bytes of css to look great nearly everywhere
              
          
    58 bytes of CSS to look great nearly everywhere

When making this website, i wanted a simple, reasonable way to make it look good on most displays. Not counting any minimization techniques, the following 58 bytes worked well for me:
main {
  max-width: 38rem;
  padding: 2rem;
  margin: auto;
}

  
## footer.php
	</div>
	<?php wp_footer(); ?>
</body>
</html>

## gist:8972255
module FlowGraphsAndClassDiagrams

import analysis::flow::ObjectFlow;
import lang::java::flow::JavaToObjectFlow;
import List;
import Relation;
import lang::java::m3::Core;

import IO;
import vis::Figure;

## index.html
<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Subnetmask calculator</title>
	<link href="style.css" rel="stylesheet">
	<script src="script.js"></script>
	<script src="subnetmaskCalculator.js"></script>
<body>
	<div id="page">

## animationPolyfill.js
// Paul Irish animation loop polyfill
// https://gist.github.com/paulirish/1579671

(function() {
		var lastTime = 0;
		var vendors = ['ms', 'moz', 'webkit', 'o'];
		for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
				window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
				window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame']
																	 || window[vendors[x]+'CancelRequestAnimationFrame'];

## dabblet.css
/**
 * Very simple css3 polaroid styling
 */
body{
background: #f06;
background: linear-gradient(45deg, orange, yellow);
min-height:100%;
}
div#container{
width:900px;

## dabblet.css
/**
 * Very simple css3 polaroid styling
 */
body{
background: #f06;
background: linear-gradient(45deg, orange, yellow);
min-height:100%;
}
#photo{
width:200px;

## rAF.js
// http://paulirish.com/2011/requestanimationframe-for-smart-animating/
// http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating

// requestAnimationFrame polyfill by Erik Möller. fixes from Paul Irish and Tino Zijdel

// MIT license

(function() {
    var lastTime = 0;
    var vendors = ['ms', 'moz', 'webkit', 'o'];
	module FlowGraphsAndClassDiagrams

	import analysis::flow::ObjectFlow;
	import lang::java::flow::JavaToObjectFlow;
	import List;
	import Relation;
	import lang::java::m3::Core;

	import IO;
	import vis::Figure;
	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Subnetmask calculator</title>
	<link href="style.css" rel="stylesheet">
	<script src="script.js"></script>
	<script src="subnetmaskCalculator.js"></script>
	<body>
	<div id="page">
	// Paul Irish animation loop polyfill
	// https://gist.github.com/paulirish/1579671

	(function() {
	var lastTime = 0;
	var vendors = ['ms', 'moz', 'webkit', 'o'];
	for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
	window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
	window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame']
	\|\| window[vendors[x]+'CancelRequestAnimationFrame'];
	/**
	* Very simple css3 polaroid styling
	*/
	body{
	background: #f06;
	background: linear-gradient(45deg, orange, yellow);
	min-height:100%;
	}
	div#container{
	width:900px;
	// http://paulirish.com/2011/requestanimationframe-for-smart-animating/
	// http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating

	// requestAnimationFrame polyfill by Erik Möller. fixes from Paul Irish and Tino Zijdel

	// MIT license

	(function() {
	var lastTime = 0;
	var vendors = ['ms', 'moz', 'webkit', 'o'];