Basic Stylesheet

My starter stylesheet when starting new projects:

/******

Template information:

black: #000000; 0,0,0;
yellow: #d1a21e; 209,162,20
light blue: #7d8798; 125,135,152
dark blue: #37627a; 55,98,122
white: #ffffff; 255,255,255

font-family: "Font-Name",sans-serif;

*******/




/***** General Styles *****/

html {overflow-x: hidden;}

body {
 font-family: "Font-Name",sans-serif;
 font-weight: lighter;
 -webkit-font-smoothing: antialiased;
 -moz-font-smoothing: antialiased;
 -o-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
}



h1, h2, h3, h4, h5, h6 {
 font-family: "Font-Name",sans-serif;
 line-height: 1.25em;
 margin: 0 0 .5em;
 font-weight: bold;
 color: #37627F;
 -webkit-font-smoothing: antialiased;
 -moz-font-smoothing: antialiased;
 -o-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale; 
}


p, ul, ol, dd, pre, hr, table, form, select, address, embed {
 margin: 0 0 .5em;
 line-height: 1.25em;
}





img {
 max-width: 100%;
 height: auto;
}




a,
a:link,
a:visited {
 color: #37627a;
 text-decoration: none;
}

a:active,
a:focus {
 outline: none;
 border: none;
 -moz-outline-style: none;
}

a:hover,
a:active {opacity: .7;}







/*** Header & Footer ***/






/*** Home Page ***/






/*** Subpages ***/

.wrap {
     position: relative;
     margin: 0 auto;
     max-width: 1150px;
}


.clear {
     position: relative;
     display: block;
     clear: both;
}
.alignnone,
.aligncenter {
	max-width: 1150px;
	margin: 0 auto;
	position: relative;
}
.alignwide {
	max-width: 1280px;
	margin: 0 auto;
	position: relative;
}
.alignfull {
	margin: 0 calc(50% - 50vw);
	max-width: 100vw;
	width: 100vw;
	position: relative;
}
.alignfull img {
	width: 100vw;
}


.page-content, 
.entry-content, 
.entry-summary,
.hentry {margin: 0;}


/* Responsive */

.mobile {display: none;}



/* Internet Explorer */

@supports (-ms-ime-align:auto) { /* Edge / IE 12+ */
   
 
 
}


@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { /** IE 10 & 11 **/
 
 
 
}



@media screen and (min-width:0\0) { /* IE 9 */
 
 
 
}

Leave a Reply

Posted in CSS
katherine as a flat graphic icon

About Me

I’m an African / Ojibwe First Nations Web Developer living in Winnipeg, Manitoba.

Visit the Tips and Blog to see what I’m working on.