shopware-missing-mixins
v1.1.0
Published
missing basic less-mixins for Shopware 5
Downloads
7
Readme
shopware-missing-mixins
less-mixins to help you with your shopware-frontend
how to use?
- include all.less
- adjust variables in your theme to your liking
- ???
- 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
: xs480px - 767px
: ms768px - 1023px
: sm1024px - 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 of0
- rename
.make-
mixins to.create-
- fix spacing mixins to correctly use the cascade. also introduces
- 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