{"id":28828861,"url":"https://github.com/mojotech/mo","last_synced_at":"2026-03-05T16:02:46.984Z","repository":{"id":10080303,"uuid":"12137084","full_name":"mojotech/mo","owner":"mojotech","description":null,"archived":false,"fork":false,"pushed_at":"2015-04-13T22:37:30.000Z","size":637,"stargazers_count":10,"open_issues_count":2,"forks_count":3,"subscribers_count":41,"default_branch":"master","last_synced_at":"2025-10-04T18:09:19.893Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mojotech.png","metadata":{"files":{"readme":"readme.md","changelog":"changelog.md","contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2013-08-15T15:02:29.000Z","updated_at":"2017-08-08T21:29:10.000Z","dependencies_parsed_at":"2022-09-12T13:22:00.750Z","dependency_job_id":null,"html_url":"https://github.com/mojotech/mo","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/mojotech/mo","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mojotech%2Fmo","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mojotech%2Fmo/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mojotech%2Fmo/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mojotech%2Fmo/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mojotech","download_url":"https://codeload.github.com/mojotech/mo/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mojotech%2Fmo/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30134574,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-05T15:35:27.018Z","status":"ssl_error","status_checked_at":"2026-03-05T15:35:23.768Z","response_time":93,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":"2025-06-19T05:10:39.643Z","updated_at":"2026-03-05T16:02:46.955Z","avatar_url":"https://github.com/mojotech.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"mo -- better mixins\n===============\n\n[![Build Status](https://travis-ci.org/mojotech/mo.svg)](https://travis-ci.org/mojotech/mo)\n\nmo provides a basic set of mixins to make styling your app simple.\n\nThe problem right now is that you have to include a tool like bourbon or compass. (which are massive)\n\nmo is simple and small. built out of my need.\n\n\n## Documentation Index\n* [Installing](#installing)\n* [API](#api)\n\t* [Below](#below)\n\t* [Above](#above)\n\t* [Between](#between)\n\t* [Hide At](#hide-at)\n\t* [Full Width At](#full-width-at)\n\t* [Center Text At](#center-text-at)\n\t* [Background Color](#background-color)\n\t* [Position](#position)\n\t* [Ellipsis](#ellipsis)\n\t* [Size](#size)\n\t* [Retina Background Image](#retina-background-image)\n\n\n## Installing\n\n```scss\n@import \"mo\";\n```\n\n\n## API\n\n\n### Below\n\nThis mixin is used apply custom styles **at and below** a given pixel width.\n\n```scss\n.headline {\n\t@include below(100px) {\n\t\tbackground: red;\n\t}\n}\n```\n\n### Above\n\nThis mixin is used apply custom styles **at and above** a given above pixel width.\n\n```scss\n.headline {\n\t@include above(200px) {\n\t\tbackground: teal;\n\t}\n}\n```\n\n### Between\n\nThis mixin is used apply custom styles **between** a given pixel width range.\n\n```scss\n.headline {\n\t@include between(200px, 300px) {\n\t\tbackground: yellow;\n\t}\n}\n```\n\n### Hide At\n\nThis mixin hides a given selector at and below a given pixel width.\n\n```scss\n.headline {\n\t@include hide-at(500px);\n}\n```\n\n### Full Width At\n\nThis mixin sets an element to `width: 100%;` at and below a given pixel width.\n\n```scss\n.headline {\n\t@include full-width-at(500px);\n}\n```\n\n### Center Text At\n\nThis mixin sets `text-align: center;` at and below a given width.\n\n```scss\n.headline {\n\t@include center-text-at(500px);\n}\n```\n\n### Background Color\n\nThis mixin provides a way to set transparent backgrounds\nin ie8 and up.\nIt support an rgba syntax along with a hex and % opaque param.\n\n```scss\n// hex\n.headline {\n\t@include bg-color(#FF0000, 0.4);\n}\n// rgba\n.headline {\n\t@include bg-color(100, 200, 20, 0.5);\n}\n```\n\n### Position\n\nThis mixin provides a terse syntax for setting the `position`, `top`, `right`, `bottom`, and `left` properties of a given selector.\n\nIt takes an optional `position` param, and then takes 4 arguments for setting `top`, `right`, `bottom`, and `left` respectively.\n\nAny value that is set to `false` will not be set.\n\nIf an argument of `fill` is given, `top`, `right`, `bottom`, and `left` will default to 0. Any one of these properties can be overridden with a value.\n\n```scss\n.headline {\n\t// position top right bottom left\n\t@include pos(fixed, 10px, false, 2px, 10px);\n}\n\n.headline {\n\t// top right bottom left\n\t@include pos(10px, false, 2px, 10px);\n}\n\n.headline {\n\t@include pos(absolute, fill);\n}\n\n.headline {\n\t@include pos(absolute, fill, 10px);\n}\n```\n\n### Ellipsis\n\nThis mixin provides a simple mechanism to turn a selector into single line ellipsis overflow area with an ellipsis. An optional `width` property can be passed in.\n\n```scss\n.headline {\n\t@include ellipsis(50px);\n}\n```\n\n### Size\n\nThis mixin provides a short hand for setting width and height of an element. One can also set both the width and height with a single value when you want them to be equal.\n\n```scss\n.headline {\n\t@include size(100px, 200px);\n}\n\n.headline {\n\t// sets both the width and height to 300px\n\t@include size(300px);\n}\n```\n\n### Retina Background Image\n\nThis mixin provides you with a simple mechanism for setting a conditional retina background image.\n\nIt has two ways to use it. The first being you pass the path to your image without the extension, and it does a lookup of your `file` + `png` as well as `file` + `@2x` + `.png`\n\nThe second way to use the tool is the optional second param where you can define your files extension if it is something other than `.png`\n\n```scss\n.headline {\n\t// Will look for cat.png and cat@2x.png\n\t@include retina-background-image('cat');\n}\n\n.headline {\n\t// Will look for cat.jpg and cat@2x.jpg\n\t@include retina-background-image('cat', 'jpg');\n}\n\n```\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmojotech%2Fmo","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmojotech%2Fmo","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmojotech%2Fmo/lists"}