{"id":21890770,"url":"https://github.com/chantastic/minions_rails","last_synced_at":"2025-04-15T13:34:38.844Z","repository":{"id":56883851,"uuid":"52543547","full_name":"chantastic/minions_rails","owner":"chantastic","description":"minions.css for Rails","archived":false,"fork":false,"pushed_at":"2018-06-06T14:27:15.000Z","size":214,"stargazers_count":3,"open_issues_count":0,"forks_count":1,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-05-22T17:54:59.033Z","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":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/chantastic.png","metadata":{"files":{"readme":"README.markdown","changelog":null,"contributing":null,"funding":null,"license":"MIT-LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-02-25T17:29:47.000Z","updated_at":"2019-06-25T14:12:23.000Z","dependencies_parsed_at":"2022-08-20T13:10:41.535Z","dependency_job_id":null,"html_url":"https://github.com/chantastic/minions_rails","commit_stats":null,"previous_names":[],"tags_count":8,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chantastic%2Fminions_rails","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chantastic%2Fminions_rails/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chantastic%2Fminions_rails/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chantastic%2Fminions_rails/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/chantastic","download_url":"https://codeload.github.com/chantastic/minions_rails/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249080189,"owners_count":21209482,"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-28T12:16:48.160Z","updated_at":"2025-04-15T13:34:38.826Z","avatar_url":"https://github.com/chantastic.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# MinionsRails\n\nThis is a Rails wrapper for the [minions.css](https://github.com/chantastic/minions.css) project.\n\n## Contents\n1. [Installation](#installation)\n1. [Important](#important)\n1. [About minions](#about-minions)\n1. [CSS vs SCSS](#css-vs-scss)\n1. [Usage](#usage)\n  1. [CSS (development)](#css-development)\n  1. [CSS (production)](#css-production)\n  1. [SCSS (development)](#scss-development)\n  1. [SCSS (production)](#scss-production)\n1. [Mixins](#mixins)\n  1. [at](#at)\n  1. [before](#before)\n  1. [only](#only)\n  1. [exclude](#exclude)\n\n## Installation\n**Add** `minions_rails` to your Gemfile and bundle:\n\n```ruby\ngem 'minions_rails'\n```\n\n## Important\n[minions.css](https://github.com/chantastic/minions.css) is a huge library. There's nearly 1MB of CSS. It's not intended to be used segmentally. The `development` setups are included so you can get started quickly. Please don't use them in production.\n\n## About minions\nFor more information about [minions.css](https://github.com/chantastic/minions.css), go to the library page: https://github.com/chantastic/minions.css\n\n## CSS vs SCSS\n**The `scss` version of [minions.css](https://github.com/chantastic/minions.css) allows you to customize media-query berakpoints.** By default, [minions.css](https://github.com/chantastic/minions.css) uses the Bootstrap 4 breakpoints. They look like this:\n\n```\n@xl: 1200px\n@lg:  992px\n@md:  768px\n@sm:  544px\n@xs:  320px\n```\n\n## Usage\n\n### CSS (development)\nThis is an easy setup to get you up and running quickly. But it's a lot of CSS to load in production.  \n\n[Working example](https://github.com/chantastic/minions_rails/blob/master/test/dummy/app/assets/stylesheets/css_development.css)\n\n* **Require** `minions_rails/development` in your `application.css` file:\n\n```css\n*= require \"minions_rails/development\"\n```\n\n**[DO NOT USE THIS IN PRODUCTION](#important).**\n\n---\n\n### CSS (production)\nThis is what a production setup might look like. Note that this is a `.scss` file. You could use sprockets if you like, but it'll result in a bunch of HTTP requests in development. They add up, if you're using a lot of minions.  \n\nI still consider it a CSS setup because you're using the raw CSS minions. These files aren't dynamic.  \n\n[Working example](https://github.com/chantastic/minions_rails/blob/master/test/dummy/app/assets/stylesheets/css_production.scss)\n\n* **Create** a `custom-minions.scss` file\n  + **Import** any and all minions files from `minions_rails/css/`\n\n```scss\n/* custom-minions.scss */\n\n@import \"minions_rails/css/padding\";\n@import \"minions_rails/css/padding-mn\";\n@import \"minions_rails/css/padding-xs\";\n@import \"minions_rails/css/padding-sm\";\n@import \"minions_rails/css/padding-md\";\n@import \"minions_rails/css/padding-lg\";\n@import \"minions_rails/css/padding-xl\";\n\n/* ... so on and so forth. */\n```\n\n---\n\n### SCSS (development)\nThis is an easy setup to get you up and running with custom breakpoints. But it's a lot of CSS to load in production.  \n\n[Working example](https://github.com/chantastic/minions_rails/blob/master/app/assets/stylesheets/minions_rails/development-scss.scss)\n\n* **Create** a `custom-minions.scss` file\n  + **Assign** expected breakpoint variables `$xl`, `$lg`, `$md`, `$sm`, and `$xs`\n  + **Assign** colors, if using any of the `color` files.\n    -  `$white`, `$navy`, `$blue`, `$aqua`, `$teal`, `$olive`, `$green`, `$lime`, `$yellow`, `$orange`, `$red`, `$maroon`, `$fuchsia`, `$purple`, `$gray`, `$silver`, `$black`\n  + **Import** any and all minions files from `minions_rails/scss/`\n* **Require** `custom-minions` into your `application.css` file\n\n```scss\n$xl: 1200;\n$lg:  960;\n$md:  720;\n$sm:  600;\n$xs:  480;\n\n$white: #ffffff;\n$navy: #001f3f;\n$blue: #0074d9;\n$aqua: #7fdbff;\n$teal: #39cccc;\n$olive: #3d9970;\n$green: #2ecc40;\n$lime: #01ff70;\n$yellow: #ffdc00;\n$orange: #ff851b;\n$red: #ff4136;\n$maroon: #85144b;\n$fuchsia: #f012be;\n$purple: #b10dc9;\n$gray: #aaaaaa;\n$silver: #dddddd;\n$black: #111111;\n\n@import \"minions_rails/development-scss\";\n```\n\n**[DO NOT USE THIS IN PRODUCTION](#important).**\n\n---\n\n### SCSS (production)\nThis is the most customizable setup. You can control both the minions you use and the breakpoints they operate on.\n\n[Working example](https://github.com/chantastic/minions_rails/blob/master/test/dummy/app/assets/stylesheets/scss_production.scss)\n\n* **Create** a `custom-minions.scss` file\n  + **Assign** expected breakpoint variables `$xl`, `$lg`, `$md`, `$sm`, and `$xs`\n  + **Import** any and all minions files from `minions_rails/scss/`\n* **Require** `custom-minions` into your `application.css` file\n\n```scss\n/* custom-minions.scss */\n\n$xl: 1200;\n$lg:  960;\n$md:  720;\n$sm:  600;\n$xs:  480;\n\n$white: #ffffff;\n$navy: #001f3f;\n$blue: #0074d9;\n$aqua: #7fdbff;\n$teal: #39cccc;\n$olive: #3d9970;\n$green: #2ecc40;\n$lime: #01ff70;\n$yellow: #ffdc00;\n$orange: #ff851b;\n$red: #ff4136;\n$maroon: #85144b;\n$fuchsia: #f012be;\n$purple: #b10dc9;\n$gray: #aaaaaa;\n$silver: #dddddd;\n$black: #111111;\n\n@import \"minions_rails/scss/padding\";\n@import \"minions_rails/scss/padding-mn\";\n@import \"minions_rails/scss/padding-xs\";\n@import \"minions_rails/scss/padding-sm\";\n@import \"minions_rails/scss/padding-md\";\n@import \"minions_rails/scss/padding-lg\";\n@import \"minions_rails/scss/padding-xl\";\n\n/* ...and whatever else you need */\n```\n\n## Mixins\nInterfaces ships with a bunch of mixins so you can style your classes with the same constraints minions uses.\n\n### at()\n[The code](https://github.com/chantastic/minions_rails/tree/master/app/assets/stylesheets/minions_rails/mixins/at.scss)  \n[Example use](https://github.com/chantastic/minions_rails/tree/master/test/dummy/app/assets/stylesheets/at_mixin.scss)  \n\n---\n\n### before()\n[The code](https://github.com/chantastic/minions_rails/tree/master/app/assets/stylesheets/minions_rails/mixins/before.scss)  \n[Example use](https://github.com/chantastic/minions_rails/tree/master/test/dummy/app/assets/stylesheets/before_mixin.scss)  \n\n---\n\n### only()\n[The code](https://github.com/chantastic/minions_rails/tree/master/app/assets/stylesheets/minions_rails/mixins/only.scss)  \n[Example use](https://github.com/chantastic/minions_rails/tree/master/test/dummy/app/assets/stylesheets/only_mixin.scss)  \n\n---\n\n### exclude()\n[The code](https://github.com/chantastic/minions_rails/tree/master/app/assets/stylesheets/minions_rails/mixins/exclude.scss)  \n[Example use](https://github.com/chantastic/minions_rails/tree/master/test/dummy/app/assets/stylesheets/exclude_mixin.scss)  \n\n\n---\n\n\u003c3 [chantastic](http://twitter.com/chantastic)\n\nThis project rocks and uses MIT-LICENSE.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchantastic%2Fminions_rails","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fchantastic%2Fminions_rails","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchantastic%2Fminions_rails/lists"}