{"id":34926154,"url":"https://github.com/codelation/codelation_ui","last_synced_at":"2026-03-27T04:06:44.929Z","repository":{"id":62555943,"uuid":"87258673","full_name":"codelation/codelation_ui","owner":"codelation","description":"Rails Asset Pipeline Gem","archived":false,"fork":false,"pushed_at":"2017-08-24T15:35:19.000Z","size":809,"stargazers_count":1,"open_issues_count":5,"forks_count":3,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-12-28T00:38:04.983Z","etag":null,"topics":["internal-tools","package"],"latest_commit_sha":null,"homepage":"https://codelation.github.io/codelation_ui/","language":"JavaScript","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/codelation.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":"2017-04-05T02:48:23.000Z","updated_at":"2017-05-30T16:11:24.000Z","dependencies_parsed_at":"2022-11-03T05:45:27.320Z","dependency_job_id":null,"html_url":"https://github.com/codelation/codelation_ui","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/codelation/codelation_ui","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codelation%2Fcodelation_ui","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codelation%2Fcodelation_ui/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codelation%2Fcodelation_ui/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codelation%2Fcodelation_ui/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/codelation","download_url":"https://codeload.github.com/codelation/codelation_ui/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codelation%2Fcodelation_ui/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31018552,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-27T03:51:26.850Z","status":"ssl_error","status_checked_at":"2026-03-27T03:51:09.693Z","response_time":164,"last_error":"SSL_read: 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":["internal-tools","package"],"created_at":"2025-12-26T14:31:57.111Z","updated_at":"2026-03-27T04:06:44.763Z","avatar_url":"https://github.com/codelation.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Codelation Assets\n\nA collection of SCSS mixins and JavaScript helpers used by\n[Codelation](https://codelation.com) for building awesome Rails apps quickly.\n\n## Installation\n\nAdd this line to your application's Gemfile:\n\n```ruby\ngem \"codelation_assets\"\n```\n\nInstall the Codelation Assets gem with Bundler:\n\n```bash\nbundle install\n```\n\n## JavaScript\n\nAdd to `application.js`:\n\n```javascript\n//= require codelation\n```\n\n### App Functions\n\nThe `App` object is used in Codelation's Rails projects to register components that\nneed to be initialized on every page and to sprinkle in JavaScript on specific pages.\n\n#### Registering JavaScript Components\n\nBy using `App.register('component')`, you can fire some JavaScript on every page load.\n\nThe function passed to `enter` will fire for `$(document).on('ready page:load')`, so\nit will work with or without Turbolinks.\n\nThe function passed to `exit` will fire for `$(document).on('page:before-unload')`,\nso it will only work with Turbolinks, but will not be needed when not using Turbolinks.\n\nExample:\n\n```javascript\n(function() {\n  \"use strict\"\n\n  var body, links;\n\n  App.register('component').enter(function() {\n    body = $('body');\n    links = $('a[href]:not([href^=\"#\"]):not([target=\"_blank\"])');\n\n    // Add 'loading' class to the body when a link is clicked,\n    // add add 'active' class to the clicked link.\n    links.click(function() {\n      links.removeClass('active');\n      body.addClass('loading');\n      $(this).addClass('active');\n    });\n  }).exit(function() {\n    // Remove the classes when the body is unloaded\n    body.removeClass('loading');\n    links.removeClass('active');\n  });\n})();\n```\n\n#### Registering Per Page JavaScript Snippets\n\nYou can use `App.register('[controller-name].[action-name]')` to fire some JavaScript any time\nthat page is loaded and unloaded. The `enter` and `exit` functions work the same as components.\n\nThis assumes you are using a helper to set the body class to include the dasherized controller\nname and dasherized action.\n\nExample:\n\n```javascript\n(function() {\n  \"use strict\"\n\n  var refreshInterval;\n\n  // This will only fire when entering and exiting the `AwesomeStatsController#index` page.\n  App.register('awesome-stats.index').enter(function() {\n    // Poll a URL for new data at a set interval\n    refreshInterval = setInterval(pollStats, 5000);\n  }).exit(function() {\n    // Clear the interval when the page is unloaded\n    clearInterval(refreshInterval);\n  });\n})();\n```\n\nYou can also use `App.register('[controller-name]')` to fire JavaScript on all pages\nfor the given controller name.\n\n## Sass\n\nAdd to `application.scss`:\n\n```scss\n@import \"codelation\";\n```\n\n### Included Sass/CSS Libraries\n\n- [Bourbon](http://bourbon.io) - A simple and lightweight mixin library for Sass.\n- [Normalize.css](https://necolas.github.io/normalize.css/) - A modern, HTML5-ready alternative to CSS resets\n\n### Additional Functions and Mixins\n\nA handful of useful Sass functions and mixins written by Codelation are also included.\n\n#### Sass Functions\n\n##### color($color, $number: 500)\n\nThe [Google Material Design Colors](https://www.google.com/design/spec/style/color.html) come in handy when you\nneed a color for creating application interfaces. They are a much better alternative to CSS's named colors\n(blue, green, red, etc.), but just as easy to use.\n\nExamples:\n\n```scss\n// The named colors are available as variables of the same name\n.warning {\n  color: $amber;\n}\n\n// You can also use the different shades available\n.error {\n  color: color($red, 700);\n}\n\n// @see https://www.google.com/design/spec/style/color.html\n.success {\n  color: color($green, 600);\n}\n```\n\n##### text-color($color)\n\nThis function is useful for creating mixins where you have a background color as a variable\nand need to display either black or white text on top of the given color.\n\n#### Sass Mixins\n\n##### button($background-color: color($grey, 100), $color: color($grey, 800), $active-background-color: $accent-color, $active-color: text-color($accent-color))\n\nBy default, `@include button;` will create a plain grey button. It looks a lot like the default button in some\nbrowsers, but it will be rendered to look the same across all browsers. Useful for applications that need to\nbe obvious about a button looking like a button.\n\n##### center-children\n\nThis mixin uses flexbox to center the child elements horizontally and vertically inside the element.\nA good use case is centering an image of unknown height inside a container with a fixed height.\n\n##### has-cards($columns, $margin: 0)\n\nThis mixin uses flexbox to create a cards layout like that used by Google Material Design. The\nmixin is used on the container element. This will create a fixed margin between each card element\nand adds padding around the outside of the cards. Useful for creating a dashboard widgets look.\n\nExample:\n\n**HTML**\n\n```html\n\u003cdiv class=\"dashboard\"\u003e\n  \u003cdiv class=\"card\"\u003e\u003cdiv\u003e\n  \u003cdiv class=\"card\"\u003e\u003cdiv\u003e\n  \u003cdiv class=\"card\"\u003e\u003cdiv\u003e\n  \u003cdiv class=\"card\"\u003e\u003cdiv\u003e\n\u003c/div\u003e\n```\n\n**SCSS**\n\n```scss\n// This will create a cards layout with two cards per row.\n// There will be a fixed margin of 1em between and around the cards.\n// The cards in each row will stretch to be the same height.\n.dashboard {\n  @include has-cards(2, 1em);\n  background-color: #ccc;\n\n  .card {\n    background-color: #fff;\n    border-radius: 2px;\n    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);\n  }\n}\n```\n\n##### has-columns($columns: 0, $gutter: 0, $grow: true)\n\nThis mixin uses flexbox to create a layout with the specified number of columns that\nstretch to fill the container's height. The given gutter size will the margin between\nthe columns. The container must be a single row of columns.\n\nWhen the column count is given, the columns will all be the same width. If no column\ncount is given, the row will behave like a table row. The entire width will be used\nand each column width will be determined by its content. `$grow` can be set to false\nif you don't want the columns to take up the entire width of the container.\n\nExample:\n\n**HTML**\n\n```html\n\u003cdiv class=\"row\"\u003e\n  \u003cdiv\u003eColumn 1\u003cdiv\u003e\n  \u003cdiv\u003eColumn 2\u003cdiv\u003e\n  \u003cdiv\u003eColumn 3\u003cdiv\u003e\n\u003c/div\u003e\n\n\u003cdiv class=\"table\"\u003e\n  \u003cdiv\u003eColumn 1\u003c/div\u003e\n  \u003cdiv\u003eColumn 2\u003c/div\u003e\n  \u003cdiv\u003eColumn 3\u003c/div\u003e\n  \u003cdiv\u003eColumn 4\u003c/div\u003e\n  \u003cdiv\u003eColumn 5\u003c/div\u003e\n\u003c/div\u003e\n```\n\n**SCSS**\n\n```scss\n// This will create a row with three columns.\n// The columns will all fill the container height.\n// There will be a fixed gutter of 12px between the columns.\n.row {\n  @include has-columns(3, 12px);\n}\n\n// This will create a row with five columns.\n// The columns will all fill the container height and width.\n// The width of each column will be determined by its content.\n// There will be a fixed gutter of 10px between the columns.\n.table {\n  @include has-columns($gutter: 10px);\n}\n```\n\n###### col-span($columns of $container-columns, $gutter: 0)\n\nWhen the `has-columns` mixin is used properly, you can create columns in a row that\nspan the width of multiple columns in another row. In order to use the `col-span`\nmixin, you must use a percentage value or zero for your gutter width. There is no way\nto have a fixed gutter width, flexible column widths, and match up with the columns\nin another row.\n\nExample:\n\n**HTML**\n\n```html\n\u003cdiv class=\"row\"\u003e\n  \u003cdiv\u003eColumn 1\u003cdiv\u003e\n  \u003cdiv\u003eColumn 2\u003cdiv\u003e\n  \u003cdiv\u003eColumn 3\u003cdiv\u003e\n\u003c/div\u003e\n\u003cdiv class=\"row\"\u003e\n  \u003cdiv class=\"wide-column\"\u003eColumn 4\u003cdiv\u003e\n  \u003cdiv\u003eColumn 5\u003cdiv\u003e\n\u003c/div\u003e\n```\n\n**SCSS**\n\n```scss\n.row {\n  @include has-columns(3, 3%);\n}\n\n// Column 4 will span across two columns. Its left side will match up with\n// column 1's left side, and its right side will match up with column 2's right\n// side. Column 5's right margin will be set to 0 without any extra SCSS.\n.wide-column {\n  @include col-span(2 of 3, 3%)\n}\n```\n\n##### has-grid($columns, $gutter: 0)\n\nThis mixin uses flexbox to create a grid layout with an unknown number of child elements.\nEach child element will have the same width and they will stretch to be the same height.\nThe gutter size is the width between each column and the height between each row. Unlike\nthe `has-cards` mixin, there will not be a margin around the child elements, only between.\nThis mixin is perfect for a product category page.\n\nExample:\n\n**HTML**\n\n```html\n\u003cdiv class=\"products\"\u003e\n  \u003cdiv\u003eProduct 1\u003cdiv\u003e\n  \u003cdiv\u003eProduct 2\u003cdiv\u003e\n  \u003cdiv\u003eProduct 3\u003cdiv\u003e\n  \u003cdiv\u003eProduct 4\u003cdiv\u003e\n  \u003cdiv\u003eProduct 5\u003cdiv\u003e\n\u003c/div\u003e\n```\n\n**SCSS**\n\n```scss\n// Products 1 - 3 will be on the first row and there will be a margin of 1em between them.\n// Products 4 \u0026 5 will be on the second row and will match up with products 1 \u0026 2.\n// There will be a margin of 1em between the rows.\n.products {\n  @include has-grid(3, 1em);\n}\n```\n\n## Contributing\n\n1. Fork it\n2. Create your feature branch (`git checkout -b my-new-feature`)\n3. Commit your changes (`git commit -am 'Add some feature'`)\n4. Push to the branch (`git push origin my-new-feature`)\n5. Create new Pull Request\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodelation%2Fcodelation_ui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcodelation%2Fcodelation_ui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodelation%2Fcodelation_ui/lists"}