benstr

A Simple

The widgets and navigation are very cool and dynamic. Make sure to try the different view options in each widget.

Demo Site | Themeforest

Flat

Checkout the address book wodget! Also the overall squared look is pulled off very well.

Demo Site | Themeforest

benstr

/*******************************
FLAT COLORS - BACKGROUNDS
********************************/

.green-bg { /*emerald*/
    background-color: #2ECC71;
}
.dark-green-bg { /*nephritis*/
    background-color: #27ae60;
}

benstr

.animation-target {
  -webkit-animation: CtoL 1500ms linear both;
  animation: CtoL 1500ms linear both;
}

/* Generated with Bounce.js. Edit at http://goo.gl/eh38L9 */

@-webkit-keyframes CtoL { 
  0% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }

benstr

<link rel="import" href="../core-icon-button/core-icon-button.html">
<link rel="import" href="../core-toolbar/core-toolbar.html">
<link rel="import" href="../core-header-panel/core-header-panel.html">

<polymer-element name="my-element">

  <template>
    <style>    
      :host {
        position: absolute;

benstr

Material Design Contacts App Page Structure

A proof of concept showing the basic structure of the 'Contacts App' example shown throughout Google's Material Design Specs. There is many more additions needed to make this fully compliant to the specs but it exists purely for showing the structure and not the style.

A Pen by Ben Strahan on CodePen.

License.

benstr

<template name="layout">
  <div class="container">
    {{> yield}}
  </div>
</template>

benstr

module.exports = function(grunt){
    grunt.initConfig({
        traceur: {
            options: {
                experimental:true
            },
            custom: {
                files:{
                    'build/app.js': "js/**/*.js"
                }

benstr

Authentic Material Design Shadows without Web Components

I have seen a bunch of people trying to make the Material Design shadows. They all tend to be slightly wrong and at close inspection look nothing like Google's original. I found that Polymer had the best CSS implementation of the shadows but they were placed there by Web Component's and the Shadow DOM which does not help about 99% of us (yet!). The shadows in this pen use pseudo elements to achieve the exact same quality as the Google spec. Enjoy!

A Pen by Ben Strahan on CodePen.

License.

benstr

// Put a template into the DOM. get() must include a 0.
Blaze.render(Template.projectDetails, $('#main-content').get(0));


// To remove you must pass the view object
Blaze.remove(Blaze.getView($('#project-details').get(0)))

benstr

The introduction to Reactive Programming you've been missing

(by @andrestaltz)

So you're curious in learning this new thing called (Functional) Reactive Programming (FRP).

Learning it is hard, even harder by the lack of good material. When I started, I tried looking for tutorials. I found only a handful of practical guides, but they just scratched the surface and never tackled the challenge of building the whole architecture around it. Library documentations often don't help when you're trying to understand some function. I mean, honestly, look at this:

Rx.Observable.prototype.flatMapLatest(selector, [thisArg])

Projects each element of an observable sequence into a new sequence of observable sequences by incorporating the element's index and then transforms an observable sequence of observable sequences into an observable sequence producing values only from the most recent observable sequence.