https://github.com/franciscop/flexpoint

[discontinued, please use Picnic CSS that includes this ] A breakpoint-based flexbox grid implementation
https://github.com/franciscop/flexpoint

Last synced: 13 days ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/franciscop/flexpoint
• Owner: franciscop
• License: mit
• Created: 2016-04-09T07:14:36.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2021-08-02T10:27:27.000Z (over 3 years ago)
• Last Synced: 2024-10-11T13:24:43.612Z (about 1 month ago)
• Language: SCSS
• Homepage: https://picnicss.com/
• Size: 443 KB
• Stars: 19
• Watchers: 4
• Forks: 2
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# 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](https://developers.google.com/web/fundamentals/design-and-ui/responsive/fundamentals/how-to-choose-breakpoints), by [Smashing Magazine's Logical Breakpoints](https://www.smashingmagazine.com/2013/03/logical-breakpoints-responsive-design/) 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:

```js

// npm i flexpoint

import Flex from "flexpoint";

// Three columns by default, and from +1200px screens render six columns

export default () => (

  

    
Hello

    Large screen

    Small screens

    
World


    

      I span all the screen on mobile but only half on desktop

    

  

);

```

## Documentation

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

## License

MIT License (see LICENSE)

## Author

[Francisco Presencia](http://francisco.io/). You can also [hire me](http://francisco.io/resume.pdf) to make awesome projects with you :)