franciscop / flexpoint

[discontinued, please use Picnic CSS that includes this ] A breakpoint-based flexbox grid implementation

Flexpoint

A React library for making grid layouts with flexbox in 9kb (min+gzip). Choose when to change your layout depending on your content instead of the device you want to show as recommended by Google's RWD, by Smashing Magazine's Logical Breakpoints and me ☺

Getting started

Include it to use in any of your projects:

https://cdn.jsdelivr.net/flexpoint/2/flexpoint.css

To use with React, you can import the main component Flex and then put the class names as props:

// npm i flexpoint
import Flex from "flexpoint";

// Three columns by default, and from +1200px screens render six columns
export default () => (
  <Flex three six-600>
    <div>Hello</div>
    <Flex hide flex-600>Large screen</Flex>
    <Flex hide-600>Small screens</Flex>
    <div>World</div>

    <Flex full half-600>
      I span all the screen on mobile but only half on desktop
    </Flex>
  </Flex>
);

Documentation

No documentation right now, I'm testing it out and then we'll see 😃

License

MIT License (see LICENSE)

Author

Francisco Presencia. You can also hire me to make awesome projects with you :)