shopware-missing-mixins

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