{"id":13765846,"url":"https://github.com/screeny05/shopware-missing-mixins","last_synced_at":"2025-07-15T23:48:09.951Z","repository":{"id":58242531,"uuid":"59663860","full_name":"screeny05/shopware-missing-mixins","owner":"screeny05","description":"A collection of handy LESS-Mixins to complement Shopware","archived":false,"fork":false,"pushed_at":"2017-04-12T16:00:47.000Z","size":24,"stargazers_count":5,"open_issues_count":2,"forks_count":1,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-02-01T06:11:38.386Z","etag":null,"topics":["css","less","mixins","shopware","shopware-theme"],"latest_commit_sha":null,"homepage":"","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/screeny05.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-05-25T13:06:34.000Z","updated_at":"2020-10-01T21:32:41.000Z","dependencies_parsed_at":"2022-08-31T00:41:14.080Z","dependency_job_id":null,"html_url":"https://github.com/screeny05/shopware-missing-mixins","commit_stats":null,"previous_names":[],"tags_count":12,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/screeny05%2Fshopware-missing-mixins","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/screeny05%2Fshopware-missing-mixins/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/screeny05%2Fshopware-missing-mixins/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/screeny05%2Fshopware-missing-mixins/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/screeny05","download_url":"https://codeload.github.com/screeny05/shopware-missing-mixins/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":238504980,"owners_count":19483478,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css","less","mixins","shopware","shopware-theme"],"created_at":"2024-08-03T16:00:47.152Z","updated_at":"2025-02-12T16:31:32.857Z","avatar_url":"https://github.com/screeny05.png","language":"CSS","funding_links":[],"categories":["Frontend Development Resources"],"sub_categories":[],"readme":"# shopware-missing-mixins\n[![license](https://img.shields.io/npm/l/shopware-missing-mixins.svg?style=flat-square)]()\n[![npm](https://img.shields.io/npm/v/shopware-missing-mixins.svg?style=flat-square)]()\n[![Bower](https://img.shields.io/bower/v/shopware-missing-mixins.svg?style=flat-square)]()\n\nless-mixins to help you with your shopware-frontend\n\n### how to use?\n1. include all.less\n2. adjust variables in your theme to your liking\n3. ???\n4. profit!\n\n### what's included?\n* various css-helpers\n    * absolute-center\n    * aspect-ratio\n    * inline-block shorthand\n    * line-through\n    * on-active\n    * position \u0026 size\n    * text-overflow\n    * hyphenation\n* missing prefix-mixins\n    * calc\n    * filter\n    * mask\n    * placeholder\n    * selection\n    * column\n* somewhat complete flex-mixins (IE 10+)\n* for-mixin from [@seven-phases-max](https://github.com/seven-phases-max/less.curious)\n* grid-mixins\n* small icon utility\n* path-mixins\n* font-face-mixin\n* media-query-mixins\n* triangle-mixin\n* emotion-grid-push (see below)\n* spacing-generation\n\n#### media-mixins\ntired of typing `@media screen and (min-width: @phoneLandscapeViewportWidth)`?\n\nlook no further!\n\nthis library introduces the following new names for the breakpoints:\n* `\u003c 480px`: xs\n* `480px  - 767px`: ms\n* `768px  - 1023px`: sm\n* `1024px - 1259px`: md\n* `\u003e 1259px`: lg\n\nof course these are not harcoded but simply the default values shopware gives us via the [`structure.less`](https://github.com/shopware/shopware/blob/5.1/themes/Frontend/Responsive/frontend/_public/src/less/_variables/structure.less)-\n\nwith this naming and a few cool mixins you can write your media-queries like this:\n```less\n.product-box--title {\n    padding-bottom: 10px;\n    .screen-ms(padding-bottom, 20px);\n    .screen-sm(padding-bottom, 30px);\n    .screen-md({\n        padding-bottom: 40px;\n        margin-bottom: -10px;\n\n        \u0026.is--active {\n            color: tomato;\n        }\n\n        .product-box--subtitle {\n            background: rebeccapurple;\n        }\n    });\n}\n```\n*of course i encourage you not to write code this messy*\n\nresulting in css like this:\n```css\n.product-box--title {\n    padding-bottom: 10px;\n}\n\n@media (min-width: 30em) {\n    .product-box--title {\n        padding-bottom: 20px;\n    }\n}\n\n@media (min-width: 48em) {\n    .product-box--title {\n        padding-bottom: 20px;\n    }\n}\n\n@media (min-width: 64em) {\n    .product-box--title {\n        padding-bottom: 20px;\n        margin-bottom: -10px;\n    }\n\n    .product-box--title.is--active {\n        color: tomato;\n    }\n\n    .product-box--title .product-box--subtitle {\n        background: rebeccapurple;\n    }\n}\n```\n\nread more about the magical powers of less' detached rulesets in [the less docs](http://lesscss.org/features/#detached-rulesets-feature).\n\n\n#### .create-emotion-grid-push\nThis mixin creates classes which you can add to your emotion-elements to fill the gutter between elements.\n\nThe mixin creates classes for removing the gutter to the right, to the left or on both sides.\n\n\n### what's new?\n* 1.1.0 - add `@spacing-*` to allow for usage in a more shopware-esque style of classes.\n* 1.0.1 - remove `word-break`-property from hyphenate-mixin\n* 1.0.0:\n    * fix spacing mixins to correctly use the cascade. also introduces `-none` spacings with a value of `0`\n    * rename `.make-` mixins to `.create-`\n* 0.6.1 - fix mixins using `.fill` instead of `.position`\n* 0.6.0 - add `.make-gutter` mixin\n* 0.5.0 - add `.create-spacing` mixin and spacing-variables\n* 0.4.1 - fix path mixin when in vendor-folder\n* 0.4.0 - add `.create-emotion-grid-push` mixin\n* 0.3.2 - fix relative paths for php less-compiler\n* 0.3.1 - path now returns relative paths. fix for virtual paths\n* 0.3.0 - add column mixins\n* 0.2.0 - add hyphenation helper\n* 0.1.2 - add property-value mixins for placeholder \u0026 selection\n\n### roadmap\n* [breaking] rename screen-sizes to shopware-standard\n* deprecate `.screen-*` without detached ruleset\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fscreeny05%2Fshopware-missing-mixins","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fscreeny05%2Fshopware-missing-mixins","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fscreeny05%2Fshopware-missing-mixins/lists"}