Skip to content

Instantly share code, notes, and snippets.

@joshuacerbito
Created August 30, 2023 11:38
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save joshuacerbito/70f3955f4ea0ea25a7bfda93d3a46d71 to your computer and use it in GitHub Desktop.
Save joshuacerbito/70f3955f4ea0ea25a7bfda93d3a46d71 to your computer and use it in GitHub Desktop.
This is a CSS file that I wrote back in 2013 and used on almost all of my FE projects for a couple of years. Does this approach look familiar? πŸ˜‚ For historical purposes only. DO NOT USE THIS
/*-------------------------------------------------*/
/*----------------- LAZY.CSS v1.0 -----------------*/
/*-------- Joshua Cerbito (@joshuacerbito) --------*/
/*-------------------------------------------------*/
/* RESET ALL CONTAINERS */
html, body, div, table, tbody, tfoot, thead, tr, th, td, fieldset, form, label, legend,
section, article, aside, header, footer, hgroup, nav, audio, video, canvas, figure, figcaption, time, menu, details
{
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
/* HTML5 DOM */
section, article, aside, header, footer, hgroup, nav, audio, video, canvas, figure, figcaption, time, menu, details
{
display: block;
}
/*********** JOSH CLASSES ***********/
/* DIMENSIONS */
.wide { width: 100%; }
.wrap { width: 980px; /* change width */ }
.high { height: 100%; }
/* DISPLAYS */
.static { display: static; }
.block { display: block; }
.inline { display: inline; }
.none { display: none; }
.inline-block { display: inline-block; }
/* FLOATS & FIXES */
.left { float: left; }
.right { float: right; }
.clear-left { clear: left; }
.clear-right { clear: right; }
.clear { clear: both; }
/* POSITIONS */
.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }
.offset-top { top: 0; }
.offset-bottom { bottom: 0; }
.offset-left { left: 0; }
.offset-right { right: 0; }
.offest-tl { top: 0; left: 0; }
.offest-tr { top: 0; right: 0; }
.offest-bl { bottom: 0; left: 0; }
.offest-br { bottom: 0; right: 0; }
/* MARGINS */
.alpha { margin-top: 0; }
.last { margin-right: 0; }
.omega { margin-bottom: 0; }
.first { margin-left: 0; }
.first-alpha { margin-left: 0; margin-top: 0; }
.first-omega { margin-left: 0; margin-bottom: 0; }
.last-alpha { margin-right: 0; margin-top: 0; }
.last-omega { margin-right: 0; margin-bottom: 0; }
.first-last { margin-left: 0; margin-right: 0; }
.alpha-omega { margin-top: 0; margin-bottom: 0; }
.nom { margin: 0; }
/* PADDINGS */
.p-alpha { padding-top: 0; }
.p-last { padding-right: 0; }
.p-omega { padding-bottom: 0; }
.p-first { padding-left: 0; }
.p-first-alpha { padding-left: 0; padding-top: 0; }
.p-first-omega { padding-left: 0; padding-bottom: 0; }
.p-last-alpha { padding-right: 0; padding-top: 0; }
.p-last-omega { padding-right: 0; padding-bottom: 0; }
.p-first-last { padding-left: 0; padding-right: 0; }
.p-alpha-omega { padding-top: 0; padding-bottom: 0; }
.nop { padding: 0; }
/* TEXTS */
.sans { font-family: sans-serif; }
.serif { font-family: serif; }
.sans-bold { font-family: sans-serif; font-weight: bold }
.serif-bold { font-family: serif; }
.text-left { text-align: left; }
.text-right { text-align: right; }
.text-center { text-align: center; }
.uppercase { text-transform: uppercase; }
.lowercase { text-transform: lowercase; }
.line-1 { line-height: 1; }
.nol { line-height: 0; }
/* MISC */
.no-list { list-style: none; }
.no-overflow { overflow: hidden; }
/*********** CSS3 ***********/
.text-shadow { /* change values */
-webkit-text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
-moz-text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
-o-text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
filter: dropshadow(color=#000000, offx=1, offy=1);
}
.box-shadow { /* change values */
-webkit-box-shadow: 0px 3px 4px 0px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0px 3px 4px 0px rgba(0, 0, 0, 0.1);
-o-box-shadow: 0px 3px 4px 0px rgba(0, 0, 0, 0.1);
box-shadow: 0px 3px 4px 0px rgba(0, 0, 0, 0.1);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment