Lighting Fly

SCSSMixinsLibrary

Layout

This module contains various mixins for hacking layout and prefix-free using box-sizing.

File

lightingfly/modules/_layout.scss

Links

Clearfix hack: css-tricks.com
Centering in the Unknown: css-tricks.com
Specification for box-sizing property: developer.mozilla.org
Specification for calc function: w3.org

clearfix

Mixin for Nicolas Gallagher's micro clearfix hack.

Mixin

@mixin clearfix()

Usage example

Demo 
 
Both containers contain two floating elements, only first container use clearfix hack
I
I
II
II
clearfix-old
 Mixin for old type of clearfix hack.
Mixin
@mixin clearfix-old()
Usage example
Demo 
 
Both containers contain two floating elements, only first container use clearfix hack
I
I
II
II
center-unknown
 Mixin for center-unknown hack.
Mixin
@mixin center-unknown($selector)
Arguments
  • $selector: 
    [.fly, ...]
    - css selector to child element that should be centered
Usage example
Demo 
 
This unknown element is centered
Center unknown
box-sizing
 Mixin for prefix-free box-sizing property.
Mixin
@mixin box-sizing($sizing)
Arguments
  • $sizing: 
    [content-box, padding-box, border-box]
    - type of box-sizing
Usage example
Demo 
 
Three diferent box-sizings.
content-box
padding-box
border-box
calc
 Mixin for prefix-free calc function.
Mixin
@mixin calc($property, $calc, $fallback)
Arguments
  • $property: 
    [width, height, ...]
    - css property
  • $calc: 
    ['100% - 50px']
    - mathematic formula to calculate
  • $fallback: 
    [250px, 10en, ...)]
    - fallback value
Usage example
Demo 
 
Element with calculated width, and with fallback.
calc(100% - 200px)
calc(100% - 100px)