Responsive CSS in JS

example.js

// Responsive init ----------------
import Responsive, {Breakpoints} from 'responsive';

// Register breakpoints - creates a Symbol for each breakpoint descriptor
// - Basic breakpoint descriptor is as seen here. A simple desktop-first Number
Responsive.registerBreakpoints({
  SMALL: 320,
  MEDIUM: 768,
  LARGE: 1024
});

// Example Responsive usage -------
const layout = {width: 1280, height: 768}; // min spec (dpi?)

// resolve a value (960, 300, 500, 700) dependant on layout
Responsive.resolve(layout, 960, {
  [Breakpoints.SMALL]: 300,
  [Breakpoints.MEDIUM]: 500,
  [Breakpoints.LARGE]: 700
});

// Example style definition -------
const STYLE_CONSTANTS = {

};

const Styles = {
  overview: {
    width: 960,

    [Breakpoints.SMALL]: {
      width: 768
    }
  },

  button: {
    padding: [10, 15]
  },

  Nav: {
    cta: {
      width: 220,

      [Breakpoints.SMALL]: {
        width: 120
      }
    }
  }
};

// Example component --------------
import Style from 'style';

function render() {
  const {height} = this.props;
  const overviewStyle = Style.resolve(layout, Styles.overview, {height}); // Style objects are merged when resolved
  const ctaStyle = Style.resolve(layout, Styles.button, Styles.Nav.cta);

  return (
    <div style={overviewStyle}>
      <span style={ctaStyle}>Do something</span>
    </div>
  );
}

// Future component ---------------
import {View, Text} from 'layout';

function render() {
  const {height} = this.props;
  const overviewStyle = [Styles.overview, {height}];
  const ctaStyle = [Styles.button, Styles.Nav.cta];

  // Future api could have implicit `layout` access via special layout components
  // - These components also open the door to more control over rendering of elements
  //   such as implementing a flexbox etc. Ie. see react-future layout
  return (
    <View style={overviewStyle}>
      <Text style={ctaStyle}>Do something</Text>
    </View>
  );
}