Skip to content
A collection of handy LESS-Mixins to complement Shopware
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
_mixins
_variables
.gitignore
LICENSE
README.md
all.less
bower.json
package.json

README.md

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
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.