https://github.com/dherault/flexpad

CSS grid: no more rows and columns
https://github.com/dherault/flexpad

css flexbox grid layout

Last synced: 23 days ago
JSON representation

CSS grid: no more rows and columns

• Host: GitHub
• URL: https://github.com/dherault/flexpad
• Owner: dherault
• License: mit
• Created: 2017-07-28T22:19:34.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2024-03-25T14:55:09.000Z (8 months ago)
• Last Synced: 2024-05-02T00:56:44.014Z (6 months ago)
• Topics: css, flexbox, grid, layout
• Language: HTML
• Homepage: https://dherault.github.io/flexpad
• Size: 990 KB
• Stars: 7
• Watchers: 3
• Forks: 0
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Flexpad

Flexpad is a set of CSS classes to quickly make any flexbox layout using opinionated naming conventions.

## How it works

```

- Choose an axis for your container: x or y

- Think of a keypad:  1 2 4

                      4 5 6

                      7 8 9

- Pick the number corresponding to the alignment you want for your content

- Assign the class to your container:

```

```html



  
All centered





  
Top left y aligned



```


Have a look at [the demo](https://dherault.github.io/flexpad/) for all the 348 variations.

## Usage

#### JavaScript

`npm install flexpad --save`

Inject CSS:

```js

import 'flexpad/dist/flexpad.css'

// or, prefixed and minified

import 'flexpad/dist/flexpad.min.css'

```

Use with inline styles:

```js

import fp from 'flexpad'

const Menu = () => (

  


    // ...

  

)

```


#### HTML

Download the CSS file: [basic](https://raw.githubusercontent.com/dherault/flexpad/master/dist/flexpad.css) or [prefixed and minified](https://raw.githubusercontent.com/dherault/flexpad/master/dist/flexpad.min.css).

Use a CDN:

```html

```

## Contributing

Yes, thank you.