Skip to content

Latest commit

 

History

History
140 lines (117 loc) · 3.85 KB

README.md

File metadata and controls

140 lines (117 loc) · 3.85 KB
Raw

shopware-missing-mixins

license npm Bower

less-mixins to help you with your shopware-frontend

how to use?

  1. include all.less
  2. adjust variables in your theme to your liking
  3. ???
  4. profit!

what's included?

  • various css-helpers
    • absolute-center
    • aspect-ratio
    • inline-block shorthand
    • line-through
    • on-active
    • position & size
    • text-overflow
    • hyphenation
  • missing prefix-mixins
    • calc
    • filter
    • mask
    • placeholder
    • selection
    • column
  • somewhat complete flex-mixins (IE 10+)
  • for-mixin from @seven-phases-max
  • grid-mixins
  • small icon utility
  • path-mixins
  • font-face-mixin
  • media-query-mixins
  • triangle-mixin
  • emotion-grid-push (see below)
  • spacing-generation

media-mixins

tired of typing @media screen and (min-width: @phoneLandscapeViewportWidth)?

look no further!

this library introduces the following new names for the breakpoints:

  • < 480px: xs
  • 480px - 767px: ms
  • 768px - 1023px: sm
  • 1024px - 1259px: md
  • > 1259px: lg

of course these are not harcoded but simply the default values shopware gives us via the structure.less-

with this naming and a few cool mixins you can write your media-queries like this:

.product-box--title {
    padding-bottom: 10px;
    .screen-ms(padding-bottom, 20px);
    .screen-sm(padding-bottom, 30px);
    .screen-md({
        padding-bottom: 40px;
        margin-bottom: -10px;

        &.is--active {
            color: tomato;
        }

        .product-box--subtitle {
            background: rebeccapurple;
        }
    });
}

of course i encourage you not to write code this messy

resulting in css like this:

.product-box--title {
    padding-bottom: 10px;
}

@media (min-width: 30em) {
    .product-box--title {
        padding-bottom: 20px;
    }
}

@media (min-width: 48em) {
    .product-box--title {
        padding-bottom: 20px;
    }
}

@media (min-width: 64em) {
    .product-box--title {
        padding-bottom: 20px;
        margin-bottom: -10px;
    }

    .product-box--title.is--active {
        color: tomato;
    }

    .product-box--title .product-box--subtitle {
        background: rebeccapurple;
    }
}

read more about the magical powers of less' detached rulesets in the less docs.

.create-emotion-grid-push

This mixin creates classes which you can add to your emotion-elements to fill the gutter between elements.

The mixin creates classes for removing the gutter to the right, to the left or on both sides.

what's new?

  • 1.1.0 - add @spacing-* to allow for usage in a more shopware-esque style of classes.
  • 1.0.1 - remove word-break-property from hyphenate-mixin
  • 1.0.0:
    • fix spacing mixins to correctly use the cascade. also introduces -none spacings with a value of 0
    • rename .make- mixins to .create-
  • 0.6.1 - fix mixins using .fill instead of .position
  • 0.6.0 - add .make-gutter mixin
  • 0.5.0 - add .create-spacing mixin and spacing-variables
  • 0.4.1 - fix path mixin when in vendor-folder
  • 0.4.0 - add .create-emotion-grid-push mixin
  • 0.3.2 - fix relative paths for php less-compiler
  • 0.3.1 - path now returns relative paths. fix for virtual paths
  • 0.3.0 - add column mixins
  • 0.2.0 - add hyphenation helper
  • 0.1.2 - add property-value mixins for placeholder & selection

roadmap

  • [breaking] rename screen-sizes to shopware-standard
  • deprecate .screen-* without detached ruleset