somascope
4/29/2017 - 4:18 PM

CSS basic starter

CSS basic starter Use ems for margin, padding and border radius Use ems or rems for font size Use pixels for borders

For a more modern one: https://www.joshwcomeau.com/css/custom-css-reset/ Other: For H5BP, see: https://github.com/h5bp/html5-boilerplate/blob/master/dist/css/main.css

css-starter.css
content_copyfile_download
@import url('https://fonts.googleapis.com/css?family=Open+Sans');

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  background-color: #f9f9f9;
  color: #222;
  font-size: 1em;
  font-size: calc(1em + 1vw); /* responsive text */
  line-height: 1.4;
}

body {
  margin: 0;
}

img, video {
  /* !! Set width and height of images in HTML - they'll still be responsive here */
  border: 0;
  height: auto;
  width: 100%;
}

/* Clearfix if using floats for layouts */
.clearfix::before,
.clearfix::after {
  content: " ";
  display: table;
}
.clearfix::after {
  clear: both;
}

/* Spacing between bullets */
li:not(:last-child) {
  margin-bottom: 0.5em;
}

/* other things */
::selection {
  color: #000;
  background: #fbd404
}

/* lobotomized owl selector
targets any element that immediately follows any other element.
selects all elements on the page that aren’t the first child of their parent.
*/
body * + * {
  margin-top: 1.5em;
  /* You may need to apply margin-top: 0 to certain elements */
}

/* custom selectors */
/* Attribute selector example */
[class*="col-"] {
	flex: 0 0 92%;
	margin: 0 4%;
}
a[href^='mailto']::before {
  content: '📧 ';
}

a[href^='tel']::before {
  content: '📞 ';
}

a[href^='sms']::before {
  content: '💬 ';
}