Tag: CSS

Thomas Byttebier – Less CSS mess

TheSmithy

Thomas Byttebier is a freelance web designer creating minimalist and easy to use websites and user interfaces. Thomas lives and works in Gent, Belgium.

Source: Thomas Byttebier – Less CSS mess

Using much of the killer coding philosophies of CSS wizard Harry Roberts, I found a way that’s helped me keep the CSS for the web app I’m currently working on manageable, understandable and above all: highly reusable. And as the app keeps evolving, the CSS doesn’t get more complex. At most it only gets bigger, but that’s ok.

There’s basically 5 things that helped me shape up the way I code my designs enormously:

  1. coding guidelines
  2. itcss
  3. namespaced CSS
  4. BEM
  5. and documentation in a front-end style guide.

Let me go over each of them briefly in the next paragraphs.

Fonts

TheSmithy

Source: awwwards.com/20-best-web-fonts-from-google-web-fonts-and-font-face

Basically, there are two implementation models:

1. Web font embedding services

2. Embedding fonts using the @font-face rule

Web font embedding services

Google Web Fonts (GWF) or Typekit are systems which allow the use of fonts hosted on their servers. One of the most valued characteristics of GWF is the option to download a desktop version of the fonts for use in the project design phase. Read More

CSS tricks

TheSmithy

Vertical align anything with just 3 lines of CSS

source http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/

.element {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

It is a similar technique to the absolute-position method, but with the upside that we don’t have to set any height on the element or position-property on the parent. It works straight out of the box, even in IE9.

To make it even more simple, we can write it as a mixin with its vendor prefixes:

@mixin vertical-align {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}
 
.element p {
  @include vertical-align;
}