Useful Boilerplate For PureCSS

Categories

This post still working for you?

It's been a while since this was posted. Hopefully the information in here is still useful to you (if it isn't please let me know!). If you want to get the new stuff as soon as it's out though, sign up to the mailing list below.

Join the Mailing list

I very often use PureCSS because it’s a pretty reasonable “micro” CSS Framework and has some clean styling. There are lots of other options of course, like skeleton, but I generally find myself gravitating towards Pure for most projects. While working on projects of mine that use pure for styling though, I find myself adding some odds and ends to it, so I figured I might as well share:

/******************/
/* Pure Overrides */
/******************/

.pure-button.button-xsmall { font-size: 70%; }
.pure-button.button-small { font-size: 85%; }
.pure-button.button-large { font-size: 110%; }
.pure-button.button-xlarge { font-size: 125%; }

.pure-button.button-success,
.pure-button.button-error,
.pure-button.button-warning,
.pure-button.button-secondary,
.pure-button.button-theme-primary,
.pure-button.button-theme-secondary {
  color: white;
  border-radius: 4px;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}

.pure-button.button-success { background: rgb(28, 184, 65); } /* this is a green */
.pure-button.button-error {  background: rgb(202, 60, 60); } /* this is a maroon */
.pure-button.button-warning { background: rgb(223, 117, 20); } /* this is an orange */
.pure-button.button-secondary { background: rgb(66, 184, 221); } /* this is a light blue */
.pure-button.button-theme-primary { background-color: #285269; } /* the start turquoise */
.pure-button.button-theme-secondary { background-color: #E2C20F; } /* the start gold */

/* Cause buttons to the right of input to line up and look like they're the same */
.pure-button.right-of-input {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  margin-left: -3px;
}

.pure-button.button-circular { border-radius: 50%; }

form.pure-form .input-and-button > input,
form.pure-form .input-and-button > select {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

form.pure-form .input-and-button > button {
  margin-left: -6px;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  height: 2.3em;
  vertical-align: top;
}

.pure-menu-heading, .pure-menu-link.wrap-ok { white-space: normal; }

.break-word-wrap { word-wrap: break-word; }

@media only screen and (max-width: 480px) {
  .pure-button.right-of-input {
    margin-bottom: .3em; /* buttons must mimic input fields which do this in pure */
  }
}

.pure-visible-before-sm { display:none }
.pure-visible-before-md { display:none }
.pure-visible-before-lg { display:none }
.pure-visible-before-xl { display:none }

.pure-visible-after-sm { display:none }
.pure-visible-after-md { display:none }
.pure-visible-after-lg { display:none }
.pure-visible-after-xl { display:none }

@media screen and (min-width:568px) { /* sm */
  .pure-visible-after-sm { display: block; }

  .pure-visible-before-sm { display: none; }

  .pure-visible-before-md { display: block; }
  .pure-visible-before-lg { display: block; }
  .pure-visible-before-xl { display: block; }
}

@media screen and (min-width:768px) { /* md */
  .pure-visible-after-sm { display: block; }
  .pure-visible-after-md { display: block; }

  .pure-visible-before-sm { display: none; }
  .pure-visible-before-md { display: none; }

  .pure-visible-before-lg { display: block; }
  .pure-visible-before-xl { display: block; }
}

@media screen and (min-width:1024px) { /* lg */
 .pure-visible-after-sm { display: block; }
 .pure-visible-after-md { display: block; }
 .pure-visible-after-lg { display: block; }

 .pure-visible-before-sm { display: none; }
 .pure-visible-before-md { display: none; }
 .pure-visible-before-lg { display: none; }

 .pure-visible-before-xl { display: block; }
}

@media screen and (min-width:1280px) { /* xl+ */
  .pure-visible-after-sm { display: block; }
  .pure-visible-after-md { display: block; }
  .pure-visible-after-lg { display: block; }
  .pure-visible-after-xl { display: block; }
  .pure-visible-before-sm { display: none; }
  .pure-visible-before-md { display: none; }
  .pure-visible-before-lg { display: none; }
  .pure-visible-before-xl { display: none; }
 }

Hopefully this serves as a good reference for those who might want to extend PureCSS or find these classes useful in general.

Like what you're reading? Get it in your inbox