Skip to content

Instantly share code, notes, and snippets.

@blakeembrey
Forked from apalm/index.js
Created January 7, 2016 22:43

Revisions

  1. blakeembrey revised this gist Jan 7, 2016. 2 changed files with 2 additions and 2 deletions.
    2 changes: 1 addition & 1 deletion minified.js
    1 addition, 1 deletion not shown because the diff is too large. Please use a local Git client to view these changes.
    2 changes: 1 addition & 1 deletion package.json
    Original file line number Diff line number Diff line change
    @@ -3,6 +3,6 @@
    "version": "1.0.0",
    "dependencies": {
    "react": "0.13.3",
    "free-style": "1.0.1"
    "free-style": "1.0.2"
    }
    }
  2. @apalm apalm revised this gist Jan 7, 2016. 2 changed files with 2 additions and 2 deletions.
    2 changes: 1 addition & 1 deletion index.js
    Original file line number Diff line number Diff line change
    @@ -39,7 +39,7 @@ Style.inject()
    React.render(
    React.createElement('div', null, [
    React.createElement('div', {className: x}, 'Hello, world!'),
    React.createElement('div', {className: y}, 'Should be pink when background >= 400px'),
    React.createElement('div', {className: y}, 'Should be pink when width >= 400px'),
    ]),
    document.getElementById('container')
    )
    2 changes: 1 addition & 1 deletion minified.js
    1 addition, 1 deletion not shown because the diff is too large. Please use a local Git client to view these changes.
  3. @apalm apalm revised this gist Jan 7, 2016. 1 changed file with 9 additions and 11 deletions.
    20 changes: 9 additions & 11 deletions index.js
    Original file line number Diff line number Diff line change
    @@ -20,22 +20,20 @@ var y = Style.registerStyle({
    Style.inject()

    /*
    .ne90375c2 {
    background: red;
    .f5f6vv4 {
    background: red
    }
    @media (min-width: 400px) {
    .ne90375c2 {
    background: yellow;
    .f5f6vv4 {
    background: yellow
    }
    }
    .n22438712 {
    background: palegreen;
    }
    @media (min-width: 400px) {
    .n22438712 {
    background: pink;
    .fok4hug {
    background: pink
    }
    }
    .fok4hug {
    background: palegreen
    }
    */

    React.render(
  4. @apalm apalm revised this gist Jan 7, 2016. 1 changed file with 0 additions and 1 deletion.
    1 change: 0 additions & 1 deletion index.js
    Original file line number Diff line number Diff line change
    @@ -20,7 +20,6 @@ var y = Style.registerStyle({
    Style.inject()

    /*
    =>
    .ne90375c2 {
    background: red;
    }
  5. @apalm apalm revised this gist Jan 7, 2016. 3 changed files with 32 additions and 12 deletions.
    20 changes: 20 additions & 0 deletions index.js
    Original file line number Diff line number Diff line change
    @@ -19,6 +19,26 @@ var y = Style.registerStyle({

    Style.inject()

    /*
    =>
    .ne90375c2 {
    background: red;
    }
    @media (min-width: 400px) {
    .ne90375c2 {
    background: yellow;
    }
    }
    .n22438712 {
    background: palegreen;
    }
    @media (min-width: 400px) {
    .n22438712 {
    background: pink;
    }
    }
    */

    React.render(
    React.createElement('div', null, [
    React.createElement('div', {className: x}, 'Hello, world!'),
    20 changes: 10 additions & 10 deletions minified.js
    10 additions, 10 deletions not shown because the diff is too large. Please use a local Git client to view these changes.
    4 changes: 2 additions & 2 deletions package.json
    Original file line number Diff line number Diff line change
    @@ -2,7 +2,7 @@
    "name": "requirebin-sketch",
    "version": "1.0.0",
    "dependencies": {
    "free-style": "1.0.1",
    "react": "0.13.3"
    "react": "0.13.3",
    "free-style": "1.0.1"
    }
    }
  6. @apalm apalm created this gist Jan 7, 2016.
    28 changes: 28 additions & 0 deletions index.js
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,28 @@
    var React = require('react')
    var FreeStyle = require('free-style')

    var Style = FreeStyle.create()

    var x = Style.registerStyle({
    background: 'red',
    '@media (min-width: 400px)': {
    background: 'yellow'
    }
    })

    var y = Style.registerStyle({
    background: 'palegreen',
    '@media (min-width: 400px)': {
    background: 'pink'
    }
    })

    Style.inject()

    React.render(
    React.createElement('div', null, [
    React.createElement('div', {className: x}, 'Hello, world!'),
    React.createElement('div', {className: y}, 'Should be pink when background >= 400px'),
    ]),
    document.getElementById('container')
    )
    10 changes: 10 additions & 0 deletions minified.js
    10 additions, 0 deletions not shown because the diff is too large. Please use a local Git client to view these changes.
    8 changes: 8 additions & 0 deletions package.json
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,8 @@
    {
    "name": "requirebin-sketch",
    "version": "1.0.0",
    "dependencies": {
    "free-style": "1.0.1",
    "react": "0.13.3"
    }
    }
    1 change: 1 addition & 0 deletions page-body.html
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    <div id="container"></div>
    1 change: 1 addition & 0 deletions page-head.html
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    <!-- contents of this file will be placed inside the <head> -->
    1 change: 1 addition & 0 deletions requirebin.md
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    made with [requirebin](http://requirebin.com)