Doing Things Wrong

Handy CSS

Here is the css file that I include in my theme ( one of many, actually. ) This file pre-defines a lot of CSS options as classes, which makes them much easier to use. Include this file in your theme header, and these classes will display properly in the Gutenberg WordPress editor. In fact, I am using them now.

/*
 * additional quick classes that should be part of css
 * many of these display correctly in Gutenberg
 */

/* text layout ================================= */

.cl-l, .clear-left  { clear:left;  }
.cl-b, .clear-both  { clear:both;  }
.cl-r, .clear-right { clear:right; }

.nw, .nowrap, .no-wrap { white-space: nowrap; }

.nnw, .no-nowrap, .no-no-wrap { white-space: normal; }

.bw, .breakword 
{ display: block; overflow-wrap: break-word; word-break: break-all; }

.nbw, .nobreakword 
{ display: block; overflow-wrap: normal; }

.center { margin-left: auto; margin-right: auto; };

.in-0,  .indent-0  { text-indent:  0px; }
.in-10, .indent-10 { text-indent: 10px; }
.in-20, .indent-20 { text-indent: 20px; }
.in-30, .indent-30 { text-indent: 30px; }
.in-40, .indent-40 { text-indent: 40px; }
.in-50, .indent-50 { text-indent: 50px; }
.in-60, .indent-60 { text-indent: 60px; }

.quote  { padding: 20px 0px 20px 40px; }
.author { text-align:right; padding-right:20px; }

.visible { visibility: visible; }
.hidden  { visibility: hidden;  }
.hide    { display: none; }

/* alignments ================================= */

.has-text-align-left,   .ta-l, .left 
{ text-align: left; }

.has-text-align-center, .ta-c, .center 
{ text-align: center; }

.has-text-align-right,  .ta-r, .right 
{ text-align: right; }

.has-text-align-justify, .ta-j, .justify 
{ text-align: justify; }

.ta-c img 
{ margin-left:auto; margin-right:auto; }

.va-b, .bottom { vertical-align: bottom; }
.va-m, .middle { vertical-align: middle; }
.va-t, .top    { vertical-align: top; }

.fl-r, .float-right 
{ float:right;margin: 0px 0px 20px 20px; }

.fl-l, .float-left
{ float:left;margin: 0px 20px 20px 0px; }

.block        { display: block; }
.inline       { display: inline; }
.inline-block { display: inline-block; }

.absolute { position: absolute; }
.relative { position: relative; }
.sticky   { position: sticky; }
.static   { position: static; }
.fixed    { position: fixed; }

/* text formats ================================= */

.bold,   .bold   * { font-weight: bold;   }
.italic, .italic * { font-style:  italic; }
.normal, .normal * { font-weight:normal; font-style:normal; }
.u-line, .u-line * { text-decoration:underline; }
.x-out,  .x-out  * { text-decoration:line-through; }
.x-red,  .x-red  * { text-decoration:line-through; text-decoration-color: red; }

.biggest,  .biggest  * { font-size: 200%; }
.bigger,   .bigger   * { font-size: 150%; }
.big,      .big      * { font-size: 125%; }
.small,    .small    * { font-size: 85%;  }
.smaller,  .smaller  * { font-size: 67%;  }
.smallest, .smallest * { font-size: 50%;  }

/* special fonts ================================= */
/* see also style_typography.css */

.sans, .sans * /* default */
{ font-family: "Segoe UI","Helvetica Neue",sans-serif; }

.serif, .serif * 
{ font-family:"Times New Roman",Times,serif; }

.typewriter, .typewriter *, .monospace, .monospace * 
{ font-family:"Courier New",courier,monospace; }

.hand, .hand *, .comic, .comic *
{ font-family:"Comic Sans MS","Comic Sans",cursive,sans-serif; }

/* background colors ============================== */

.bg-hide   { display: none; } 

.bg-white  { background: white; } 
.bg-mist   { background: #E8E8E8; } 
.bg-silver { background: silver;  } 
.bg-gray   { background: gray;} 
.bg-black  { background: black;  } 

.bg-cream  { background: #ffffcc; }
.bg-lemon  { background: #FFF99C; }
.bg-yellow { background: yellow;  } 
.bg-orange { background: orange;  } 
.bg-pink   { background: #FFB0B0; } 
.bg-red    { background: red; } 

.bg-sky    { background: #bbeeff; } 
.bg-aqua   { background: aqua;} 
.bg-teal   { background: #33cccc; }
.bg-blue   { background: blue;  } 
.bg-navy   { background: navy;  } 

.bg-lavender{ background: lavender; }
.bg-purple{ background: #9999ff; }
.bg-grape{ background: #6666cc; }

.bg-pea{ background: #ccff99; }
.bg-green  { background: green; } 
.bg-forest { background: #005000; } 

.bg-silver-fade
{ background: linear-gradient(to right,#B4B4B4,white); }

.bg-white-fade
{ background: linear-gradient(to right,white,#B4B4B4 ); }

.bg-lighted
{ background: linear-gradient(to bottom right,#eeeeee,#aaaaaa ); } 

 /* foreground colors ================================= */

.fg-hide   { display: none; } 

.fg-white  { color: white;   } 
.fg-mist   { color: #E8E8E8; } 
.fg-silver { color: silver;  } 
.fg-gray   { color: gray;    } 
.fg-black  { color: black;   } 

.fg-cream  { color: #ffffcc; }
.fg-lemon  { color: #FFF99C; }
.fg-yellow { color: yellow;  } 
.fg-orange { color: orange;  } 
.fg-pink   { color: #FFB0B0; } 
.fg-red    { color: red; } 

.fg-sky    { color: #bbeeff; } 
.fg-aqua   { color: aqua;    } 
.fg-teal   { color: #33cccc; }
.fg-blue   { color: blue;    } 
.fg-navy   { color: navy;    } 

.fg-lavender { color: lavender; }
.fg-purple   { color: #9999ff;  }
.fg-grape    { color: #6666cc;  }

.fg-pea    { color: #ccff99; }
.fg-green  { color: green;   } 
.fg-forest { color: #005000; } 

/* automatic foregrounds ================================= */

.bg-white { color: black; }

.bg-white a:link    { color:#0000bb; text-decoration:none;   }
.bg-white a:visited { color:#0000bb; text-decoration:none;   }
.bg-white a:hover   { color:red; text-decoration:underline;  }
.bg-white a:active  { color:blue; text-decoration:underline; }

.bg-black,  .bg-black *,
.bg-navy,   .bg-navy *,
.bg-red,    .bg-red *,
.bg-forest, .bg-forest *,
.bg-ocean   .bg-ocean * 
{ color: white !important; }

.bg-black  a,
.bg-navy   a,
.bg-red    a,
.bg-forest a,
.bg-ocean  a 
{ color: silver !important; }

.bg-black  a:hover,
.bg-navy   a:hover,
.bg-red    a:hover,
.bg-forest a:hover,
.bg-ocean  a:hover 
{ color: #FFB0B0 !important; } /* pink */

/* borders ================================= */

.bo-none  { border-style: none !important; }

.bo-black   { border:  1px solid black !important; }
.bo-black2  { border:  2px solid black !important; }
.bo-black5  { border:  5px solid black !important; }
.bo-black10 { border: 10px solid black !important; }
.bo-black20 { border: 20px solid black !important; }

.bo-red   { border:  1px solid red !important; }
.bo-red2  { border:  2px solid red !important; }
.bo-red5  { border:  5px solid red !important; }
.bo-red10 { border: 10px solid red !important; }
.bo-red20 { border: 20px solid red !important; }

.bo-silver    { border:  1px solid silver !important; }
.bo-silver2   { border:  2px solid silver !important; }
.bo-silver5   { border:  5px solid silver !important; }
.bo-silver10  { border: 10px solid silver !important; }
.bo-silver20  { border: 20px solid silver !important; }

.bo-gray    { border:  1px solid gray !important; }
.bo-gray2   { border:  2px solid gray !important; }
.bo-gray5   { border:  5px solid gray !important; }
.bo-gray10  { border: 10px solid gray !important; }
.bo-gray20  { border: 20px solid gray !important; }

.bo-white   { border:  1px solid white !important; }
.bo-white2  { border:  2px solid white !important; }
.bo-white5  { border:  5px solid white !important; }
.bo-white10 { border: 10px solid white !important; }
.bo-white20 { border: 20px solid white !important; }

.outline img, img.outline { border: 1px solid black; }

/* corners ================================= */

.cr-0  { border-radius:  0px !important; }
.cr-3  { border-radius:  3px !important; }
.cr-5  { border-radius:  5px !important; }
.cr-10 { border-radius: 10px !important; }

/* shadows ================================= */

.sh-0 { box-shadow:0px 0px 0px transparent !important; }
.sh-3 { box-shadow:3px 3px 5px gray;  margin-bottom:3px !important; }
.sh-5 { box-shadow:5px 5px 10px gray; margin-bottom:5px !important; }

/* margins ================================= */

.mg-0   { margin: 0;    } 
.mg-5   { margin: 5px;  } 
.mg-10  { margin: 10px; } 
.mg-15  { margin: 15px; } 
.mg-20  { margin: 20px; } 
.mg-25  { margin: 25px; } 
.mg-30  { margin: 30px; } 
.mg-35  { margin: 35px; } 
.mg-50  { margin: 50px; } 

.mgl-0   { margin-left: 0;} 
.mgl-5   { margin-left: 5px;  } 
.mgl-10  { margin-left: 10px; } 
.mgl-15  { margin-left: 15px; } 
.mgl-20  { margin-left: 20px; } 
.mgl-25  { margin-left: 25px; } 
.mgl-30  { margin-left: 30px; } 
.mgl-35  { margin-left: 35px; } 
.mgl-50  { margin-left: 50px; } 
 
.mgr-0   { margin-right: 0;    } 
.mgr-5   { margin-right: 5px;  } 
.mgr-10  { margin-right: 10px; } 
.mgr-15  { margin-right: 15px; } 
.mgr-20  { margin-right: 20px; } 
.mgr-25  { margin-right: 25px; } 
.mgr-30  { margin-right: 30px; } 
.mgr-35  { margin-right: 35px; } 
.mgr-50  { margin-right: 50px; } 

.mgt-0   { margin-top: 0;    } 
.mgt-5   { margin-top: 5px;  } 
.mgt-10  { margin-top: 10px; } 
.mgt-15  { margin-top: 15px; } 
.mgt-20  { margin-top: 20px; } 
.mgt-25  { margin-top: 25px; } 
.mgt-30  { margin-top: 30px; } 
.mgt-35  { margin-top: 35px; } 
.mgt-50  { margin-top: 50px; } 

.mgb-0   { margin-bottom: 0;    } 
.mgb-5   { margin-bottom: 5px;  } 
.mgb-10  { margin-bottom: 10px; } 
.mgb-15  { margin-bottom: 15px; } 
.mgb-20  { margin-bottom: 20px; } 
.mgb-25  { margin-bottom: 25px; } 
.mgb-30  { margin-bottom: 30px; } 
.mgb-35  { margin-bottom: 35px; } 
.mgb-50  { margin-bottom: 50px; } 

/* paddings ================================= */

.pd-0   { padding: 0;    } 
.pd-5   { padding: 5px;  } 
.pd-10  { padding: 10px; } 
.pd-15  { padding: 15px; } 
.pd-20  { padding: 20px; } 
.pd-25  { padding: 25px; } 
.pd-30  { padding: 30px; } 
.pd-35  { padding: 35px; } 
.pd-50  { padding: 50px; } 

.pdl-0   { padding-left: 0;    } 
.pdl-5   { padding-left: 5px;  } 
.pdl-10  { padding-left: 10px; } 
.pdl-15  { padding-left: 15px; } 
.pdl-20  { padding-left: 20px; } 
.pdl-25  { padding-left: 25px; } 
.pdl-30  { padding-left: 30px; } 
.pdl-35  { padding-left: 35px; } 
.pdl-50  { padding-left: 50px; } 
 
.pdr-0   { padding-right: 0;    } 
.pdr-5   { padding-right: 5px;  } 
.pdr-10  { padding-right: 10px; } 
.pdr-15  { padding-right: 15px; } 
.pdr-20  { padding-right: 20px; } 
.pdr-25  { padding-right: 25px; } 
.pdr-30  { padding-right: 30px; } 
.pdr-35  { padding-right: 35px; } 
.pdr-50  { padding-right: 50px; } 

.pdt-0   { padding-top: 0;    } 
.pdt-5   { padding-top: 5px;  } 
.pdt-10  { padding-top: 10px; } 
.pdt-15  { padding-top: 15px; } 
.pdt-20  { padding-top: 20px; } 
.pdt-25  { padding-top: 25px; } 
.pdt-30  { padding-top: 30px; } 
.pdt-35  { padding-top: 35px; } 
.pdt-50  { padding-top: 50px; } 

.pdb-0   { padding-bottom: 0;} 
.pdb-5   { padding-bottom: 5px;  } 
.pdb-10  { padding-bottom: 10px; } 
.pdb-15  { padding-bottom: 15px; } 
.pdb-20  { padding-bottom: 20px; } 
.pdb-25  { padding-bottom: 25px; } 
.pdb-30  { padding-bottom: 30px; } 
.pdb-35  { padding-bottom: 35px; } 
.pdb-50  { padding-bottom: 50px; }

/* soft widths ================================= */

.w-0    { max-width:   0px; margin-left:auto; margin-right:auto; }
.w-5    { max-width:   5px; margin-left:auto; margin-right:auto; }
.w-10   { max-width:  10px; margin-left:auto; margin-right:auto; }
.w-20   { max-width:  20px; margin-left:auto; margin-right:auto; }
.w-25   { max-width:  25px; margin-left:auto; margin-right:auto; }
.w-30   { max-width:  30px; margin-left:auto; margin-right:auto; }
.w-40   { max-width:  40px; margin-left:auto; margin-right:auto; }
.w-50   { max-width:  50px; margin-left:auto; margin-right:auto; }
.w-60   { max-width:  60px; margin-left:auto; margin-right:auto; }
.w-70   { max-width:  70px; margin-left:auto; margin-right:auto; }
.w-75   { max-width:  75px; margin-left:auto; margin-right:auto; }
.w-80   { max-width:  80px; margin-left:auto; margin-right:auto; }
.w-90   { max-width:  90px; margin-left:auto; margin-right:auto; }
.w-100  { max-width: 100px; margin-left:auto; margin-right:auto; }
.w-110  { max-width: 110px; margin-left:auto; margin-right:auto; }
.w-120  { max-width: 120px; margin-left:auto; margin-right:auto; }
.w-125  { max-width: 125px; margin-left:auto; margin-right:auto; }
.w-130  { max-width: 130px; margin-left:auto; margin-right:auto; }
.w-140  { max-width: 140px; margin-left:auto; margin-right:auto; }
.w-150  { max-width: 150px; margin-left:auto; margin-right:auto; }
.w-160  { max-width: 160px; margin-left:auto; margin-right:auto; }
.w-170  { max-width: 170px; margin-left:auto; margin-right:auto; }
.w-175  { max-width: 175px; margin-left:auto; margin-right:auto; }
.w-180  { max-width: 180px; margin-left:auto; margin-right:auto; }
.w-190  { max-width: 190px; margin-left:auto; margin-right:auto; }
.w-200  { max-width: 200px; margin-left:auto; margin-right:auto; }
.w-210  { max-width: 210px; margin-left:auto; margin-right:auto; }
.w-220  { max-width: 220px; margin-left:auto; margin-right:auto; }
.w-225  { max-width: 225px; margin-left:auto; margin-right:auto; }
.w-230  { max-width: 230px; margin-left:auto; margin-right:auto; }
.w-240  { max-width: 240px; margin-left:auto; margin-right:auto; }
.w-250  { max-width: 250px; margin-left:auto; margin-right:auto; }
.w-260  { max-width: 260px; margin-left:auto; margin-right:auto; }
.w-270  { max-width: 270px; margin-left:auto; margin-right:auto; }
.w-275  { max-width: 275px; margin-left:auto; margin-right:auto; }
.w-280  { max-width: 280px; margin-left:auto; margin-right:auto; }
.w-290  { max-width: 290px; margin-left:auto; margin-right:auto; }
.w-300  { max-width: 300px; margin-left:auto; margin-right:auto; }
.w-310  { max-width: 310px; margin-left:auto; margin-right:auto; }
.w-320  { max-width: 320px; margin-left:auto; margin-right:auto; }
.w-325  { max-width: 325px; margin-left:auto; margin-right:auto; }
.w-330  { max-width: 330px; margin-left:auto; margin-right:auto; }
.w-340  { max-width: 340px; margin-left:auto; margin-right:auto; }
.w-350  { max-width: 350px; margin-left:auto; margin-right:auto; }
.w-360  { max-width: 360px; margin-left:auto; margin-right:auto; }
.w-370  { max-width: 370px; margin-left:auto; margin-right:auto; }
.w-375  { max-width: 375px; margin-left:auto; margin-right:auto; }
.w-380  { max-width: 380px; margin-left:auto; margin-right:auto; }
.w-390  { max-width: 390px; margin-left:auto; margin-right:auto; }
.w-400  { max-width: 400px; margin-left:auto; margin-right:auto; }
.w-410  { max-width: 410px; margin-left:auto; margin-right:auto; }
.w-420  { max-width: 420px; margin-left:auto; margin-right:auto; }
.w-425  { max-width: 425px; margin-left:auto; margin-right:auto; }
.w-430  { max-width: 430px; margin-left:auto; margin-right:auto; }
.w-440  { max-width: 440px; margin-left:auto; margin-right:auto; }
.w-450  { max-width: 450px; margin-left:auto; margin-right:auto; }
.w-460  { max-width: 460px; margin-left:auto; margin-right:auto; }
.w-470  { max-width: 470px; margin-left:auto; margin-right:auto; }
.w-475  { max-width: 475px; margin-left:auto; margin-right:auto; }
.w-480  { max-width: 480px; margin-left:auto; margin-right:auto; }
.w-490  { max-width: 490px; margin-left:auto; margin-right:auto; }
.w-500  { max-width: 500px; margin-left:auto; margin-right:auto; }
.w-520  { max-width: 520px; margin-left:auto; margin-right:auto; }
.w-525  { max-width: 525px; margin-left:auto; margin-right:auto; }
.w-530  { max-width: 530px; margin-left:auto; margin-right:auto; }
.w-540  { max-width: 540px; margin-left:auto; margin-right:auto; }
.w-550  { max-width: 550px; margin-left:auto; margin-right:auto; }
.w-560  { max-width: 560px; margin-left:auto; margin-right:auto; }
.w-570  { max-width: 570px; margin-left:auto; margin-right:auto; }
.w-575  { max-width: 575px; margin-left:auto; margin-right:auto; }
.w-580  { max-width: 580px; margin-left:auto; margin-right:auto; }
.w-590  { max-width: 590px; margin-left:auto; margin-right:auto; }
.w-600  { max-width: 600px; margin-left:auto; margin-right:auto; }
.w-610  { max-width: 610px; margin-left:auto; margin-right:auto; }
.w-620  { max-width: 620px; margin-left:auto; margin-right:auto; }
.w-630  { max-width: 630px; margin-left:auto; margin-right:auto; }
.w-640  { max-width: 640px; margin-left:auto; margin-right:auto; }
.w-650  { max-width: 650px; margin-left:auto; margin-right:auto; }

.w-0p   { max-width:  0%; margin-left:auto; margin-right:auto; }
.w-05p  { max-width:  5%; margin-left:auto; margin-right:auto; }
.w-10p  { max-width: 10%; margin-left:auto; margin-right:auto; }
.w-11p  { max-width: 11%; margin-left:auto; margin-right:auto; }
.w-12p  { max-width: 12%; margin-left:auto; margin-right:auto; }
.w-15p  { max-width: 15%; margin-left:auto; margin-right:auto; }
.w-16p  { max-width: 16%; margin-left:auto; margin-right:auto; }
.w-17p  { max-width: 17%; margin-left:auto; margin-right:auto; }
.w-20p  { max-width: 20%; margin-left:auto; margin-right:auto; }
.w-22p  { max-width: 22%; margin-left:auto; margin-right:auto; }
.w-25p  { max-width: 25%; margin-left:auto; margin-right:auto; }
.w-35p  { max-width: 35%; margin-left:auto; margin-right:auto; }
.w-40p  { max-width: 40%; margin-left:auto; margin-right:auto; }
.w-45p  { max-width: 45%; margin-left:auto; margin-right:auto; }
.w-50p  { max-width: 50%; margin-left:auto; margin-right:auto; }
.w-55p  { max-width: 55%; margin-left:auto; margin-right:auto; }
.w-60p  { max-width: 60%; margin-left:auto; margin-right:auto; }
.w-65p  { max-width: 65%; margin-left:auto; margin-right:auto; }
.w-70p  { max-width: 70%; margin-left:auto; margin-right:auto; }
.w-75p  { max-width: 75%; margin-left:auto; margin-right:auto; }
.w-80p  { max-width: 80%; margin-left:auto; margin-right:auto; }
.w-85p  { max-width: 85%; margin-left:auto; margin-right:auto; }
.w-90p  { max-width: 90%; margin-left:auto; margin-right:auto; }
.w-95p  { max-width: 95%; margin-left:auto; margin-right:auto; }
.w-100p { max-width: 100%; margin-left:auto; margin-right:auto; }

.w-33p
{ max-width: 33.333%; margin-left:auto; margin-right:auto; }

.w-66p
{ max-width: 66.667%; margin-left:auto; margin-right:auto; }

/* hard widths ================================= */

.w-0f    { width:   0px; margin-left:auto; margin-right:auto; }
.w-5f    { width:   5px; margin-left:auto; margin-right:auto; }
.w-10f   { width:  10px; margin-left:auto; margin-right:auto; }
.w-20f   { width:  20px; margin-left:auto; margin-right:auto; }
.w-25f   { width:  25px; margin-left:auto; margin-right:auto; }
.w-30f   { width:  30px; margin-left:auto; margin-right:auto; }
.w-40f   { width:  40px; margin-left:auto; margin-right:auto; }
.w-50f   { width:  50px; margin-left:auto; margin-right:auto; }
.w-60f   { width:  60px; margin-left:auto; margin-right:auto; }
.w-70f   { width:  70px; margin-left:auto; margin-right:auto; }
.w-75f   { width:  75px; margin-left:auto; margin-right:auto; }
.w-80f   { width:  80px; margin-left:auto; margin-right:auto; }
.w-90f   { width:  90px; margin-left:auto; margin-right:auto; }
.w-100f  { width: 100px; margin-left:auto; margin-right:auto; }
.w-110f  { width: 110px; margin-left:auto; margin-right:auto; }
.w-120f  { width: 120px; margin-left:auto; margin-right:auto; }
.w-125f  { width: 125px; margin-left:auto; margin-right:auto; }
.w-130f  { width: 130px; margin-left:auto; margin-right:auto; }
.w-140f  { width: 140px; margin-left:auto; margin-right:auto; }
.w-150f  { width: 150px; margin-left:auto; margin-right:auto; }
.w-160f  { width: 160px; margin-left:auto; margin-right:auto; }
.w-170f  { width: 170px; margin-left:auto; margin-right:auto; }
.w-175f  { width: 175px; margin-left:auto; margin-right:auto; }
.w-180f  { width: 180px; margin-left:auto; margin-right:auto; }
.w-190f  { width: 190px; margin-left:auto; margin-right:auto; }
.w-200f  { width: 200px; margin-left:auto; margin-right:auto; }
.w-210f  { width: 210px; margin-left:auto; margin-right:auto; }
.w-220f  { width: 220px; margin-left:auto; margin-right:auto; }
.w-225f  { width: 225px; margin-left:auto; margin-right:auto; }
.w-230f  { width: 230px; margin-left:auto; margin-right:auto; }
.w-240f  { width: 240px; margin-left:auto; margin-right:auto; }
.w-250f  { width: 250px; margin-left:auto; margin-right:auto; }
.w-260f  { width: 260px; margin-left:auto; margin-right:auto; }
.w-270f  { width: 270px; margin-left:auto; margin-right:auto; }
.w-275f  { width: 275px; margin-left:auto; margin-right:auto; }
.w-280f  { width: 280px; margin-left:auto; margin-right:auto; }
.w-290f  { width: 290px; margin-left:auto; margin-right:auto; }
.w-300f  { width: 300px; margin-left:auto; margin-right:auto; }
.w-310f  { width: 310px; margin-left:auto; margin-right:auto; }
.w-320f  { width: 320px; margin-left:auto; margin-right:auto; }
.w-325f  { width: 325px; margin-left:auto; margin-right:auto; }
.w-330f  { width: 330px; margin-left:auto; margin-right:auto; }
.w-340f  { width: 340px; margin-left:auto; margin-right:auto; }
.w-350f  { width: 350px; margin-left:auto; margin-right:auto; }
.w-360f  { width: 360px; margin-left:auto; margin-right:auto; }
.w-370f  { width: 370px; margin-left:auto; margin-right:auto; }
.w-375f  { width: 375px; margin-left:auto; margin-right:auto; }
.w-380f  { width: 380px; margin-left:auto; margin-right:auto; }
.w-390f  { width: 390px; margin-left:auto; margin-right:auto; }
.w-400f  { width: 400px; margin-left:auto; margin-right:auto; }
.w-410f  { width: 410px; margin-left:auto; margin-right:auto; }
.w-420f  { width: 420px; margin-left:auto; margin-right:auto; }
.w-425f  { width: 425px; margin-left:auto; margin-right:auto; }
.w-430f  { width: 430px; margin-left:auto; margin-right:auto; }
.w-440f  { width: 440px; margin-left:auto; margin-right:auto; }
.w-450f  { width: 450px; margin-left:auto; margin-right:auto; }
.w-460f  { width: 460px; margin-left:auto; margin-right:auto; }
.w-470f  { width: 470px; margin-left:auto; margin-right:auto; }
.w-475f  { width: 475px; margin-left:auto; margin-right:auto; }
.w-480f  { width: 480px; margin-left:auto; margin-right:auto; }
.w-490f  { width: 490px; margin-left:auto; margin-right:auto; }
.w-500f  { width: 500px; margin-left:auto; margin-right:auto; }
.w-520f  { width: 520px; margin-left:auto; margin-right:auto; }
.w-525f  { width: 525px; margin-left:auto; margin-right:auto; }
.w-530f  { width: 530px; margin-left:auto; margin-right:auto; }
.w-540f  { width: 540px; margin-left:auto; margin-right:auto; }
.w-550f  { width: 550px; margin-left:auto; margin-right:auto; }
.w-560f  { width: 560px; margin-left:auto; margin-right:auto; }
.w-570f  { width: 570px; margin-left:auto; margin-right:auto; }
.w-575f  { width: 575px; margin-left:auto; margin-right:auto; }
.w-580f  { width: 580px; margin-left:auto; margin-right:auto; }
.w-590f  { width: 590px; margin-left:auto; margin-right:auto; }
.w-600f  { width: 600px; margin-left:auto; margin-right:auto; }
.w-610f  { width: 610px; margin-left:auto; margin-right:auto; }
.w-620f  { width: 620px; margin-left:auto; margin-right:auto; }
.w-630f  { width: 630px; margin-left:auto; margin-right:auto; }
.w-640f  { width: 640px; margin-left:auto; margin-right:auto; }
.w-650f  { width: 650px; margin-left:auto; margin-right:auto; }

.w-0pf   { width:  0%; margin-left:auto; margin-right:auto; }
.w-05pf  { width:  5%; margin-left:auto; margin-right:auto; }
.w-10pf  { width: 10%; margin-left:auto; margin-right:auto; }
.w-11pf  { width: 11%; margin-left:auto; margin-right:auto; }
.w-12pf  { width: 12%; margin-left:auto; margin-right:auto; }
.w-15pf  { width: 15%; margin-left:auto; margin-right:auto; }
.w-16pf  { width: 16%; margin-left:auto; margin-right:auto; }
.w-17pf  { width: 17%; margin-left:auto; margin-right:auto; }
.w-20pf  { width: 20%; margin-left:auto; margin-right:auto; }
.w-22pf  { width: 22%; margin-left:auto; margin-right:auto; }
.w-25pf  { width: 25%; margin-left:auto; margin-right:auto; }
.w-35pf  { width: 35%; margin-left:auto; margin-right:auto; }
.w-40pf  { width: 40%; margin-left:auto; margin-right:auto; }
.w-45pf  { width: 45%; margin-left:auto; margin-right:auto; }
.w-50pf  { width: 50%; margin-left:auto; margin-right:auto; }
.w-55pf  { width: 55%; margin-left:auto; margin-right:auto; }
.w-60pf  { width: 60%; margin-left:auto; margin-right:auto; }
.w-65pf  { width: 65%; margin-left:auto; margin-right:auto; }
.w-70pf  { width: 70%; margin-left:auto; margin-right:auto; }
.w-75pf  { width: 75%; margin-left:auto; margin-right:auto; }
.w-80pf  { width: 80%; margin-left:auto; margin-right:auto; }
.w-85pf  { width: 85%; margin-left:auto; margin-right:auto; }
.w-90pf  { width: 90%; margin-left:auto; margin-right:auto; }
.w-95pf  { width: 95%; margin-left:auto; margin-right:auto; }
.w-100pf { width: 100%; margin-left:auto; margin-right:auto; }

.w-33pf { width: 33.333%; margin-left:auto; margin-right:auto; }
.w-66pf { width: 66.667%; margin-left:auto; margin-right:auto; }

A lot of this is pretty repetitive, like all the width specifications. But it is handy to have many useful widths pre-defined. Pre-defining useful css classes and then using them is the opposite of the way most web designers work. Most web designers make up new classes as the need arises, willy-nilly, with the result that you end up with dozens of redundant classes that all do the same thing, * or more likely, almost but not-quite the same thing. The end result is hundreds of classes overall, if not thousands. The css gets huge, until eventually the poor program that has to parse the whole mess crashes. The worst case of this is epubs ( which are really self-contained websites ) generated by the Calibre program. Oh my god!

* Did you notice I'm being redundant?

A benefit of pre-defining CSS and then sticking to it is that you end up with much more consistent formatting. Have you ever wondered why much of the internet looks like it was done by a third-grader? In fact, this is the way CSS was intended to be used, and most web designers are actually using it wrong!


image

I stumbled across this stuff online, and it looked so incredible that I impulse-bought a quart. A finish that you can smear on with a sponge and cure in 3 minutes with sunshine? That cuts finishing time from months to weeks to one day !!!

Printed from luthierylabs.com