Stefan Petre

Rem converter for Less CSS

It's a small hack that adds a function to convert px into rem.

Find inside less.js or functions.js:

convert: function (val, unit) {
    return val.convertTo(unit.value);
},

and right after add:

rem: function (val, base) {
    var remSize = Math.round((val.value/base.value)*10000)/10000;
    return new(tree.Dimension)(remSize, 'rem');
},

And now you can convert px to rem. The following Less:

@remBaseSize: 14px;
.class{
    font-size: rem(16px, @remBaseSize);
}

Compiles to:

.class{
    font-size: 1.1429rem;
}

Faceted search

Work in progress.

Inspired by VisualSearch.js, with different options, less dependencies, smaller size.

 

Slider for Twitter Bootstrap

Slider component with different options

  • vertical or horizontal orientation
  • minimum and maxim values
  • step incrementor
  • range selector
  • 3 shapes for handles

Download & docs

Instrumente - Chrome extension

Collection of tools that you might need once in a while

Included tools:

  • Text conversion: lowercase, uppercase, capitalize, HTML entities, URI
  • Lorem ipsum generator: no. of paragraphs and words, full HTML with titles, lists and ordered lists
  • Random password generator: password length, include numbers, lowercase and uppercase letters and other characters
  • E-mail obfuscation: result as JavaScript
  • .htpasswd password generator
  • Grid calculator: column width and number, gutter and total width
  • Regular expression tester
  • JavaScript, JSON, CSS and HTML beautifier
  • List of HTML entities

Install

Tab drop for Twitter Bootstrap

Very usefull script when your tabs do not fit in a single row. This script takes the not fitting tabs and makes a new dropdown tab. In the dropdown there are all the tabs that do not fit.

  • works only with horizontal tabs and pills
  • custom text for the dropdown tab
  • works with responsive design

Download & docs