Responsive design without media queries

by ramnathv

Babel + JSX

const styles = {
	fill      : {
  	width  : '100%',
    height : '100%'
  },
  
  flexGroup : {
  	display  : 'flex',
    flexWrap : 'wrap'
  },
  
  flexItem  : {
  	boxSizing : 'border-box',
  	flex      : '1 1 0',
    padding   : '1em'
  }
}

m.render( document.body,  
	m( 'div', { style : {
    ...styles.flexGroup,
    ...styles.fill,
    position : 'fixed'
  } }, 
  	m( 'nav', { style : {
    	...styles.flexItem,
      background : 'darkblue',
      color      : 'white',
      minWidth   : '15em'
    } }, 
    	m( 'ul', [ 
        'Imagine, if you will',
        'A set of links',
        'Describing the high level locations',
        'Of your wonderful website'
      ].map( item => 
      	m( 'li', m( 'a[style=color:inherit][href=#]', item ) )
      ) )
    ),
    
    m( 'section', { style : {
    	...styles.flexItem,
      minWidth : '20em'
    } }, 
    	m( 'h1', 'Welcome to my wonderful website' ),
      
			m( 'p', 'EMs are great for high-order layout widths because they allow you to size content in function of what makes sense for readability, ie a major layout element less than 15em wide is a mistake.' ),
			m( 'p', 'Thus we can write rules whereby the layout will restructure itself naturally dependning on available width.' ),
			m( 'p', 'Try resizing the viewport to see this take effect.' )
    )
  )
)