14. Dezember 2015

CSS Crush – A standards inspired CSS pre-processor in PHP

CSS Crush is a standards inspired CSS pre-processor that is written in PHP from scratch.

MAIN FEATURES

Auto-prefixing
Variables
Direct @import
Nesting
Rule inheritance
Abstract rules
Functions
Selector grouping
Selector aliases
Mixins
Fragments

For a current project I am adding CSS Crush side by side to Sass. Lets see which of them sticks around in the end :) Might be keeping them both, as CSS Crush provides some nice options.

CSS Crush @ Github

Enjoy coding …

9. Dezember 2015

Sass Mixin obsession

Since completely moving to Sass, I am really obsessed to make my work easier :) There are many Mixins that really help to speedup development and remove some of the tedious tasks ;)

„Some things in CSS are a bit tedious to write, especially with CSS3 and the many vendor prefixes that exist. A mixin lets you make groups of CSS declarations that you want to reuse throughout your site. You can even pass in values to make your mixin more flexible. “ – Sass Basics

I will be showcasing some of the libs and resources here in the coming weeks. I only have one condition, Mixins should be simple dropin modules so that they can be used universally!

Here one Mixin, I love, that sets a REM font size with a Pixel fallback:

MIXIN

@function calculateRem($size) {
  $remSize: $size / 16px;
  @return $remSize * 1rem;
}

@mixin font-size($size) {
  font-size: $size;
  font-size: calculateRem($size);
}

@function calculateRem($size) {

$remSize: $size / 16px;

@return $remSize * 1rem;

}

@mixin font-size($size) {

font-size: $size;

font-size: calculateRem($size);

}

USAGE

p {
  @include font-size(14px)
}

p {

@include font-size(14px)

}

OUTPUT

p {
  font-size: 14px; //Will be overridden if browser supports rem
  font-size: 0.8rem;
}

p {

font-size: 14px; //Will be overridden if browser supports rem

font-size: 0.8rem;

}