/* === PRINCIPLES 1) We let the browser define the default font size (almost always 16px) - so in the reset the font-size is not active 2) Media queries in ems 3) All font sizes & spacing is in ems and these are not used in combination (no nested ems) - instead, if nesting is unavoidable, % is used on the nested element 4) All line heights are unitless Setting a height/width on a container in ems then any child container heights, line-heights and font-sizes set in ems will be relative to that initial value AND if you call a style with a font-size of anything other than 1em on a container then any dimensions set will be affected by THAT value SO... - setting a line-height ONLY and no height takes care of both the height and vertical alignment; and - nested font sizes (that need to be the same as other non-nested ones) need to be set in % ( unless we can use https://css-tricks.com/almanac/selectors/n/not/ ) 5) We aim to use pixel values for border lines only, HERE they have been used: - for form field borders; - for checkbox substitution - separators on CONTACT / ABOUT pages - boxes on JOBS ? 5) Style definitions are (hopefully) ordered by importance i.e. position, size etc before aesthetics 6) For mobile/global, all styles are declared, even if they are empty 7) When an 'equivalent' in pixels is given for any value in ems, this is at 1x pixel resolution /* === CSS reset */ a, abbr, acronym, address, applet, article, aside, audio, b, big, blockquote, body, button, canvas, caption, center, cite, code, dd, del, details, dfn, div, dl, dt, em, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, html, i, iframe, img, input, ins, kbd, label, legend, li, mark, menu, nav, object, ol, p, pre, q, s, samp, section, select, small, span, strike, strong, sub, summary, sup, table, tbody, td, textarea, tfoot, th, thead, time, tr, tt, u, ul, var, video { margin:0; padding:0; border:0; outline:0; vertical-align:baseline; font:inherit; font-size:1em; } table { border-collapse:collapse; border-spacing:0; } th { font-weight:normal; } article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section { display:block; } ol, ul { list-style:none; } ul li, ol li { list-style-position:inside; list-style-type:disc; } blockquote, q { quotes:none; } blockquote:before, blockquote:after, q:before, q:after { content:''; content:none; } i, em { font-style:italic; } b, strong { font-weight:bold; } .clear { display:block; clear:both; } /* === Box Sizing means that padding works INSIDE elements, so actual width or height = declared width or height */ html { -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; } /* DSG sets this below also */ *, *:before, *:after { -webkit-box-sizing:inherit; -moz-box-sizing:inherit; box-sizing:inherit; } /* === Dead Simple Grid (c) 2012 Vladimir Agafonkin understanding DSG - for full explanation, see https://github.com/mourner/dead-simple-grid 1) a col is the equivalent of a table cell inside a row, AND you can also layer rows inside a col 2) nested row elements get negative margin on the sides that corresponds to gutter padding of col elements (i.e. left and right), so you can nest rows inside columns infinitely without the padding adding up 3) each col is set at 100% width by default, you can then override as you wish as screens get bigger for a fluid layout at different breakpoints e.g. (a) one 100% col on 1st row, two 50% cols on 2nd row can become (b) three 33% cols on the same row */ .col { padding:0 0.625em; /* 10px equivalent */ } .row .row { margin:0 -0.625em; } .row:before, .row:after { content:""; display:table; } .row:after { clear:both; } @media only screen { .col { float:left; width:100%; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; } } /* === our FIRST / GLOBAL set of rules aimed at MOBILE and up */ /* custom fonts */ @font-face { font-family:'Lato'; src: url('fonts/lato-regular-webfont.woff') format('woff'), /* almost everything, including IE9 */ url('fonts/lato-regular-webfont.ttf') format('truetype'); /* for Android 4.1 & 4.3 */ } @font-face { font-family:'Bevan'; src: url('fonts/bevan-webfont.woff') format('woff'), url('fonts/bevan-webfont.ttf') format('truetype'); } body { font-family:'Lato', Verdana, sans-serif; line-height:1; background-color:#ffffff; /* #f8f8f8; */ color:#000000; } /* FORMS - reset: taken from https://gist.github.com/anthonyshort/552543 and https://github.com/Jossnaz/JossiCssReset no with
containing a for select and