New Research: Supply Chain Attack on Axios Pulls Malicious Dependency from npm.Details → →
Socket
Book a DemoSign in
Socket
Book a DemoSign in

@jasbel/responsive

Package Overview
Dependencies
Maintainers
1
Versions
6
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@jasbel/responsive - npm Package Compare versions

Comparing version
1.0.1
 to
1.0.2
+189
USAGE-ES.md
# Resumen ES
El package contiene funciones para usar como responsive cuya base esta el la propiedad de CSS
calc.
Un ejemplo practico de esta es en el tamaño de las letra
ej: Por ejemplo si nuestra intension es ver el titulo lo mas atractivo posible y visible usaremos para computadoras tamaños relativamente grande, pero para mobile lo queremos para el tamaño de nuestra pequeña pantalla
- PC (1440px): titulo => 50px
- MOVIL (375px): titulo => 30px
Pero en la vida real no existe solo dos tipos y tamaños de pantallas, existen cientos, entonces como hariamos para que este se vea atractivamente bien en nuestros diferente tamaños de pantalla?
La funcion que me encontro fue calc..., buscando por la internet encontre soluciones acceptables, lastima que no encontre exactamente lo que buscaba. Pero en el transcurso de mis primeros meses aprendi scss y esto facilito la introducciones de usar funciones como si se tratara ya de usar un lenguaje de programacion. Pero antes no me precipitare con tanto parloteo y vamos como funciona.
<!-- TODO: poner 2 imagenes uno en pantalla grande y otro en celulares, de lo que queremos al final -->
Si fuera solo CSS3 usariamos de la siguiente manera:
<style>
h1 {
fonts-size: calc(30px + (50 - 30) * ((100vw - 375px) / (1440 - 375)));
}
</style>
<h1>Titulo</h1>
Y buala encontramos una solucion rapida y al parecer eficaz; pero...
Que pasa con las pantallas con tamaños mas pequeños, por ejemplo de unos 320px, realmente se veria mucho mas pequeño el titulo que estamos manejando, o que pasara con las pantalla mas grandes, por ejemplo a 1920px, 2200px, etc. El tamaño del titulo se veria horriblemente enorme. Como solucinarlo ?
Nuestra amada CSS Media Query entra en accion, lo hariamos de esta manera si es que pretendemos mantener los tamaños limites para pantallas mas grandes y mas pequeñas.
<>
h1: {
font-size: 50px;
}
@media (max-width: 1400px) {
h1: {
font-size: calc(30px + (50 - 30) * ((100vw - 375px) / (1440 - 375)));
}
}
@media (max-width: 375px) {
h1: {
font-size: 30px;
}
}
</style>
<h1>Titulo</h1>
<!-- TODO: poner la image de los tres resultados -->
Vaya mejoro el proceso, pero...
Nuevamente el pero XD, ahora mas bien parece estar complicando y solo hablamos de una etiqueta, que pasara si tenemos muchas mas etiquetas que necesitan cambiar el tamaño segun la dimension de la pantalla.
Bueno aqui entra en accion los preprocesadores que agilizan el proceso repetivo y practicamente mejora la productividad, estoy hablando de SASS (tambien existen LESS, STYLUS ...) y veamos como es que lo eh usado:
// extracto _responsive.scss
@function responsive($max, $min: "", $w-max: $desktop-responsive, $w-min: $phone-responsive ) {
@if( $min == "" or $max == $min) {
@return $max + px;
}
$min-px: $min + px;
$w-min-px: $w-min + px;
$result: calc( #{$min-px} + (#{$max} - #{$min}) * ((100vw - #{$w-min-px}) / (#{$w-max} - #{$w-min})));
@return $result;
}
Ahora tenemos una funcion que sera reutilizable para cualquier etiqueta que requiera cambiar sus dimension segun el ancho de pantalla
// myStyle.scss
h1 {
font-size: 50px;
@media (max-width: 1400px) {
font-size: responsive(50, 30, 1440, 375);
}
@media (max-width: 375px) {
font-size: 30px;
}
}
h2 {
font-size: 40px;
@media (max-width: 1400px) {
font-size: responsive(40, 20, 1440, 375);
}
@media (max-width: 375px) {
font-size: 20px;
}
}
// myHtml.html
<h1>Titulo</h1>
<h2>Subtitulo</h2>
Hemos progresado mucho, pero no estoy cumpliendo con lo que dije, no parece estar automatizado, despues de pensar en mis tiempos libres a lo largo de mis primeros meses como maquetador web , el como podria acelerar el proceso de maquetacion con responsive y codigo limpio, llegue a crear algo que realmente que me dejo por delante de los demas desarrolladores cuando se trata de estilos responsivos.
Aqui les dejo la implementacion de mi codigo `npm i @jasbel/responsive` por si quieren ver a detalle de los que logre o usarlo directamente.
// myStyle.scss
h1 {
@include responsive(fz, 50, 40);
}
h2 {
@include responsive(fz, 40, 30);
}
.miTexto {
@include responsive(fz, 28, 16);
}
.miCaja {
@include responsive(w, 200, 50);
@include responsive(h, 200, 50);
background-color: red;
}
// myHtml.html
<h1>Titulo</h1>
<h2>Subtitulo</h2>
<p class="miTexto">Text responsive </p>
<div class="miCaja">Mi Caja<div>
Espero que les sirva y dime, como podria mejorarlo aun mas.
Actualmente estoy entrando mas a profundidad con los frameworks, y siempre me anda picando el bicho diciendome que: "Oye chaval, tambien puede meterle esto de tu responsive a react.js, react-native, Next, integrarlo con MUI, Chackra UI y seguramente con Tailwind y lo que venga XD, a poco tienes miedo por desconocer a profundidad de estas tecnologias"
ver https://replit.com/join/qjznvfaoyp-jasbel1
Ejemplo completo
`index.html`
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>Responsive</title>
<link href="main.css" rel="stylesheet" type="text/css" />
</head>
<body>
<p class="text textResponsive">Text Responsive</p>
<p class="text">Text No Responsive</p>
<div class="box boxResponsive">Box Responsive</div>
<br />
<div class="box">Box No Responsive</div>
</body>
</html>
```
`main.scss`
```scss
@import "./node_modules/@jasbel/responsive/scss/responsive.scss";
html,
body {
height: 100%;
width: 100%;
}
.text {
font-size: 30px;
&Responsive {
@include responsive(fz, 100, 30);
}
}
.box {
background-color: lightblue;
width: 100px;
height: 100px;
font-size: 16px;
&Responsive {
@include responsive(fz, 50, 16);
@include responsive(w, 500, 100);
@include responsive(h, 500, 100);
}
}
```
+4
-4
package.json
{
"name": "@jasbel/responsive",
"version": "1.0.1",
"description": "responsive for javascript vanilla, css, scss, react, nextjs and others web project",
"version": "1.0.2",
"description": "responsive for javascript vanilla, css, scss, react, nextjs and others web project, description: https://github.com/jasbel/responsive-styles#readme",
"homepage": "https://asbel.dev/",
"main": "index.js",

@@ -18,4 +19,3 @@ "scripts": {

"url": "https://github.com/jasbel/responsive-styles/issues"
},
"homepage": "https://github.com/jasbel/responsive-styles#readme"
}
}
+123
-98
README.md

@@ -1,131 +0,156 @@

# Resumen
# @jasbel/responsive [![NPM version][npm-image]][npm-url] [![Downloads][downloads-image]][npm-url]
El package contiene funciones para usar como responsive cuya base esta el la propiedad de CSS
calc.
## Information
Un ejemplo practico de esta es en el tamaño de las letra
<table>
<tr>
<td>Package</td><td>@jasbel/responsive</td>
</tr>
<tr>
<td>Description</td>
<td>Media queries for responsive design</td>
</tr>
<tr>
<td>Browser Version</td>
<td>all</td>
</tr>
</tr>
<tr>
<td colspan='2'><a href='http://contra.io/@jasbel/responsive/'>Demo</a></td>
</tr>
</table>
ej: Por ejemplo si nuestra intension es ver el titulo lo mas atractivo posible y visible usaremos para computadoras tamaños relativamente grande, pero para mobile lo queremos para el tamaño de nuestra pequeña pantalla
The best supported, easiest to use react media query module.
- PC (1440px): titulo => 50px
- MOVIL (375px): titulo => 30px
## Install
Pero en la vida real no existe solo dos tipos y tamaños de pantallas, existen cientos, entonces como hariamos para que este se vea atractivamente bien en nuestros diferente tamaños de pantalla?
```console
$ npm install @jasbel/responsive --save-dev
```
```console
$ npm i -D @jasbel/responsive
```
La funcion que me encontro fue calc..., buscando por la internet encontre soluciones acceptables, lastima que no encontre exactamente lo que buscaba. Pero en el transcurso de mis primeros meses aprendi scss y esto facilito la introducciones de usar funciones como si se tratara ya de usar un lenguaje de programacion. Pero antes no me precipitare con tanto parloteo y vamos como funciona.
## Example Usage
<!-- TODO: poner 2 imagenes uno en pantalla grande y otro en celulares, de lo que queremos al final -->
### Usage
Si fuera solo CSS3 usariamos de la siguiente manera:
install compiler sass and import file scss main:
<style>
h1 {
fonts-size: calc(30px + (50 - 30) * ((100vw - 375px) / (1440 - 375)));
}
</style>
<h1>Titulo</h1>
```scss
@import "./node_modules/@jasbel/responsive/scss/responsive.scss";
Y buala encontramos una solucion rapida y al parecer eficaz; pero...
...
```
Que pasa con las pantallas con tamaños mas pequeños, por ejemplo de unos 320px, realmente se veria mucho mas pequeño el titulo que estamos manejando, o que pasara con las pantalla mas grandes, por ejemplo a 1920px, 2200px, etc. El tamaño del titulo se veria horriblemente enorme. Como solucinarlo ?
### With HTML and SCSS
Nuestra amada CSS Media Query entra en accion, lo hariamos de esta manera si es que pretendemos mantener los tamaños limites para pantallas mas grandes y mas pequeñas.
Simple Example
<>
h1: {
font-size: 50px;
}
`index.html`
@media (max-width: 1400px) {
h1: {
font-size: calc(30px + (50 - 30) * ((100vw - 375px) / (1440 - 375)));
}
}
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>Responsive</title>
<link href="main.css" rel="stylesheet" type="text/css" />
</head>
<body>
<p class="text textResponsive">Text Responsive</p>
<p class="text">Text No Responsive</p>
<div class="box boxResponsive">Box Responsive</div>
<br />
<div class="box">Box No Responsive</div>
</body>
</html>
```
@media (max-width: 375px) {
h1: {
font-size: 30px;
}
}
</style>
<h1>Titulo</h1>
`main.scss`
<!-- TODO: poner la image de los tres resultados -->
```scss
@import "./node_modules/@jasbel/responsive/scss/responsive.scss";
Vaya mejoro el proceso, pero...
html,
body {
height: 100%;
width: 100%;
}
Nuevamente el pero XD, ahora mas bien parece estar complicando y solo hablamos de una etiqueta, que pasara si tenemos muchas mas etiquetas que necesitan cambiar el tamaño segun la dimension de la pantalla.
.text {
font-size: 30px;
Bueno aqui entra en accion los preprocesadores que agilizan el proceso repetivo y practicamente mejora la productividad, estoy hablando de SASS (tambien existen LESS, STYLUS ...) y veamos como es que lo eh usado:
&Responsive {
@include responsive(fz, 100, 30);
}
}
// extracto _responsive.scss
@function responsive($max, $min: "", $w-max: $desktop-responsive, $w-min: $phone-responsive ) {
@if( $min == "" or $max == $min) {
@return $max + px;
}
$min-px: $min + px;
$w-min-px: $w-min + px;
$result: calc( #{$min-px} + (#{$max} - #{$min}) * ((100vw - #{$w-min-px}) / (#{$w-max} - #{$w-min})));
@return $result;
}
.box {
background-color: lightblue;
width: 100px;
height: 100px;
font-size: 16px;
Ahora tenemos una funcion que sera reutilizable para cualquier etiqueta que requiera cambiar sus dimension segun el ancho de pantalla
&Responsive {
@include responsive(fz, 50, 16);
@include responsive(w, 500, 100);
@include responsive(h, 500, 100);
}
}
```
## API
// myStyle.scss
h1 {
font-size: 50px;
@media (max-width: 1400px) {
font-size: responsive(50, 30, 1440, 375);
}
@media (max-width: 375px) {
font-size: 30px;
}
}
...
h2 {
font-size: 40px;
@media (max-width: 1400px) {
font-size: responsive(40, 20, 1440, 375);
}
@media (max-width: 375px) {
font-size: 20px;
}
}
## Browser Support
// myHtml.html
<h1>Titulo</h1>
<h2>Subtitulo</h2>
### Out of the box
Hemos progresado mucho, pero no estoy cumpliendo con lo que dije, no parece estar automatizado, despues de pensar en mis tiempos libres a lo largo de mis primeros meses como maquetador web , el como podria acelerar el proceso de maquetacion con responsive y codigo limpio, llegue a crear algo que realmente que me dejo por delante de los demas desarrolladores cuando se trata de estilos responsivos.
<table>
<tr>
<td>Chrome</td>
<td>9</td>
</tr>
<tr>
<td>Firefox (Gecko)</td>
<td>6</td>
</tr>
<tr>
<td>MS Edge</td>
<td>All</td>
</tr>
<tr>
<td>Internet Explorer</td>
<td>11</td>
</tr>
<tr>
<td>Opera</td>
<td>12.1</td>
</tr>
<tr>
<td>Safari</td>
<td>5.1</td>
</tr>
</table>
Aqui les dejo la implementacion de mi codigo `npm i @jasbel/responsive` por si quieren ver a detalle de los que logre o usarlo directamente.
## Documentation
// myStyle.scss
h1 {
@include responsive(fz, 50, 40);
}
- [Documentation](https://github.com/jasbel/responsive-styles#readme",)
- [Oficial Site Developer](https://asbel.dev)
- [Blog](https://asbel.dev/blog/)
h2 {
@include responsive(fz, 40, 30);
}
## Template (In Process)
.miTexto {
@include responsive(fz, 28, 16);
}
Clone a copy of the repo:
.miCaja {
@include responsive(w, 200, 50);
@include responsive(h, 200, 50);
background-color: red;
}
```bash
git clone https://github.com/jasbel/template-responsive.git
```
// myHtml.html
<h1>Titulo</h1>
<h2>Subtitulo</h2>
<p class="miTexto">Text responsive </p>
<div class="miCaja">Mi Caja<div>
Espero que les sirva y dime, como podria mejorarlo aun mas.
Actualmente estoy entrando mas a profundidad con los frameworks, y siempre me anda picando el bicho diciendome que: "Oye chaval, tambien puede meterle esto de tu responsive a react.js, react-native, Next, integrarlo con MUI, Chackra UI y seguramente con Tailwind y lo que venga XD, a poco tienes miedo por desconocer a profundidad de estas tecnologias"
[downloads-image]: http://img.shields.io/npm/dm/@jasbel/responsive.svg
[npm-url]: https://npmjs.org/package/@jasbel/responsive
[npm-image]: http://img.shields.io/npm/v/@jasbel/responsive.svg