Prism.js

css:


/* css */
p.myclass {
	color: #DD4A68;
}

less:


// grid widths loop
.make-grid-widths(@n, @i: 1) when (@i =< @n) {

  // flex grow factor grid widths
  .flex-@{i} {
    .flex(@i 1 auto);
  }

  // classic grid percentage widths
  .col-@{i} {
    .flex(1 1 (@i * 100% / @n));
    max-width: (@i * 100% / @n);
  }

  .make-grid-widths(@n, (@i + 1));
}

scss:


// buttons scss
.btn {
  @extend button;
  &:hover {
    color: $white;
  }
}

javascript:


// toggle menu button
function toggleMenu() {
    body.classList.toggle('open');
    appbarElement.classList.toggle('open');
    navdrawerContainer.classList.toggle('open');
    navdrawerContainer.classList.add('opened');
}

markdown:


### Npm und gulp:
1. Node js, Info siehe: [Node](http://nodejs.org/)
2. Gulp, Info siehe: [Gulp](http://gulpjs.com/)

Flexbox grid mixin

features:

  • 2 gutter variables: @space, @gutter
  • column-number variable
  • 2 column modes:
    • flex grow factor grid widths flex-(1 - column-number)
    • classic percentage grid widths col-(1 - column-number)

classes:

  • row / applies to items/columns > horizontale Anordnung
    • start
    • center
    • end
    • around
    • between
  • row / applies to items/columns > vertikale Anordnung
    • top
    • middle
    • bottom
    • equal
  • row / column / applies to rows/columns > gutter
    • space > @space in all device sizes
    • gutter > @gutter > 0 in mobile mode
  • column / grid classes
    • flex-(1 - column-number)
    • col-(1-column-number)

examples

row middle / column flex-5-3

row middle
and
column flex-5

flex-3

row space / column flex-3-5-8

flex-3

flex-5

flex-8

row between / column col-5-3

col-5

col-3

row around / column col-3-5

col-3

col-5