me.css v4 beta ya disponible!
https://didesweb.com/css/me-css-sass/

35.4kb unminified


 

Me.css es una librería css basada en Emmet muy ligera 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 basado en Bootstrap. Esta librería 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 está en versión beta por lo que podrían producirse cambios importantes en el código en los próximos meses, aunque intentaremos que no sean demasiado profundos.

position

.pos-s{position:static!important}
.pos-r{position:relative!important} 
.pos-a{position:absolute!important}
.pos-f{position:fixed!important}
@media(min-width: 576px){.pos-sm-s{position:static!important}.pos-sm-r{position:relative!important}.pos-sm-a{position:absolute!important}.pos-sm-f{position:fixed!important}}
@media(min-width: 768px){.pos-md-s{position:static!important}.pos-md-r{position:relative!important}.pos-md-a{position:absolute!important}.pos-md-f{position:fixed!important}}
@media(min-width: 992px){.pos-lg-s{position:static!important}.pos-lg-r{position:relative!important}.pos-lg-a{position:absolute!important}.pos-lg-f{position:fixed!important}}
@media(min-width:1200px){.pos-xl-s{position:static!important}.pos-xl-r{position:relative!important}.pos-xl-a{position:absolute!important}.pos-xl-f{position:fixed!important}}

sizes

.w-100{width:100%!important}
.h-100{height:100%!important}
.w-a{width:auto!important}
.h-a{height:auto!important}
.maw-100{max-width:100%!important}
.mah-100{max-height:100%!important}

float

.fl-l{float:left!important}
.fl-r{float:right!important}
.fl-n{float:none!important}
@media(min-width: 576px){.fl-sm-l{float:left!important}.fl-sm-r{float:right!important}.fl-sm-n{float:none!important}}
@media(min-width: 768px){.fl-md-l{float:left!important}.fl-md-r{float:right!important}.fl-md-n{float:none!important}}
@media(min-width: 992px){.fl-lg-l{float:left!important}.fl-lg-r{float:right!important}.fl-lg-n{float:none!important}}
@media(min-width:1200px){.fl-xl-l{float:left!important}.fl-xl-r{float:right!important}.fl-xl-n{float:none!important}}

clear

.cl-n{clear:none!important}
.cl-l{clear:left!important}
.cl-r{clear:right!important}
.cl-b{clear:both!important}

overflow

.ov-v{overflow:visible!important}
.ov-h{overflow:hidden!important}
.ov-s{overflow:scroll!important}
.ov-a{overflow:auto!important}
.ovx-v{overflow-x:visible!important}
.ovx-h{overflow-x:hidden!important}
.ovx-s{overflow-x:scroll!important}
.ovx-a{overflow-x:auto!important}
.ovy-v{overflow-y:visible!important}
.ovy-h{overflow-y:hidden!important}
.ovy-s{overflow-y:scroll!important}
.ovy-a{overflow-y:auto!important}

cursor

.cur-a{cursor:auto!important}
.cur-d{cursor:default!important}
.cur-c{cursor:crosshair!important}
.cur-ha{cursor:hand!important}
.cur-he{cursor:help!important}
.cur-m{cursor:move!important}
.cur-p{cursor:pointer!important}
.cur-t{cursor:text!important}

box-sizing

.bxz-cb{box-sizing:content-box!important}
.bxz-bb{box-sizing:border-box!important}

font-weight

.fw-n{font-weight:normal!important}
.fw-b{font-weight:bold!important}
.fw-lr{font-weight:lighter!important}
.fw-br{font-weight:bolder!important}

font-style

.fs-n{font-style:normal!important}
.fs-i{font-style:italic!important}

vertical-align

.va-bl{vertical-align:baseline!important}
.va-t{vertical-align:top!important}
.va-m{vertical-align:middle!important}
.va-b{vertical-align:bottom!important}
.va-tb{vertical-align:text-bottom!important}
.va-tt{vertical-align:text-top!important}

text-align

.ta-l{text-align:left!important}
.ta-r{text-align:right!important}
.ta-c{text-align:center!important}
.ta-j{text-align:justify!important}
@media(min-width: 576px){.ta-sm-l{text-align:left!important}.ta-sm-r{text-align:right!important}.ta-sm-c{text-align:center!important}.ta-sm-j{text-align:justify!important}}
@media(min-width: 768px){.ta-md-l{text-align:left!important}.ta-md-r{text-align:right!important}.ta-md-c{text-align:center!important}.ta-md-j{text-align:justify!important}}
@media(min-width: 992px){.ta-lg-l{text-align:left!important}.ta-lg-r{text-align:right!important}.ta-lg-c{text-align:center!important}.ta-lg-j{text-align:justify!important}}
@media(min-width:1200px){.ta-xl-l{text-align:left!important}.ta-xl-r{text-align:right!important}.ta-xl-c{text-align:center!important}.ta-xl-j{text-align:justify!important}}

text-transform

.tt-l{text-transform:lowercase!important}
.tt-u{text-transform:uppercase!important}
.tt-c{text-transform:capitalize!important}

text-decoration

.td-n{text-decoration:none!important}
.td-u{text-decoration:underline!important}
.td-o{text-decoration:overline!important}
.td-l{text-decoration:line-through!important}

white-space

.whs-n{white-space:normal!important}
.whs-p{white-space:pre!important}
.whs-nw{white-space:nowrap!important}
.whs-pw{white-space:pre-wrap!important}
.whs-pl{white-space:pre-line!important}

word-break

.wob-n{word-break:normal!important}
.wob-k{word-break:keep-all!important}
.wob-ba{word-break:break-all!important}

background

.bgsz-a{background-size:auto!important}
.bgsz-ct{background-size:contain!important}
.bgsz-cv{background-size:cover!important}
.bgr-n{background-repeat:no-repeat!important}
.bgr-x{background-repeat:repeat-x!important}
.bgr-y{background-repeat:repeat-y!important}
.bgr-sp{background-repeat:space!important}
.bgr-rd{background-repeat:round!important}
.bgc-t{background-color:transparent!important}

list-style-type

.list-n{list-style-type:none!important}
.list-d{list-style-type:disc!important}
.list-c{list-style-type:circle!important}
.list-s{list-style-type:square!important}
.list-dc{list-style-type:decimal!important}
.list-dclz{list-style-type:decimal-leading-zero!important}

outline

.ol-n{outline:none!important}

display

.d-n{display:none!important}
.d-i{display:inline!important}
.d-ib{display:inline-block!important}
.d-b{display:block!important}
.d-tb{display:table!important}
.d-tbr{display:table-row!important}
.d-tbc{display:table-cell!important}
.d-f{display:flex!important}
.d-i-f{display:inline-flex!important}
@media (min-width: 576px) {.d-sm-n{display:none!important}.d-sm-i{display:inline!important}.d-sm-ib{display:inline-block!important}.d-sm-b{display:block!important}.d-sm-tb{display:table!important}.d-sm-tbr{display:table-row!important}.d-sm-tbc{display:table-cell!important}.d-sm-f{display:flex!important}.d-sm-i-f{display:inline-flex!important}}
@media (min-width: 768px) {.d-md-n{display:none!important}.d-md-i{display:inline!important}.d-md-ib{display:inline-block!important}.d-md-b{display:block!important}.d-md-tb{display:table!important}.d-md-tbr{display:table-row!important}.d-md-tbc{display:table-cell!important}.d-md-f{display:flex!important}.d-md-i-f{display:inline-flex!important}}
@media (min-width: 992px) {.d-lg-n{display:none!important}.d-lg-i{display:inline!important}.d-lg-ib{display:inline-block!important}.d-lg-b{display:block!important}.d-lg-tb{display:table!important}.d-lg-tbr{display:table-row!important}.d-lg-tbc{display:table-cell!important}.d-lg-f{display:flex!important}.d-lg-i-f{display:inline-flex!important}}
@media (min-width: 1200px){.d-xl-n{display:none!important}.d-xl-i{display:inline!important}.d-xl-ib{display:inline-block!important}.d-xl-b{display:block!important}.d-xl-tb{display:table!important}.d-xl-tbr{display:table-row!important}.d-xl-tbc{display:table-cell!important}.d-xl-f{display:flex!important}.d-xl-i-f{display:inline-flex!important}}

visibility

.v-v{visibility:visible!important}
.v-h{visibility:hidden!important}
@media(min-width: 576px){.v-sm-v{visibility:visible!important}.v-sm-h{text-align:hidden!important}}
@media(min-width: 768px){.v-md-v{visibility:visible!important}.v-md-h{visibility:hidden!important}}
@media(min-width: 992px){.v-lg-v{visibility:visible!important}.v-lg-h{visibility:hidden!important}}
@media(min-width:1200px){.v-xl-v{visibility:visible!important}.v-xl-h{visibility:hidden!important}}

fontstyle

.fs-it {font-style:italic!important}

flex

.fxdc{flex-direction:column!important}
.fxdcr{flex-direction:column-reverse!important}
.fxdr{flex-direction:row!important}
.fxdrr{flex-direction:row-reverse!important}
.fxwn{flex-wrap:nowrap!important}
.fxww{flex-wrap:wrap!important}
.fxwwr{flex-wrap:wrap-reverse!important}

justify-content

.jc-c{justify-content:center!important}
.jc-fe{justify-content:flex-end!important}
.jc-fs{justify-content:flex-start!important}
.jc-sa{justify-content:space-around!important}
.jc-sb{justify-content:space-between!important}

align-self

.as-a{align-self:auto!important}
.as-b{align-self:baseline!important}
.as-c{align-self:center!important}
.as-fe{align-self:flex-end!important}
.as-fs{align-self:flex-start!important}
.as-s{align-self:stretch!important}

align-content

.ac-c{align-content:center!important}
.ac-fe{align-content:flex-end!important}
.ac-fs{align-content:flex-start!important}
.ac-s{align-content:stretch!important}
.ac-sa{align-content:space-around!important}
.ac-sb{align-content:space-between!important}

align-items

.ai-b{align-items:baseline!important}
.ai-c{align-items:center!important}
.ai-fe{align-items:flex-end!important}
.ai-fs{align-items:flex-start!important}
.ai-s{align-items:stretch!important}

Más
Sistema de rejillas basado en Bootstrap, cols, order, offset y spaces

me-grid

.box{width:100%}
.box-big{width:100%}
.box-align-right{padding-right: 5%} 
@media(min-width: 576px){.box, .box-big{max-width:540px}}
@media(min-width: 768px){.box, .box-big{max-width:720px}}
@media(min-width: 992px){.box, .box-big{max-width:960px}}
@media(min-width:1200px){.box, .box-big{max-width:1200px}}  
@media(min-width:1400px){.box.box-big{max-width:1400px}}  
@media(min-width:1600px){.box.box-big{max-width:1600px}}  
.col-a,.col-1,.col-2,.col-3,.col-4,.col-5,.col-6,.col-7,.col-8,.col-9,.col-10,.col-11,.col-12,
.col-sm-a,.col-sm-1,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,.col-sm-9,.col-sm-10,.col-sm-11,.col-sm-12,
.col-md-a,.col-md-1,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9,.col-md-10,.col-md-11,.col-md-12,
.col-lg-a,.col-lg-1,.col-lg-2,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8,.col-lg-9,.col-lg-10,.col-lg-11,.col-lg-12,
.col-xl-a,.col-xl-1,.col-xl-2,.col-xl-3,.col-xl-4,.col-xl-5,.col-xl-6,.col-xl-7,.col-xl-8,.col-xl-9,.col-xl-10,.col-xl-11,.col-xl-12,
.col-xxl-a,.col-xxl-1,.col-xxl-2,.col-xxl-3,.col-xxl-4,.col-xxl-5,.col-xxl-6,.col-xxl-7,.col-xxl-8,.col-xxl-9,.col-xxl-10,.col-xxl-11,.col-xxl-12 {
    position:relative;width:100%;
}
.col-a{flex:0 0 auto;width:auto;max-width:none}
.col-1{flex:0 0 8.333333%;max-width:8.333333%}
.col-2{flex:0 0 16.666667%;max-width:16.666667%}
.col-3{flex:0 0 25%;max-width:25%}
.col-4{flex:0 0 33.333333%;max-width:33.333333%}
.col-5{flex:0 0 41.666667%;max-width:41.666667%}
.col-6{flex:0 0 50%;max-width:50%}
.col-7{flex:0 0 58.333333%;max-width:58.333333%}
.col-8{flex:0 0 66.666667%;max-width:66.666667%}
.col-9{flex:0 0 75%;max-width:75%}
.col-10{flex:0 0 83.333333%;max-width:83.333333%}
.col-11{flex:0 0 91.666667%;max-width:91.666667%}
.col-12{flex:0 0 100%;max-width:100%}
@media (min-width: 576px) {
    .col-sm-a{flex:0 0 auto;width:auto;max-width:none}
    .col-sm-1{flex:0 0 8.333333%;max-width:8.333333%}
    .col-sm-2{flex:0 0 16.666667%;max-width:16.666667%}
    .col-sm-3{flex:0 0 25%;max-width:25%}
    .col-sm-4{flex:0 0 33.333333%;max-width:33.333333%}
    .col-sm-5{flex:0 0 41.666667%;max-width:41.666667%}
    .col-sm-6{flex:0 0 50%;max-width:50%}
    .col-sm-7{flex:0 0 58.333333%;max-width:58.333333%}
    .col-sm-8{flex:0 0 66.666667%;max-width:66.666667%}
    .col-sm-9{flex:0 0 75%;max-width:75%}
    .col-sm-10{flex:0 0 83.333333%;max-width:83.333333%}
    .col-sm-11{flex:0 0 91.666667%;max-width:91.666667%}
    .col-sm-12{flex:0 0 100%;max-width:100%}
}
@media (min-width: 768px) {
    .col-md-a {flex:0 0 auto;width:auto;max-width:none}
    .col-md-1 {flex:0 0 8.333333%;max-width:8.333333%}
    .col-md-2 {flex:0 0 16.666667%;max-width:16.666667%}
    .col-md-3 {flex:0 0 25%;max-width:25%}
    .col-md-4 {flex:0 0 33.333333%;max-width:33.333333%}
    .col-md-5 {flex:0 0 41.666667%;max-width:41.666667%}
    .col-md-6 {flex:0 0 50%;max-width:50%}
    .col-md-7 {flex:0 0 58.333333%;max-width:58.333333%}
    .col-md-8 {flex:0 0 66.666667%;max-width:66.666667%}
    .col-md-9 {flex:0 0 75%;max-width:75%}
    .col-md-10{flex:0 0 83.333333%;max-width:83.333333%}
    .col-md-11{flex:0 0 91.666667%;max-width:91.666667%}
    .col-md-12{flex:0 0 100%;max-width:100%}
}
@media (min-width: 992px) {
    .col-lg-a{flex: 0 0 auto;width:auto;max-width:none}
    .col-lg-1{flex: 0 0 8.333333%;max-width:8.333333%}
    .col-lg-2{flex: 0 0 16.666667%;max-width:16.666667%}
    .col-lg-3{flex: 0 0 25%;max-width:25%}
    .col-lg-4{flex: 0 0 33.333333%;max-width:33.333333%}
    .col-lg-5{flex: 0 0 41.666667%;max-width:41.666667%}
    .col-lg-6{flex: 0 0 50%;max-width:50%}
    .col-lg-7{flex: 0 0 58.333333%;max-width:58.333333%}
    .col-lg-8{flex: 0 0 66.666667%;max-width:66.666667%}
    .col-lg-9{flex: 0 0 75%;max-width:75%}
    .col-lg-10{flex: 0 0 83.333333%;max-width:83.333333%}
    .col-lg-11{flex: 0 0 91.666667%;max-width:91.666667%}
    .col-lg-12{flex: 0 0 100%;max-width:100%}
}
@media (min-width: 1200px) {
    .col-xl-a{flex: 0 0 auto;width:auto;max-width:none}
    .col-xl-1{flex: 0 0 8.333333%;max-width:8.333333%}
    .col-xl-2{flex: 0 0 16.666667%;max-width:16.666667%}
    .col-xl-3{flex: 0 0 25%;max-width:25%}
    .col-xl-4{flex: 0 0 33.333333%;max-width:33.333333%}
    .col-xl-5{flex: 0 0 41.666667%;max-width:41.666667%}
    .col-xl-6{flex: 0 0 50%;max-width:50%}
    .col-xl-7{flex: 0 0 58.333333%;max-width:58.333333%}
    .col-xl-8{flex: 0 0 66.666667%;max-width:66.666667%}
    .col-xl-9{flex: 0 0 75%;max-width:75%}
    .col-xl-10{flex: 0 0 83.333333%;max-width:83.333333%}
    .col-xl-11{flex: 0 0 91.666667%;max-width:91.666667%}
    .col-xl-12{max-width:100%}
}
@media (min-width: 1340px) {
    .col-xxl-a{flex: 0 0 auto;width:auto;max-width:none}
    .col-xxl-1{flex: 0 0 8.333333%;max-width:8.333333%}
    .col-xxl-2{flex: 0 0 16.666667%;max-width:16.666667%}
    .col-xxl-3{flex: 0 0 25%;max-width:25%}
    .col-xxl-4{flex: 0 0 33.333333%;max-width:33.333333%}
    .col-xxl-5{flex: 0 0 41.666667%;max-width:41.666667%}
    .col-xxl-6{flex: 0 0 50%;max-width:50%}
    .col-xxl-7{flex: 0 0 58.333333%;max-width:58.333333%}
    .col-xxl-8{flex: 0 0 66.666667%;max-width:66.666667%}
    .col-xxl-9{flex: 0 0 75%;max-width:75%}
    .col-xxl-10{flex: 0 0 83.333333%;max-width:83.333333%}
    .col-xxl-11{flex: 0 0 91.666667%;max-width:91.666667%}
    .col-xxl-12{max-width:100%}
}

me-order

.ord-col-0{order:0!important}.ord-col-1{order:1!important}.ord-col-2{order:2!important}.ord-col-3{order:3!important}.ord-col-4{order:4!important}.ord-col-5{order:5!important}.ord-col-6{order:6!important}.ord-col-7{order:7!important}.ord-col-8{order:8!important}.ord-col-9{order:9!important}.ord-col-10{order:10!important}.ord-col-11{order:11!important}.ord-col-12{order:12!important}
@media (min-width: 576px) {.ord-col-sm-0{order:0!important}.ord-col-sm-1{order:1!important}.ord-col-sm-2{order:2!important}.ord-col-sm-3{order:3!important}.ord-col-sm-4{order:4!important}.ord-col-sm-5{order:5!important}.ord-col-sm-6{order:6!important}.ord-col-sm-7{order:7!important}.ord-col-sm-8{order:8!important}.ord-col-sm-9{order:9!important}.ord-col-sm-10{order:10!important}.ord-col-sm-11{order:11!important}.ord-col-sm-12{order:12!important}}
@media (min-width: 768px) {.ord-col-md-0{order:0!important}.ord-col-md-1{order:1!important}.ord-col-md-2{order:2!important}.ord-col-md-3{order:3!important}.ord-col-md-4{order:4!important}.ord-col-md-5{order:5!important}.ord-col-md-6{order:6!important}.ord-col-md-7{order:7!important}.ord-col-md-8{order:8!important}.ord-col-md-9{order:9!important}.ord-col-md-10{order:10!important}.ord-col-md-11{order:11!important}.ord-col-md-12{order:12!important}}
@media (min-width: 992px) {.ord-col-lg-0{order:0!important}.ord-col-lg-1{order:1!important}.ord-col-lg-2{order:2!important}.ord-col-lg-3{order:3!important}.ord-col-lg-4{order:4!important}.ord-col-lg-5{order:5!important}.ord-col-lg-6{order:6!important}.ord-col-lg-7{order:7!important}.ord-col-lg-8{order:8!important}.ord-col-lg-9{order:9!important}.ord-col-lg-10{order:10!important}.ord-col-lg-11{order:11!important}.ord-col-lg-12{order:12!important}}
@media (min-width: 1200px) {.ord-col-xl-0{order:0!important}.ord-col-xl-1{order:1!important}.ord-col-xl-2{order:2!important}.ord-col-xl-3{order:3!important}.ord-col-xl-4{order:4!important}.ord-col-xl-5{order:5!important}.ord-col-xl-6{order:6!important}.ord-col-xl-7{order:7!important}.ord-col-xl-8{order:8!important}.ord-col-xl-9{order:9!important}.ord-col-xl-10{order:10!important}.ord-col-xl-11{order:11!important}.ord-col-xl-12{order:12!important}}

me-offset

.ml-col-0{margin-left:0!important}.ml-col-1{margin-left:8.333333%!important}.ml-col-2{margin-left:16.666667%!important}.ml-col-3{margin-left:25%!important}.ml-col-4{margin-left:33.333333%!important}.ml-col-5{margin-left:41.666667%!important}.ml-col-6{margin-left:50%!important}.ml-col-7{margin-left:58.333333%!important}.ml-col-8{margin-left:66.666667%!important}.ml-col-9{margin-left:75%!important}.ml-col-10{margin-left:83.333333%!important}.ml-col-11{margin-left:91.666667%!important}
@media (min-width: 576px) {.ml-col-sm-0{margin-left:0!important}.ml-col-sm-1{margin-left:8.333333%!important}.ml-col-sm-2{margin-left:16.666667%!important}.ml-col-sm-3{margin-left:25%!important}.ml-col-sm-4{margin-left:33.333333%!important}.ml-col-sm-5{margin-left:41.666667%!important}.ml-col-sm-6{margin-left:50%!important}.ml-col-sm-7{margin-left:58.333333%!important}.ml-col-sm-8{margin-left:66.666667%!important}.ml-col-sm-9{margin-left:75%!important}.ml-col-sm-10{margin-left:83.333333%!important}.ml-col-sm-11{margin-left:91.666667%!important}}
@media (min-width: 768px) {.ml-col-md-0{margin-left:0!important}.ml-col-md-1{margin-left:8.333333%!important}.ml-col-md-2{margin-left:16.666667%!important}.ml-col-md-3{margin-left:25%!important}.ml-col-md-4{margin-left:33.333333%!important}.ml-col-md-5{margin-left:41.666667%!important}.ml-col-md-6{margin-left:50%!important}.ml-col-md-7{margin-left:58.333333%!important}.ml-col-md-8{margin-left:66.666667%!important}.ml-col-md-9{margin-left:75%!important}.ml-col-md-10{margin-left:83.333333%!important}.ml-col-md-11{margin-left:91.666667%!important}}
@media (min-width: 992px) {.ml-col-lg-0{margin-left:0!important}.ml-col-lg-1{margin-left:8.333333%!important}.ml-col-lg-2{margin-left:16.666667%!important}.ml-col-lg-3{margin-left:25%!important}.ml-col-lg-4{margin-left:33.333333%!important}.ml-col-lg-5{margin-left:41.666667%!important}.ml-col-lg-6{margin-left:50%!important}.ml-col-lg-7{margin-left:58.333333%!important}.ml-col-lg-8{margin-left:66.666667%!important}.ml-col-lg-9{margin-left:75%!important}.ml-col-lg-10{margin-left:83.333333%!important}.ml-col-lg-11{margin-left:91.666667%!important}}
@media (min-width: 1200px) {.ml-col-xl-0{margin-left:0!important}.ml-col-xl-1{margin-left:8.333333%!important}.ml-col-xl-2{margin-left:16.666667%!important}.ml-col-xl-3{margin-left:25%!important}.ml-col-xl-4{margin-left:33.333333%!important}.ml-col-xl-5{margin-left:41.666667%!important}.ml-col-xl-6{margin-left:50%!important}.ml-col-xl-7{margin-left:58.333333%!important}.ml-col-xl-8{margin-left:66.666667%!important}.ml-col-xl-9{margin-left:75%!important}.ml-col-xl-10{margin-left:83.333333%!important}.ml-col-xl-11{margin-left:91.666667%!important}}

me-spaces

.m-0 {margin:0!important}.mt-0,.my-0{margin-top:0!important}.mr-0,.mx-0{margin-right:0!important}.mb-0,.my-0{margin-bottom:0!important}.ml-0,.mx-0{margin-left:0!important}
.m-5 {margin:5px!important}.mt-5,.my-5{margin-top:5px!important}.mr-5,.mx-5{margin-right:5px!important}.mb-5,.my-5{margin-bottom:5px!important}.ml-5,.mx-5{margin-left:5px!important}
.m-10{margin:10px!important}.mt-10,.my-10{margin-top:10px!important}.mr-10,.mx-10{margin-right:10px!important}.mb-10,.my-10{margin-bottom:10px!important}.ml-10,.mx-10{margin-left:10px!important}
.m-15{margin:15px!important}.mt-15,.my-15{margin-top:15px!important}.mr-15,.mx-15{margin-right:15px!important}.mb-15,.my-15{margin-bottom:15px!important}.ml-15,.mx-15{margin-left:15px!important}
.m-30{margin:30px!important}.mt-30,.my-30{margin-top:30px!important}.mr-30,.mx-30{margin-right:30px!important}.mb-30,.my-30{margin-bottom:30px!important}.ml-30,.mx-30{margin-left:30px!important}
.p-0 {padding:0!important}.pt-0,.py-0{padding-top:0!important}.pr-0,.px-0{padding-right:0!important}.pb-0,.py-0{padding-bottom:0!important}.pl-0,.px-0{padding-left:0!important}
.p-5 {padding:5px!important}.pt-5,.py-5{padding-top:5px!important}.pr-5,.px-5{padding-right:5px!important}.pb-5,.py-5{padding-bottom:5px!important}.pl-5,.px-5{padding-left:5px!important}
.p-10{padding:10px!important}.pt-10,.py-10{padding-top:10px!important}.pr-10,.px-10{padding-right:10px!important}.pb-10,.py-10{padding-bottom:10px!important}.pl-10,.px-10{padding-left:10px!important}
.p-15{padding:15px!important}.pt-15,.py-15{padding-top:15px!important}.pr-15,.px-15{padding-right:15px!important}.pb-15,.py-15{padding-bottom:15px!important}.pl-15,.px-15{padding-left:15px!important}
.p-30{padding:30px!important}.pt-30,.py-30{padding-top:30px!important}.pr-30,.px-30{padding-right:30px!important}.pb-30,.py-30{padding-bottom:30px!important}.pl-30,.px-30{padding-left:30px!important}
.m-a {margin:auto!important}.mt-a,.my-a{margin-top:auto!important}.mr-a,.mx-a{margin-right:auto!important}.mb-a,.my-a{margin-bottom:auto!important}.ml-a,.mx-a{margin-left:auto!important}
@media (min-width: 576px) {
    .m-sm-0 {margin:0!important}.mt-sm-0,.my-sm-0{margin-top:0!important}.mr-sm-0,.mx-sm-0{margin-right:0!important}.mb-sm-0,.my-sm-0{margin-bottom:0!important}.ml-sm-0,.mx-sm-0{margin-left:0!important}
    .m-sm-5 {margin:5px!important}.mt-sm-5,.my-sm-5{margin-top:5px!important}.mr-sm-5,.mx-sm-5{margin-right:5px!important}.mb-sm-5,.my-sm-5{margin-bottom:5px!important}.ml-sm-5,.mx-sm-5{margin-left:5px!important}
    .m-sm-10{margin:10px!important}.mt-sm-10,.my-sm-10{margin-top:10px!important}.mr-sm-10,.mx-sm-10{margin-right:10px!important}.mb-sm-10,.my-sm-10{margin-bottom:10px!important}.ml-sm-10,.mx-sm-10{margin-left:10px!important}
    .m-sm-15{margin:15px!important}.mt-sm-15,.my-sm-15{margin-top:15px!important}.mr-sm-15,.mx-sm-15{margin-right:15px!important}.mb-sm-15,.my-sm-15{margin-bottom:15px!important}.ml-sm-15,.mx-sm-15{margin-left:15px!important}
    .m-sm-30{margin:30px!important}.mt-sm-30,.my-sm-30{margin-top:30px!important}.mr-sm-30,.mx-sm-30{margin-right:30px!important}.mb-sm-30,.my-sm-30{margin-bottom:30px!important}.ml-sm-30,.mx-sm-30{margin-left:30px!important}
    .p-sm-0 {padding:0!important}.pt-sm-0,.py-sm-0{padding-top:0!important}.pr-sm-0,.px-sm-0{padding-right:0!important}.pb-sm-0,.py-sm-0{padding-bottom:0!important}.pl-sm-0,.px-sm-0{padding-left:0!important}
    .p-sm-5 {padding:5px!important}.pt-sm-5,.py-sm-5{padding-top:5px!important}.pr-sm-5,.px-sm-5{padding-right:5px!important}.pb-sm-5,.py-sm-5{padding-bottom:5px!important}.pl-sm-5,.px-sm-5{padding-left:5px!important}
    .p-sm-10{padding:10px!important}.pt-sm-10,.py-sm-10{padding-top:10px!important}.pr-sm-10,.px-sm-10{padding-right:10px!important}.pb-sm-10,.py-sm-10{padding-bottom:10px!important}.pl-sm-10,.px-sm-10{padding-left:10px!important}
    .p-sm-15{padding:15px!important}.pt-sm-15,.py-sm-15{padding-top:15px!important}.pr-sm-15,.px-sm-15{padding-right:15px!important}.pb-sm-15,.py-sm-15{padding-bottom:15px!important}.pl-sm-15,.px-sm-15{padding-left:15px!important}
    .p-sm-30{padding:30px!important}.pt-sm-30,.py-sm-30{padding-top:30px!important}.pr-sm-30,.px-sm-30{padding-right:30px!important}.pb-sm-30,.py-sm-30{padding-bottom:30px!important}.pl-sm-30,.px-sm-30{padding-left:30px!important}
    .m-sm-a {margin:auto!important}.mt-sm-a,.my-sm-a{margin-top:auto!important}.mr-sm-a,.mx-sm-a{margin-right:auto!important}.mb-sm-a,.my-sm-a{margin-bottom:auto!important}.ml-sm-a,.mx-sm-a{margin-left:auto!important}
}
@media (min-width: 768px) {
    .m-md-0 {margin:0!important}.mt-md-0,.my-md-0{margin-top:0!important}.mr-md-0,.mx-md-0{margin-right:0!important}.mb-md-0,.my-md-0{margin-bottom:0!important}.ml-md-0,.mx-md-0{margin-left:0!important}
    .m-md-5 {margin:5px!important}.mt-md-5,.my-md-5{margin-top:5px!important}.mr-md-5,.mx-md-5{margin-right:5px!important}.mb-md-5,.my-md-5{margin-bottom:5px!important}.ml-md-5,.mx-md-5{margin-left:5px!important}
    .m-md-10{margin:10px!important}.mt-md-10,.my-md-10{margin-top:10px!important}.mr-md-10,.mx-md-10{margin-right:10px!important}.mb-md-10,.my-md-10{margin-bottom:10px!important}.ml-md-10,.mx-md-10{margin-left:10px!important}
    .m-md-15{margin:15px!important}.mt-md-15,.my-md-15{margin-top:15px!important}.mr-md-15,.mx-md-15{margin-right:15px!important}.mb-md-15,.my-md-15{margin-bottom:15px!important}.ml-md-15,.mx-md-15{margin-left:15px!important}
    .m-md-30{margin:30px!important}.mt-md-30,.my-md-30{margin-top:30px!important}.mr-md-30,.mx-md-30{margin-right:30px!important}.mb-md-30,.my-md-30{margin-bottom:30px!important}.ml-md-30,.mx-md-30{margin-left:30px!important}
    .p-md-0 {padding:0!important}.pt-md-0,.py-md-0{padding-top:0!important}.pr-md-0,.px-md-0{padding-right:0!important}.pb-md-0,.py-md-0{padding-bottom:0!important}.pl-md-0,.px-md-0{padding-left:0!important}
    .p-md-5 {padding:5px!important}.pt-md-5,.py-md-5{padding-top:5px!important}.pr-md-5,.px-md-5{padding-right:5px!important}.pb-md-5,.py-md-5{padding-bottom:5px!important}.pl-md-5,.px-md-5{padding-left:5px!important}
    .p-md-10{padding:10px!important}.pt-md-10,.py-md-10{padding-top:10px!important}.pr-md-10,.px-md-10{padding-right:10px!important}.pb-md-10,.py-md-10{padding-bottom:10px!important}.pl-md-10,.px-md-10{padding-left:10px!important}
    .p-md-15{padding:15px!important}.pt-md-15,.py-md-15{padding-top:15px!important}.pr-md-15,.px-md-15{padding-right:15px!important}.pb-md-15,.py-md-15{padding-bottom:15px!important}.pl-md-15,.px-md-15{padding-left:15px!important}
    .p-md-30{padding:30px!important}.pt-md-30,.py-md-30{padding-top:30px!important}.pr-md-30,.px-md-30{padding-right:30px!important}.pb-md-30,.py-md-30{padding-bottom:30px!important}.pl-md-30,.px-md-30{padding-left:30px!important}
    .m-md-a {margin:auto!important}.mt-md-a,.my-md-a{margin-top:auto!important}.mr-md-a,.mx-md-a{margin-right:auto!important}.mb-md-a,.my-md-a{margin-bottom:auto!important}.ml-md-a,.mx-md-a{margin-left:auto!important}
}
@media (min-width: 992px) {
    .m-lg-0 {margin:0!important}.mt-lg-0,.my-lg-0{margin-top:0!important}.mr-lg-0,.mx-lg-0{margin-right:0!important}.mb-lg-0,.my-lg-0{margin-bottom:0!important}.ml-lg-0,.mx-lg-0{margin-left:0!important}
    .m-lg-5 {margin:5px!important}.mt-lg-5,.my-lg-5{margin-top:5px!important}.mr-lg-5,.mx-lg-5{margin-right:5px!important}.mb-lg-5,.my-lg-5{margin-bottom:5px!important}.ml-lg-5,.mx-lg-5{margin-left:5px!important}
    .m-lg-10{margin:10px!important}.mt-lg-10,.my-lg-10{margin-top:10px!important}.mr-lg-10,.mx-lg-10{margin-right:10px!important}.mb-lg-10,.my-lg-10{margin-bottom:10px!important}.ml-lg-10,.mx-lg-10{margin-left:10px!important}
    .m-lg-15{margin:15px!important}.mt-lg-15,.my-lg-15{margin-top:15px!important}.mr-lg-15,.mx-lg-15{margin-right:15px!important}.mb-lg-15,.my-lg-15{margin-bottom:15px!important}.ml-lg-15,.mx-lg-15{margin-left:15px!important}
    .m-lg-30{margin:30px!important}.mt-lg-30,.my-lg-30{margin-top:30px!important}.mr-lg-30,.mx-lg-30{margin-right:30px!important}.mb-lg-30,.my-lg-30{margin-bottom:30px!important}.ml-lg-30,.mx-lg-30{margin-left:30px!important}
    .p-lg-0 {padding:0!important}.pt-lg-0,.py-lg-0{padding-top:0!important}.pr-lg-0,.px-lg-0{padding-right:0!important}.pb-lg-0,.py-lg-0{padding-bottom:0!important}.pl-lg-0,.px-lg-0{padding-left:0!important}
    .p-lg-5 {padding:5px!important}.pt-lg-5,.py-lg-5{padding-top:5px!important}.pr-lg-5,.px-lg-5{padding-right:5px!important}.pb-lg-5,.py-lg-5{padding-bottom:5px!important}.pl-lg-5,.px-lg-5{padding-left:5px!important}
    .p-lg-10{padding:10px!important}.pt-lg-10,.py-lg-10{padding-top:10px!important}.pr-lg-10,.px-lg-10{padding-right:10px!important}.pb-lg-10,.py-lg-10{padding-bottom:10px!important}.pl-lg-10,.px-lg-10{padding-left:10px!important}
    .p-lg-15{padding:15px!important}.pt-lg-15,.py-lg-15{padding-top:15px!important}.pr-lg-15,.px-lg-15{padding-right:15px!important}.pb-lg-15,.py-lg-15{padding-bottom:15px!important}.pl-lg-15,.px-lg-15{padding-left:15px!important}
    .p-lg-30{padding:30px!important}.pt-lg-30,.py-lg-30{padding-top:30px!important}.pr-lg-30,.px-lg-30{padding-right:30px!important}.pb-lg-30,.py-lg-30{padding-bottom:30px!important}.pl-lg-30,.px-lg-30{padding-left:30px!important}
    .m-lg-a {margin:auto!important}.mt-lg-a,.my-lg-a{margin-top:auto!important}.mr-lg-a,.mx-lg-a{margin-right:auto!important}.mb-lg-a,.my-lg-a{margin-bottom:auto!important}.ml-lg-a,.mx-lg-a{margin-left:auto!important}
}
@media (min-width: 1200px) {
    .m-xl-0 {margin:0!important}.mt-xl-0,.my-xl-0{margin-top:0!important}.mr-xl-0,.mx-xl-0{margin-right:0!important}.mb-xl-0,.my-xl-0{margin-bottom:0!important}.ml-xl-0,.mx-xl-0{margin-left:0!important}
    .m-xl-5 {margin:5px!important}.mt-xl-5,.my-xl-5{margin-top:5px!important}.mr-xl-5,.mx-xl-5{margin-right:5px!important}.mb-xl-5,.my-xl-5{margin-bottom:5px!important}.ml-xl-5,.mx-xl-5{margin-left:5px!important}
    .m-xl-10{margin:10px!important}.mt-xl-10,.my-xl-10{margin-top:10px!important}.mr-xl-10,.mx-xl-10{margin-right:10px!important}.mb-xl-10,.my-xl-10{margin-bottom:10px!important}.ml-xl-10,.mx-xl-10{margin-left:10px!important}
    .m-xl-15{margin:15px!important}.mt-xl-15,.my-xl-15{margin-top:15px!important}.mr-xl-15,.mx-xl-15{margin-right:15px!important}.mb-xl-15,.my-xl-15{margin-bottom:15px!important}.ml-xl-15,.mx-xl-15{margin-left:15px!important}
    .m-xl-30{margin:30px!important}.mt-xl-30,.my-xl-30{margin-top:30px!important}.mr-xl-30,.mx-xl-30{margin-right:30px!important}.mb-xl-30,.my-xl-30{margin-bottom:30px!important}.ml-xl-30,.mx-xl-30{margin-left:30px!important}
    .p-xl-0 {padding:0!important}.pt-xl-0,.py-xl-0{padding-top:0!important}.pr-xl-0,.px-xl-0{padding-right:0!important}.pb-xl-0,.py-xl-0{padding-bottom:0!important}.pl-xl-0,.px-xl-0{padding-left:0!important}
    .p-xl-5 {padding:5px!important}.pt-xl-5,.py-xl-5{padding-top:5px!important}.pr-xl-5,.px-xl-5{padding-right:5px!important}.pb-xl-5,.py-xl-5{padding-bottom:5px!important}.pl-xl-5,.px-xl-5{padding-left:5px!important}
    .p-xl-10{padding:10px!important}.pt-xl-10,.py-xl-10{padding-top:10px!important}.pr-xl-10,.px-xl-10{padding-right:10px!important}.pb-xl-10,.py-xl-10{padding-bottom:10px!important}.pl-xl-10,.px-xl-10{padding-left:10px!important}
    .p-xl-15{padding:15px!important}.pt-xl-15,.py-xl-15{padding-top:15px!important}.pr-xl-15,.px-xl-15{padding-right:15px!important}.pb-xl-15,.py-xl-15{padding-bottom:15px!important}.pl-xl-15,.px-xl-15{padding-left:15px!important}
    .p-xl-30{padding:30px!important}.pt-xl-30,.py-xl-30{padding-top:30px!important}.pr-xl-30,.px-xl-30{padding-right:30px!important}.pb-xl-30,.py-xl-30{padding-bottom:30px!important}.pl-xl-30,.px-xl-30{padding-left:30px!important}
    .m-xl-a {margin:auto!important}.mt-xl-a,.my-xl-a{margin-top:auto!important}.mr-xl-a,.mx-xl-a{margin-right:auto!important}.mb-xl-a,.my-xl-a{margin-bottom:auto!important}.ml-xl-a,.mx-xl-a{margin-left:auto!important}
}

¿Porque usar esta librería css
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 original (https://github.com/didesweb/me-css)
Código fuente del proyecto original v2 (https://github.com/didesweb/me-css-v2)
Código fuente del proyecto original v4 beta + sass (https://github.com/didesweb/me-css-sass)

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

Valoraciones


2 valoraciones

  • Osvaldo 15 noviembre, 2021

    Que bueno, mis felicitaciones por este framework, ya lo utilizo para todas mis maquetaciones

  • Mauro 21 septiembre, 2021

    olé

Tu valoración


* Tu valoración puede tardar hasta 72 horas en publicarse.

He leido y acepto el Aviso legal y condiciones de uso

CAPTCHA


Utilizamos cookies propias y de terceros para el correcto funcionamiento de la web, personalizar el contenido y mostrar publicidad en función de las preferencias del visitante. Puedes encontrar más información en nuestra Política de cookies.

ACEPTAR
Aviso de cookies