# flex-grid-lists

> Listados en modo lista o grilla con manejo de tamaños de columnas y el switch de un tipo a otro al cambiar una clase CSS del contenedor.

Latest version **0.1.5** (published 2016-11-22) · MIT license · 0 weekly downloads

## Install

```sh
npm install flex-grid-lists
pnpm add flex-grid-lists
yarn add flex-grid-lists
bun add flex-grid-lists
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.5 |
| Published | 2016-11-22 |
| First published | 2016-09-19 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | Alejandro Riedel |
| Maintainers | guiwoda, riedelalejandro |

## Links

- npm: https://www.npmjs.com/package/flex-grid-lists
- Repository: https://github.com/digbang/flex-grid-lists
- Homepage: https://github.com/digbang/flex-grid-lists#readme
- Issues: https://github.com/digbang/flex-grid-lists/issues
- npm.io page: https://npm.io/package/flex-grid-lists

## Recent versions

- 0.1.5 (latest) — 2016-11-22
- 0.1.4 — 2016-11-22
- 0.1.3 — 2016-11-14
- 0.1.2 — 2016-09-22
- 0.1.1 — 2016-09-20
- 0.1.0 — 2016-09-19

## README

# Flex grid lists

Listados en modo lista o grilla con manejo de tamaños de columnas y el switch de un tipo a otro al cambiar una clase CSS del contenedor.

Los componentes que provee el paquete son:

- `list-card`: Ítem del listado
- `list-row`: Cotenedor de uno o muchos `list-card` que se mostrarán en modo lista (uno debajo del otro)
- `grid-row`: Cotenedor de uno o muchos `list-card` que se mostrarán en modo grilla

La estructura html básica es:

```
<article class="list-card">
    <div class="list-card__header">
        ...
    </div>
    <div class="list-card__body">
        ...
    </div>
    <div class="list-card__footer">
        ...
    </div>
</article>
```

## Instalación:

El paquete se encuentra disponible en el repositorio de npm con el nombre "flex-grid-lists"

```
npm i -S flex-grid-lists
```

## Uso:

Para comenzar a utilizarlo, es necesario incluir el css (normal o minified) que se encuentra en la carpeta `node_modules/flex-grid-lists/dist`, o bien incluyendo y compilando el `.scss` que se encuentra en `node_modules/flex-grid-lists/resources/styles`.

### Tipo seteado por el contenedor:

#### Modo lista

- Cada `list-card` mostrará sus elementos internos (`list-card__header`, `list-card__body`, `list-card__footer`) a modo de columnas (uno al lado del otro)

```
<div class="list-row">
    <article class="list-card">
        ...
    </article>
</div>
```

#### Modo grilla

- Cada `list-card` mostrará sus elementos internos (`list-card__header`, `list-card__body`, `list-card__footer`) a modo de filas (uno debajo del otro)
- Para especificar las columnas que se mostrarán en las distintas resoluciones es necesario agregarle a cada `list-card` la clase `grid-{tamaño}-{columnas}`
- La grilla está basada en 12 columnas (es una variable de SASS por lo que se puede modificar a gusto) e inspirada en la grilla de bootstrap

```
<div class="grid-row">
    <article class="list-card grid-xs-6 grid-sm-4">
        ...
    </article>
</div>
```

Todos los Viewports soportados son:

- xs: <544px,
- sm: >=544px,
- md: >=768px,
- lg: >=992px,
- xl: >=1200px,
- tv: >= 1824px

Ver [demos](https://digbang.github.io/flex-grid-lists/type-by-container.html)

### Tipo seteado por modificador:

También se puede forzar el tipo mediante un modificador, sin necesidad de utilizar los contenedores `list-row` o `grid-row`.

#### Modo grilla

```
<article class="list-card list-card--grid">
    ...
</article>
```

#### Modo lista

```
<article class="list-card list-card--list">
    ...
</article>
```

Ver [demos](https://digbang.github.io/flex-grid-lists/type-by-modifier.html)

## Desarrollo:

### Requerimientos

- nodejs

### Instalación

```
git clone git@github.com:digbang/flex-grid-lists.git
cd flex-grid-lists
npm i
```

### Compilado

Para compilar el código SASS se utiliza GULP.

#### Generar CSS Minificado

```
gulp
```

#### Generar CSS sin minificar + sourcemaps
```
gulp dev
```

---
_Source: https://npm.io/package/flex-grid-lists · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._