https://github.com/jondotsoy/ratio-css
Es un simple framework CSS que facilita la creación de componentes responsivos con relacionada de aspectos.
https://github.com/jondotsoy/ratio-css
Last synced: about 2 months ago
JSON representation
Es un simple framework CSS que facilita la creación de componentes responsivos con relacionada de aspectos.
- Host: GitHub
- URL: https://github.com/jondotsoy/ratio-css
- Owner: JonDotsoy
- Created: 2014-07-31T02:45:22.000Z (almost 11 years ago)
- Default Branch: master
- Last Pushed: 2014-08-26T04:57:28.000Z (over 10 years ago)
- Last Synced: 2025-03-13T21:40:43.550Z (2 months ago)
- Language: CSS
- Homepage: http://alfa30.github.io/Ratio-CSS/
- Size: 371 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Ratio CSS
=========
Es un simple framework CSS que facilita la creación de componentes responsivos con relación de aspectos. [wiki](http://es.wikipedia.org/wiki/Relaci%C3%B3n_de_aspecto)
Ejemplo HTML:
------------
Sin Ratio CSS
```html
```
Con Ratio CSS
```html
```
### Ejemplo en vivo
- [10x10](http://alfa30.github.io/Ratio-CSS/test/10x10)
- [Modelos de relación](http://alfa30.github.io/Ratio-CSS/test/models)
- [Libros](http://alfa30.github.io/Ratio-CSS/test/books)
- [Vídeos](http://alfa30.github.io/Ratio-CSS/test/video)
- [Ejemplo relación Libro](http://alfa30.github.io/Ratio-CSS/test/ViewOneBook)
## Versiones
### [v1.3.0](https://github.com/alfa30/Ratio-CSS/tree/v1.3.0)
Integra nuevos ejemplos.
Ingresa un parámetro `@name` a la función `.ratio`, permite nombrar clase de la relación.
Less:
```less
.ratio(12, 13, casa);
```
Salida:
```css
.ratio.ratio-casa,
.ratio.ratio-casa .ratio-item.action {
padding-bottom: 108.33333333%;
}
```
### [v1.2.1](https://github.com/alfa30/Ratio-CSS/tree/v1.2.1)
Agrega tabla de relaciones 10x10
- Relación 1 x 1 - css: .ratio-1by1
- Relación 1 x 2 - css: .ratio-1by2
- Relación 1 x 3 - css: .ratio-1by3
- Relación 1 x 4 - css: .ratio-1by4
- Relación ...
- Relación 4 x 1 - css: .ratio-4by1
- Relación ...
- Relación 10 x 10 - css: .ratio-10by10
### [v1.2.0](https://github.com/alfa30/Ratio-CSS/tree/v1.2.0)
Agregar relaciones de tipo libro:
- De bolsillo
- css: .ratio-1302by2032
- Dimensión: 13,02 x 20,32 cm
- Comercial
- css: .ratio-1524by2286
- Dimensión: 15,24 x 22,86 cm
- Cuadrado pequeño
- css: .ratio-1746by1683
- Dimensión: 17,46 x 16,83 cm
- Vertical estándar
- css: .ratio-2000by2477
- Dimensión: 20,00 x 24,77 cm
- Apaisado estándar
- css: .ratio-2410by2032
- Dimensión: 24,10 x 20,32 cm
- Apaisado grande
- css: .ratio-3238by2762
- Dimensión: 32,38 x 27,62 cm
- Cuadrado grande
- css: .ratio-3025by3048
- Dimensión: 30,25 x 30,48 cm
- Revista
- css: .ratio-2794by2159
- Dimensión: 27,94 x 21,59 cm
### [v1.1.0](https://github.com/alfa30/Ratio-CSS/tree/v1.1.0)
Ingresar control javascript.
Permite dimensionar la imagen sin perder la relación original, eliminando lo que no cabe dentro del componente. Para lo que ocupa la etiqueta `data-media=""`.
### [v1.0.0](https://github.com/alfa30/Ratio-CSS/tree/v1.0)
Esta versión incluye las siguientes relaciones:
- 5x3
- css: .ratio-5by3
- URL Example:
- 3x2
- css: .ratio-3by2
- URL Example:
- 4x3
- css: .ratio-4by3
- URL Example:
- 5x4
- css: .ratio-5by4
- URL Example:
- 14x9
- css: .ratio-14by9
- URL Example:
- 16x9
- css: .ratio-16by9
- URL Example:
- 16x10
- css: .ratio-16by10
- URL Example:
- 17x9
- css: .ratio-17by9
- URL Example:
- 21x9
- css: .ratio-21by9
- URL Example:
- 185x100
- css: .ratio-185by100
- URL Example:
- 239x100
- css: .ratio-239by100
- URL Example:
# Autor
Jonathan Delgado Zamorano
# Licencia
Licencia MIT