{"id":19425507,"url":"https://github.com/macx/styles","last_synced_at":"2025-04-24T16:31:38.130Z","repository":{"id":21438637,"uuid":"24756892","full_name":"macx/styles","owner":"macx","description":"Mobile first Sass Mixins - based on simplicity","archived":true,"fork":false,"pushed_at":"2017-01-02T11:48:39.000Z","size":4693,"stargazers_count":0,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-21T15:54:28.262Z","etag":null,"topics":[],"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/macx.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":"2014-10-03T12:05:04.000Z","updated_at":"2024-12-25T14:47:19.000Z","dependencies_parsed_at":"2022-08-21T09:41:06.877Z","dependency_job_id":null,"html_url":"https://github.com/macx/styles","commit_stats":null,"previous_names":["macx/sass-mixins"],"tags_count":26,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/macx%2Fstyles","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/macx%2Fstyles/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/macx%2Fstyles/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/macx%2Fstyles/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/macx","download_url":"https://codeload.github.com/macx/styles/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250663544,"owners_count":21467366,"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":[],"created_at":"2024-11-10T14:03:45.139Z","updated_at":"2025-04-24T16:31:37.857Z","avatar_url":"https://github.com/macx.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"Mobile first Sass Mixins – based on simplicity \n===========\n\n[![Build Status](https://travis-ci.org/macx/sass-mixins.svg?branch=master)](https://travis-ci.org/macx/sass-mixins) ![Mobile first](https://img.shields.io/badge/RWD-mobilefirst-lightgrey.svg?style=flat) ![Unicorn approved](http://img.shields.io/badge/unicorn-approved-ff69b4.svg?style=flat)\n\nThere are a lot of Sass Mixins out there. Most of them are overdone,\nbecause they want to fit for everyone – no matter if you prefer mobile first\nor any other approach.\n\nThis Mixins from [David Maciejwski](https://plus.google.com/102458928073783517690?rel=author) and contributors is different.\nIt's mobile first and will only generate classes that are really needed\nto do the trick.\n\n[Feature](#features)\n\n* Highly flexible [Grid](#grid) with push and pull methods based on your configuration\n* Effective [Respond-Mixin](#media-query-usage) to set `@media triggers (from, to)\n* font-smoothing Mixin for better font rendering on dark backgrounds\n* [Flexible asset floating](#flexible-asset-floating)\n* clearfix\n\n## Installation\n\nUse [npm](https://www.npmjs.com/) to download it to your project:\n\n```sh\n$ npm install macx-sass-mixins --save-dev\n```\n\nNow, set your personal configuration for the Grid and import the mixins as soon as possible in your main Sass file:\n\n```scss\n@charset 'UTF-8';\n\n// Import or set here your Grid config:\n@import 'config';\n\n// macx-sass-mixin\n@import 'node_modules/macx-sass-mixins/src/sass-mixins';\n```\n\nTo find out the path to your Bower dependencies, type `bower list --paths` in your command line.\n\n## Usage\n\n### Grid\n\nThe Grid is simple as it could be but flexible as it should be. It's based on the following configuration. The default settings are the following:\n\n```scss\n// Maximal width of your layout\n$layout-max-width: 1200px;\n\n// Number of columns you want to use\n$layout-max-columns: 12;\n\n// Set gutter width and default spacing\n// to the outer areas of your layout\n$layout-gutter-width: percentage(20px/$layout-max-width);\n$layout-spacing: 24px;\n\n// Set the breakpoints and the names\n// you want to use for later usage\n$layout-breakpoints: (\n  small: 480px,\n  medium: 600px,\n  large: 920px,\n  xlarge: $layout-max-width\n) !default;\n```\n\nHere is simple three column layout on desktop, two column layout on tablets and one column on mobile:\n\n```html\n\u003cdiv class=\"l-constrained\"\u003e\n  \u003cdiv class=\"l-units\"\u003e\n    \u003cdiv class=\"l-u--12-12 l-u--medium-6-12 l-u--large-4-12\"\u003e\n      COLUMN 1\n    \u003c/div\u003e\n\n    \u003cdiv class=\"l-u--12-12 l-u--medium-6-12 l-u--large-4-12\"\u003e\n      COLUMN 2\n    \u003c/div\u003e\n    \n    \u003cdiv class=\"l-u--12-12 l-u--medium-6-12 l-u--large-4-12\"\u003e\n      COLUMN 3\n    \u003c/div\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n```\n\nRemeber the following syntax to set a grid column class:\n\n```scss\nl-u--medium-6-12\n│    │      │ └ max columns\n│    │      └ number of columns you want to use (6/12)\n│    └ name of the breakpoint\n└ stands for: layout-unit\n\n```\n\n### Flexible asset floating\n\nDon't write CSS for floated assets (images for example) for every size. Use this approach to align your media – no matter of assets size.\n\n```html\n\u003c!-- Default usage --\u003e\n\u003cdiv class=\"m-asset\"\u003e\n  \u003cdiv class=\"m-asset__element\"\u003e\n    \u003cimg src=\"your-image.jpg\" alt=\"\"\u003e\n  \u003c/div\u003e\n\n  \u003cdiv class=\"m-asset__content\"\u003e\n    This Content will always stay beside the element.\n  \u003c/div\u003e\n\u003c/div\u003e\n\n\u003c!-- If you want to push the asset to the right --\u003e\n\u003cdiv class=\"m-asset m-asset__pushed\"\u003e\n  ...\n\u003c/div\u003e\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmacx%2Fstyles","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmacx%2Fstyles","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmacx%2Fstyles/lists"}