Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/phphe/vue-colrow

Vue smarter layout components. Based on css flexbox. Support responsive design, server side render. 5 KB gzipped.
https://github.com/phphe/vue-colrow

grid-layout layout responsive-layout vue

Last synced: 2 months ago
JSON representation

Vue smarter layout components. Based on css flexbox. Support responsive design, server side render. 5 KB gzipped.

Host: GitHub
URL: https://github.com/phphe/vue-colrow
Owner: phphe
License: mit
Created: 2018-05-22T08:03:04.000Z (over 6 years ago)
Default Branch: master
Last Pushed: 2020-04-15T14:29:41.000Z (almost 5 years ago)
Last Synced: 2024-10-02T16:20:56.665Z (4 months ago)
Topics: grid-layout, layout, responsive-layout, vue
Language: Vue
Homepage: https://vue-colrow.phphe.com/
Size: 963 KB
Stars: 7
Watchers: 2
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md
- License: LICENSE

Awesome Lists containing this project

README

        # vue-colrow

Smarter layout components. Based on css flexbox. Support responsive design, server side render. 3 KB gzipped. [Document](https://vue-colrow.phphe.com). It also has a React + Typescript version: [react-colrow](https://github.com/phphe/react-colrow)

更智能的布局组件. 基于css flexbox. 支持响应式布局, 服务端渲染. 5 KB gzipped. [文档](https://vue-colrow.phphe.com/zh). 还有React + Typescript的版本: [react-colrow](https://github.com/phphe/react-colrow)

It includes 3 components: Row, Col, BreakRow. Follow is a demo with Vuetify:

![image](https://github.com/phphe/vue-colrow/blob/master/public/colrow-form.png?raw=true)

In small screen: ![image](https://github.com/phphe/vue-colrow/blob/master/public/colrow-form-xs.png?raw=true)

It is easy:

```html

  

  

    

      

        First Name

      

      

        Last Name

      

      

        Email

      

      

        Website

      

      

        Title

      

      

        About

      

    

  

```

## Demo 2: Responsive card list with gutter

![image](https://github.com/phphe/vue-colrow/blob/master/public/colrow-list.png?raw=true)

```html

  

```

## License

[MIT](http://opensource.org/licenses/MIT)