me css

me.css v5 sfinal ya disponible!

Me.css v5 final ya está disponible, esta librería css basada en Emmet es muy ligera y capaz de resolver la mayor parte de necesidades en cuanto a maquetación web se refiere, dispone de utilidades básicas y sistema de rejillas similares a las de Bootstrap pero no tiene utilidades para barras de navegación, carouseles ni otros elementos, está pensada para optimizar al máximo los estilos aplicados sirviendo los recursos comprimidos para una mejor WPO.

Me.css v5 utiliza nodeJS para renderizar los recursos y Sass para manipular los estilos, la versión v5 es la más moderna hasta la fecha haciendo uso de Sass 5.

A continuación tienes una explicación clara de cada grupo de utilidades, con ejemplos prácticos para que puedas aplicarlas directamente en tus proyectos.

Breakpoints y sintaxis responsive
me.css utiliza alias muy fáciles de recordar para cada breakpoint.
Para aplicar una clase solo en un tamaño concreto, se inserta el alias entre el prefijo y el valor.
Los breakpoints son configurables con Sass, ya están configurados los siguientes:
sm (576px), md (768px), lg (992px), xl (1200px), xxl (1366px), xxxl (1512px)

Ejemplos:

.pt-20        → padding-top: 20px en todas las pantallas
.pt-md-20     → padding-top: 20px desde 768px
.d-f          → display: flex
.d-lg-f       → display: flex desde 992px
.col-12       → columna completa
.col-md-6     → media columna desde 768px

Contenedor .box
.box es el contenedor principal que centra el contenido y aplica un max-width diferente según el breakpoint.

Uso típico:

<div class="box mx-a">...</div>

Grid de 12 columnas editables
El sistema de columnas funciona con clases muy directas, es similar al de Bootstrap, puedes editar el número de columnas con Sass:

.col-{n}              → columna n/12
.col-{bp}-{n}         → columna responsive
.offset-{n}           → margen izquierdo equivalente a n columnas
.order-{n}            → orden flex

Ejemplo de dos columnas:

<div class="d-f fxw-w m-ng-15">
    <div class="col-12 col-md-6 px-15">...</div>
    <div class="col-12 col-md-6 px-15">...</div>
</div>

Espaciado: padding y margin
Todas las clases de espaciado funcionan con valores de 0 a 100 en píxeles, puedes modificar estos valores con Sass

.p-20       → padding: 20px
.pt-40      → padding-top: 40px
.mx-a       → margin-left + margin-right: auto
.mt-md-60   → margin-top: 60px desde md

Display y Flexbox
me.css incluye todas las clases necesarias para maquetar con flexbox sin escribir CSS.
Ejemplos útiles:

.d-f            → display: flex
.jc-c           → justify-content: center
.ai-c           → align-items: center
.fxd-c          → flex-direction: column
.fxw-w          → flex-wrap: wrap

Tipografía
Puedes controlar tamaño, peso, estilo, alineación y transformación del texto con clases muy directas.
Ejemplos:

.fz-18          → font-size: 18px
.fw-600         → font-weight: 600
.ta-c           → text-align: center
.tt-u           → text-transform: uppercase
.lh-24          → line-height: 24px

Posición y tamaños
Clases rápidas para posicionamiento:

.pos-r          → position: relative
.pos-a          → position: absolute
.w-100          → width: 100%
.h-a            → height: auto
.maw-100        → max-width: 100%

Overflow, bordes y background
Ejemplos:

.ov-h           → overflow: hidden
.bd-1           → border: 1px solid
.bdrs-8         → border-radius: 8px
.bgsz-cv        → background-size: cover

Colores
Los colores se generan automáticamente desde el mapa $colors.
Puedes aplicarlos a texto, fondo y borde, incluyendo variantes responsive y hover, todo listo para empezar a trabajar.

Ejemplos:

.c-blue                 → color azul
.bg-green-light         → fondo verde claro
.bd-red-dark            → borde rojo oscuro
.c-hv-orange            → color naranja en hover
.bg-md-neutral-20       → fondo neutral desde md

Visibilidad, cursor y otros utilitarios

.v-h            → visibility: hidden
.cur-p          → cursor: pointer
.bxz-bb         → box-sizing: border-box
.fl-r           → float: right
.rsz-v          → resize: vertical

¿Porque usar esta librería css
me css te permite maquetar de forma rápida, consistente y sin escribir CSS adicional.
Su sintaxis es simple, predecible y muy fácil de recordar, lo que la convierte en una herramienta ideal para proyectos donde la velocidad y la claridad son importantes.Si eres de los que te gusta mantener una velocidad de carga más que aceptable, esta es tu librería, ya que solo tiene un peso de 33KB, gracias a sus clases basadas en Emmet te será muy sencillo e intuitivo su uso, ahorrando mucho tiempo en la curva de aprendizaje.

Código fuente del proyecto final y documentación: (https://github.com/didesweb/me-css)

¿Tienes alguna sugerencia o aportación? Contáctame o deja un comentario.