Need some sort of breakpoint utility classes for margin/padding add/remove CSS.
/*
**
** File: layout.css
** Created: 04/27/08
** Modified: 01/25/09
** Creator: Micky Hulse
** Author: Micky Hulse
**
*/
/*----------( PRIMARY LAYOUT/STRUCTURE: )---------*/
/*
**
** The Register-Guard v3.5 Grid:
** http://assets.registerguard.com/v3.5/docs/grids.html
**
*/
/*
**
** Browser support charts for multiple classes applied to one element:
** http://www.pixelsurge.com/experiment/multiplestyles.htm
**
*/
/* Master container: */
.c1010 { width: 1010px; }
/* Base width: */
.c990 { width: 990px; }
/* 990->630/350_base: */
.c630 { width: 630px; }
.c502 { width: 502px; }
.c470 { width: 470px; }
.c374 { width: 374px; }
.c350 { width: 350px; }
.c310 { width: 310px; }
.c246 { width: 246px; }
.c230 { width: 230px; }
.c182 { width: 182px; }
.c170 { width: 170px; }
.c150 { width: 150px; }
.c118 { width: 118px; }
.c110 { width: 110px; }
/* 990->650/330_base: */
.c650 { width: 650px; }
.c518 { width: 518px; }
.c485 { width: 485px; }
.c386 { width: 386px; }
.c330 { width: 330px; }
.c320 { width: 320px; }
.c254 { width: 254px; }
.c210 { width: 210px; }
.c166 { width: 166px; }
.c160 { width: 160px; }
.c155 { width: 155px; }
.c122 { width: 122px; }
.c100 { width: 100px; }
/* 990->680/300_base: */
.c680 { width: 680px; }
.c542 { width: 542px; }
.c450 { width: 450px; }
.c404 { width: 404px; }
.c335 { width: 335px; }
.c300 { width: 300px; }
.c266 { width: 266px; }
.c220 { width: 220px; }
.c197 { width: 197px; }
.c174 { width: 174px; }
.c145 { width: 145px; }
.c128 { width: 128px; }
/* 990_split: */
.c865 { width: 865px; }
.c740 { width: 740px; }
.c615 { width: 615px; }
.c490 { width: 490px; }
.c365 { width: 365px; }
.c240 { width: 240px; }
.c165 { width: 165px; }
.c140 { width: 140px; }
.c115 { width: 115px; }
/*
**
** For fluid, evenly split, columns.
** Just float left/right and you're good.
**
*/
.c49p { width: 49%; }
.c48p { width: 48%; }
.c47p { width: 47%; }
.c46p { width: 46%; }
.c45p { width: 45%; }
/* Flexible inner-column layouts (add more as needed): */
/* Fluid on right: */
.f_ml300 { margin-left: 300px; }
.f_ml160 { margin-left: 160px; }
.f_ml140 { margin-left: 140px; }
.f_ml135 { margin-left: 135px; }
.f_ml110 { margin-left: 110px; }
.f_ml85 { margin-left: 85px; }
.f_ml70 { margin-left: 70px; }
.f_ml60 { margin-left: 60px; }
/* Fix IE: */
* html .f_ml300,
* html .f_ml160,
* html .f_ml140,
* html .f_ml135,
* html .f_ml110,
* html .f_ml85,
* html .f_ml70,
* html .f_ml60 {
height: 1%;
margin: 0;
}
/* Fluid on left: */
.f_mr300 { margin-right: 300px; }
.f_mr160 { margin-right: 160px; }
.f_mr140 { margin-right: 140px; }
.f_mr135 { margin-right: 135px; }
.f_mr110 { margin-right: 110px; }
.f_mr85 { margin-right: 85px; }
.f_mr70 { margin-right: 70px; }
.f_mr60 { margin-right: 60px; }
/* Fix IE: */
* html .f_mr300,
* html .f_mr160,
* html .f_mr140,
* html .f_mr135,
* html .f_mr110,
* html .f_mr85,
* html .f_mr70,
* html .f_mr60 {
height: 1%;
margin: 0;
}
/* Static widths (10px less than fluid margins for gutter -- don't forget to float!): */
/* Note: If you decide to float right, use below class with "r". If you float left, use below class with "l". */
.f_c290r,
.f_c290l { width: 290px; }
.f_c150r,
.f_c150l { width: 150px; }
.f_c130r,
.f_c130l { width: 130px; }
.f_c125r,
.f_c125l { width: 125px; }
.f_c100r,
.f_c100l { width: 100px; }
.f_c75r,
.f_c75l { width: 75px; }
.f_c60r,
.f_c60l { width: 60px; }
.f_c50r,
.f_c50l { width: 50px; }
/* Fix IE: */
/* Right-margin: */
* html .f_c290r,
* html .f_c150r,
* html .f_c130r,
* html .f_c125r,
* html .f_c100r,
* html .f_c75r,
* html .f_c60r,
* html .f_c50r { margin-left: 7px; }
/* Left-margin: */
* html .f_c290l,
* html .f_c150l,
* html .f_c130l,
* html .f_c125l,
* html .f_c100l,
* html .f_c75l,
* html .f_c60l,
* html .f_c50l { margin-right: 7px; }
/*----------( UTILITY: )---------*/
/*
** Floats:
*/
/*
** All versions of InternetExplorer suffer from the DoubleMarginBug.
** Floats magically acquire excess margin, or their internal elements do.
** The fix is remarkably simple: apply the rule display: inline to the floated element.
** This has no meaning to other browsers, since floating an element automatically forces its display value to be "block".
** Ref: "Bugs" <http://css-discuss.incutio.com/?page=FloatedBlock>
*/
/* Left floats: */
.fl {
float: left;
display: inline;
}
/* Right floats: */
.fr {
float: right;
display: inline;
}
/*
** Positioning:
*/
/* Absolute: */
.pa { position: absolute; }
/* Relative: */
.pr { position: relative; }
/* Static: */
.ps { position: static; }
/* Utility margin-giving classes: */
/* TOP: */
.mt05 { margin-top: 5px; }
.mt10 { margin-top: 10px; }
.mt15 { margin-top: 15px; }
.mt20 { margin-top: 20px; }
/* RIGHT: */
.mr05 { margin-right: 5px; }
.mr10 { margin-right: 10px; }
.mr15 { margin-right: 15px; }
.mr20 { margin-right: 20px; }
/* BOTTOM: */
.mb05 { margin-bottom: 5px; }
.mb10 { margin-bottom: 10px; }
.mb15 { margin-bottom: 15px; }
.mb20 { margin-bottom: 20px; }
/* LEFT: */
.ml05 { margin-left: 5px; }
.ml10 { margin-left: 10px; }
.ml15 { margin-left: 15px; }
.ml20 { margin-left: 20px; }
/* RIGHT/LEFT: */
.mrl05 { margin: 0 5px; }
.mrl10 { margin: 0 10px; }
.mrl15 { margin: 0 15px; }
.mrl20 { margin: 0 20px; }
/* TOP/BOTTOM: */
.mtb05 { margin: 5px 0; }
.mtb10 { margin: 10px 0; }
.mtb15 { margin: 15px 0; }
.mtb20 { margin: 20px 0; }
/* TOP/RIGHT/BOTTOM/LEFT: */
.mtrbl05 { margin: 5px; }
.mtrbl10 { margin: 10px; }
.mtrbl15 { margin: 15px; }
.mtrbl20 { margin: 20px; }
/* AUTO: */
.am {
margin-right: auto;
margin-left: auto;
}
/* Remove margins: */
/* TOP: */
.nomt { margin-top: 0 !important; }
/* RIGHT: */
.nomr { margin-right: 0 !important; }
/* BOTTOM: */
.nomb { margin-bottom: 0 !important; }
/* LEFT: */
.noml { margin-left: 0 !important; }
/* RIGHT/LEFT: */
.nomrl { margin-right: 0 !important; }
.nomrl { margin-left: 0 !important; }
/* TOP/BOTTOM: */
.nomtb { margin-top: 0 !important; }
.nomtb { margin-bottom: 0 !important; }
/* TOP/RIGHT/BOTTOM/LEFT: */
.nm { margin: 0 !important; }
/* Utility padding-giving classes: */
/* TOP: */
.pt05 { padding-top: 5px; }
.pt10 { padding-top: 10px; }
.pt15 { padding-top: 15px; }
.pt20 { padding-top: 20px; }
/* RIGHT: */
.pr05 { padding-right: 5px; }
.pr10 { padding-right: 10px; }
.pr15 { padding-right: 15px; }
.pr20 { padding-right: 20px; }
/* BOTTOM: */
.pb05 { padding-bottom: 5px; }
.pb10 { padding-bottom: 10px; }
.pb15 { padding-bottom: 15px; }
.pb20 { padding-bottom: 20px; }
/* LEFT: */
.pl05 { padding-left: 5px; }
.pl10 { padding-left: 10px; }
.pl15 { padding-left: 15px; }
.pl20 { padding-left: 20px; }
/* RIGHT/LEFT: */
.prl05 { padding: 0 5px; }
.prl10 { padding: 0 10px; }
.prl15 { padding: 0 15px; }
.prl20 { padding: 0 20px; }
/* TOP/BOTTOM: */
.ptb05 { padding: 0 5px; }
.ptb10 { padding: 0 10px; }
.ptb15 { padding: 0 15px; }
.ptb20 { padding: 0 20px; }
/* TOP/RIGHT/BOTTOM/LEFT: */
.ptrbl05 { padding: 5px; }
.ptrbl10 { padding: 10px; }
.ptrbl15 { padding: 15px; }
.ptrbl20 { padding: 20px; }
/* Remove padding: */
/* TOP: */
.nopt { padding-top: 0 !important; }
/* RIGHT: */
.nopr { padding-right: 0 !important; }
/* BOTTOM: */
.nopb { padding-bottom: 0 !important; }
/* LEFT: */
.nopl { padding-left: 0 !important; }
/* RIGHT/LEFT: */
.noprl { padding-right: 0 !important; }
.noprl { padding-left: 0 !important; }
/* TOP/BOTTOM: */
.noptb { padding-top: 0 !important; }
.noptb { padding-bottom: 0 !important; }
/* TOP/RIGHT/BOTTOM/LEFT: */
.np { padding: 0 !important; }
/* Hide certain elements for browsers without CSS: */
.hide, hr { display: none !important; }
/* Hiding of elements for assistive devices (screen readers etc): */
.off {
position: absolute;
left: -999em;
top: -999em;
}
/*----------( CLEARING: )---------*/
/* Specify clears: */
.clear:after {
height: 0;
display: block;
clear: both;
content: '.';
visibility: hidden;
} /* Clears non-IE. */
/* SEE ie-all.css for IE-specific css. */
/* Clearing div (oldschool): */
div.clearer {
font-size: 0 !important; /* Set the font-size to 0 so it isn't visible */
line-height: 0 !important; /* Set the line-height to 0 so it isn't visible */
border: 0 !important; /* Remove all borders that would make it visible */
margin: 0 !important; /* Remove all margins that would make it visible */
padding: 0 !important; /* Remove all padding that would make it visible */
height: 0.1px !important; /* Mozilla/Firefox require the clearer height to not be 0, but rounding makes it 0 */
float: none !important; /* Remove any inherited floats */
display: block !important; /* Make sure our element is a block-level element */
clear: both !important; /* Make sure it clears on both sides */
}
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent