Nice simple addon to add a loading animation to your Bootstrap buttons, when doing Ajax requests. Always better to let users know, that your system is doing something ;)
Nice selection of CSS loaders, in pure CSS and HTML. Many of the loaders can be tweaked within an online editor.
|
1 2 3 4 5 6 7 8 9 10 |
@mixin clearfix() { &:before, &:after { content: ""; display: table; } &:after { clear: both; } } |
|
1 2 3 |
.article { @include clearfix(); } |
Simple is king :)
Bourbon is one of the Sass Mixins libraries that always makes it into my projects :)
You will find Mixins for
CSS Crush is a standards inspired CSS pre-processor that is written in PHP from scratch.
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.
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:
|
1 2 3 4 5 6 7 8 9 |
@function calculateRem($size) { $remSize: $size / 16px; @return $remSize * 1rem; } @mixin font-size($size) { font-size: $size; font-size: calculateRem($size); } |
|
1 2 3 |
p { @include font-size(14px) } |
|
1 2 3 4 |
p { font-size: 14px; //Will be overridden if browser supports rem font-size: 0.8rem; } |
E-Learning platform for Thailand