Useful front-end snippets

A repository of code snippets I commonly use in my front-end work.

Base button styles

When using buttons for interfaces styles usually need to be reset from the default ones added by browsers. This block will render your button elements as if they were plain text.

button {
  appearance:none;
  background:transparent;
  border:0;
  padding:0;
  cursor:pointer;
  font:inherit;
  text-align:inherit;
}

button:active,
button:focus {
  outline:none;
}

Responsive Grid

Using negetive margins you can make a responsive grid without any :nth-child selectors.

.grid {
  width: auto;
  margin: -1em;
}
.grid-item {
  width: 25%;
  margin: 1em;
}

Stephen Cronin

aa aa aa aa aa aa