{"id":16717196,"url":"https://github.com/mseri/rails-purecss","last_synced_at":"2025-03-21T20:34:28.163Z","repository":{"id":8745205,"uuid":"10423066","full_name":"mseri/rails-purecss","owner":"mseri","description":"Integrate pure (purecss.io) to ruby on rails","archived":false,"fork":false,"pushed_at":"2015-01-30T12:26:09.000Z","size":678,"stargazers_count":23,"open_issues_count":1,"forks_count":5,"subscribers_count":5,"default_branch":"master","last_synced_at":"2024-03-15T11:53:11.129Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mseri.png","metadata":{"files":{"readme":"README.md","changelog":"HISTORY.md","contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2013-06-01T13:57:17.000Z","updated_at":"2020-06-12T06:59:09.000Z","dependencies_parsed_at":"2022-09-02T15:31:14.785Z","dependency_job_id":null,"html_url":"https://github.com/mseri/rails-purecss","commit_stats":null,"previous_names":[],"tags_count":15,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mseri%2Frails-purecss","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mseri%2Frails-purecss/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mseri%2Frails-purecss/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mseri%2Frails-purecss/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mseri","download_url":"https://codeload.github.com/mseri/rails-purecss/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":221819055,"owners_count":16885883,"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-10-12T21:30:44.244Z","updated_at":"2024-10-28T10:52:14.004Z","avatar_url":"https://github.com/mseri.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Purecss\n\nPure is a set of small, responsive CSS modules that you can use in every web project realized by the yahoo developer team.\nThis gem adds Pure CSS 0.5.0 to the Assets Pipeline of Rails 3.2.\n\nAdditionally it provides\n- a jQuery function that automatically enables the dropdown menu without the need of additional rails packages/frameworks (YUI or others).\n- a small optional set of css for right-aligned horizontal menus, CSS carets (font-independent), vertical separators, alerts, ...\n\nI cite directly from [purecss.io](http://purecss.io)\n \u003e CSS with a minimal footprint.\n \u003e\n \u003e Pure is ridiculously tiny. The entire set of modules clocks in at 5.7KB minified and gzipped, without forgoing responsive styles, design, or ease of use. Crafted with mobile devices in mind, it was important to us to keep our file sizes small, and every line of CSS was carefully considered. If you decide to only use a subset of these modules, you'll save even more bytes.\n\nNote: [will_paginate](https://github.com/mislav/will_paginate) is integrated with purecss pagination style using the [purecss-will_paginate](https://github.com/mseri/rails-purecss-will_paginate) gem.\n\n[![Build Status](https://travis-ci.org/mseri/rails-purecss.png?branch=master)](https://travis-ci.org/mseri/rails-purecss)\n\n\n## Installation\n\nAdd this line to your application's Gemfile:\n\n    gem 'purecss'\n\nAnd then execute:\n\n    $ bundle\n\n\nThen you can add the following directives to your css manifest file (application.css):\n\n    *= require purecss\n\nfor the responsive bundle, or\n\n    *= require purecss-nr\n\nfor the non-responsive one.\n\n\nIf you want to include just an individual module (see [purecss.io](http://purecss.io)) add instead\n\n    *= require purecss/\u003cmodule\u003e\n\n\n\nIf it is too long for you, you can avoid touching the manifest files and run the generator (with optional parameter responsive/nonresponsive):\n\n    $ rails generate purecss:install\n\nTo add the viewport meta in the head of your application.html.erb it is enough to append `--add_viewport_meta` when you run the generator.\n\n## Usage\n\nAfter the installation you can simply go to [purecss.io](http://purecss.io) and use their styles.\n\n### Custom CSS\n\nAdd to your css manifest file, under the ```require purecss``` line:\n\n    *= require purecss-addons\n\nIt provides the CSS classes \n\n- ```pure-custom-caret``` for the dropdown menu (to use if you are not using FontAwsome)\n- (no more needed) ```pure-menu-custom-separator-vertical``` to add a vertical separator to the horizontal menu\n- ```pure-custom-close``` for nicer ```x``` to close eventual modal views (to display modals, bootstrap-modal works quite well with Pure)\n- ```pure-custom-alert```, ```pure-custom-alert-error```, ```pure-custom-alert-success```, ```pure-custom-alert-warning```\n- ```pure-menu-pull-right``` to align the menu to the right (must be in the same tag of ```pure-menu```, see [this example](http://jsfiddle.net/xUwCw/)). Thanks to [msweeney](https://github.com/msweeney) for this workaround.\n\n\u003c!--\n  The flag *EXPERIMENTAL* means that the functionality is not fully functional, you can try it and use it but its syntax/use could change in a next release. If you have a fix please add a pull request! \n  /--\u003e\n\n### Dropdown Menu\n\nFor dropdown menu I developed a small workaround based on [bootstrap-dropdown.js](https://github.com/twitter/bootstrap/blob/master/js/bootstrap-dropdown.js).\nIt is enough to add the following directive to your js manifest file (application.js):\n\n    //= require purecss-dropdown\n\nand then use the class ```pure-menu-has-children``` for the ```li``` that will contain the submenu, \nadd ```data-toggle=\"dropdown\"``` to its label element (tipically an anchor), \nand use the class ```pure-menu-children``` for the ```ul``` that contains the submenu.\n\nI hope it becomes clear with the following example:\n```\n\u003cheader class=\"header pure-u-1\"\u003e \n  \u003cdiv class=\"pure-menu pure-menu-open pure-menu-fixed pure-menu-horizontal\"\u003e\n      \u003cdiv class=\"pure-menu-heading\"\u003e\u003c%= link_to \"sample app\", root_path, id: \"logo\" %\u003e\u003c/div\u003e\n        \u003cul\u003e\n          \u003cli\u003e\u003c%= link_to \"Home\", root_path %\u003e\u003c/li\u003e\n          \u003cli\u003e\u003c%= link_to \"Help\", help_path %\u003e\u003c/li\u003e\n          \u003c% if signed_in? %\u003e\n            \u003cli\u003e\u003c%= link_to \"Users\", users_path %\u003e\u003c/li\u003e\n            \u003cli class=\"pure-menu-can-have-children pure-menu-has-children\"\u003e\n              \u003ca href=\"#\" data-toggle=\"dropdown\"\u003eAccount \u003cspan class=\"pure-custom-caret\"\u003e\u003c/span\u003e\u003c/a\u003e\n              \u003cul class=\"pure-menu-children\"\u003e\n                \u003cli\u003e\u003c%= link_to \"Profile\", current_user %\u003e\u003c/li\u003e\n                \u003cli\u003e\u003c%= link_to \"Settings\", edit_user_path(current_user) %\u003e\u003c/li\u003e\n                \u003cli class=\"pure-menu-separator\"\u003e\u003c/li\u003e\n                \u003cli\u003e\n                  \u003c%= link_to \"Sign Out\", signout_path, method: \"delete\" %\u003e\n                \u003c/li\u003e\n              \u003c/ul\u003e\n            \u003c/li\u003e\n          \u003c% else %\u003e\n            \u003cli\u003e\u003c%= link_to \"Sign In\", signin_path %\u003e\u003c/li\u003e\n          \u003c% end %\u003e\n        \u003c/ul\u003e\n      \u003c/div\u003e\n\u003c/header\u003e\n```\n\nMy dropdown menu code do not support dropdown submenus, for that you can use YUI as in purecss.io example, or pull me a workaround :)\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%2Fmseri%2Frails-purecss","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmseri%2Frails-purecss","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmseri%2Frails-purecss/lists"}