{"id":13392795,"url":"https://github.com/doabit/semantic-ui-sass","last_synced_at":"2025-05-14T14:10:09.948Z","repository":{"id":11084382,"uuid":"13432214","full_name":"doabit/semantic-ui-sass","owner":"doabit","description":"Semantic UI, converted to Sass and ready to drop into Rails \u0026 Compass.","archived":false,"fork":false,"pushed_at":"2022-07-03T19:06:47.000Z","size":6256,"stargazers_count":1138,"open_issues_count":2,"forks_count":192,"subscribers_count":41,"default_branch":"master","last_synced_at":"2025-04-13T23:53:14.431Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"SCSS","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/doabit.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2013-10-09T03:34:04.000Z","updated_at":"2025-02-19T18:59:55.000Z","dependencies_parsed_at":"2022-09-21T12:24:39.605Z","dependency_job_id":null,"html_url":"https://github.com/doabit/semantic-ui-sass","commit_stats":null,"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/doabit%2Fsemantic-ui-sass","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/doabit%2Fsemantic-ui-sass/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/doabit%2Fsemantic-ui-sass/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/doabit%2Fsemantic-ui-sass/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/doabit","download_url":"https://codeload.github.com/doabit/semantic-ui-sass/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254043224,"owners_count":22004912,"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-07-30T17:00:37.301Z","updated_at":"2025-05-14T14:10:04.928Z","avatar_url":"https://github.com/doabit.png","language":"SCSS","funding_links":[],"categories":["Libraries","SCSS","CSS","Resources"],"sub_categories":[],"readme":"# Semantic UI for Sass\n\n`semantic-ui-sass` is an Sass-powered version of\n[Semantic UI](https://github.com/Semantic-Org/Semantic-UI) and ready to drop\ninto Rails, Compass, or Sprockets.\n\n[![Build Status](https://travis-ci.com/doabit/semantic-ui-sass.svg?branch=master)](https://travis-ci.com/doabit/semantic-ui-sass)\n\n## NOTE\n\nThe gem only has default theme.\n\n## Installation and Usage\n\n```ruby\ngem 'semantic-ui-sass'\n```\n\n`bundle install` and restart your server to make the files available through the\npipeline.\n\n# semantic-ui-sass with Rails or Sprockets\n\n## CSS\n\nImport Semantic in an SCSS file (for example, `application.css.scss`) to get all\nof Semantic's styles\n\n```css\n@import 'semantic-ui';\n```\n\nYou can also include modules\n\n```css\n@import 'semantic-ui/collections/menu';\n```\n\n## Custom font\n\n```css\n$font-url: 'http://fonts.useso.com/css?family=Lato:400,700,400italic,700italic\u0026subset=latin';\n@import 'semantic-ui';\n```\n\n## Skip font loading\n\n```css\n$import-google-fonts: false;\n@import 'semantic-ui';\n```\n\n## Custom font family\n\n```css\n$font-family: 'custom-font-family';\n@import 'semantic-ui';\n```\n\n### Skip use of custom scrollbars\n\n```css\n$use-custom-scrollbars: false;\n@import 'semantic-ui';\n```\n\n## All variables, you can custom any of that\n\nFonts:\n\n```css\n$font-name: 'Lato' !default;\n$font-family: $font-name, 'Helvetica Neue', Arial, Helvetica, sans-serif !default;\n$font-url: 'https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic\u0026subset=latin,latin-ext' !default;\n$import-google-fonts: true !default;\n```\n\nScrollbars:\n\n```css\n$use-custom-scrollbars: true !default;\n```\n\nBreakpoints:\n\n```css\n$mobile-breakpoint: 320px !default;\n$tablet-breakpoint: 768px !default;\n$computer-breakpoint: 992px !default;\n$large-monitor-breakpoint: 1200px !default;\n$widescreen-monitor-breakpoint: 1920px !default;\n```\n\n## Javascripts\n\n### Ruby on Rails Version 5\n\nWe have a helper that includes all Semantic javascripts. Put this in your\nJavascript manifest (usually in `application.js`) to\n\n```js\n// Loads all Semantic javascripts\n//= require semantic-ui\n```\n\nYou can also load individual modules, provided you also require any\ndependencies.\n\n```js\n//= require semantic-ui/modal\n//= require semantic-ui/dropdown\n```\n\n### Ruby on Rails Version 6+ with webpacker\n\nAdd packages with yarn:\n\n```console\nyarn add jquery popper.js @doabit/semantic-ui-sass\n```\n\nIn config/webpack/environment.js add the following:\n\n```js\nconst webpack = require('webpack')\n\nenvironment.plugins.append(\n  'Provide',\n  new webpack.ProvidePlugin({\n    $: 'jquery',\n    jQuery: 'jquery',\n    Popper: ['popper.js', 'default']\n  })\n)\n```\n\nIn app/javascript/packs/application.js add the following:\n\n```js\nimport '@doabit/semantic-ui-sass'\n```\n\nIf you use `webpacker` to import stylesheet, you should add\n\n```js\nimport '@doabit/semantic-ui-sass/src/scss/semantic-ui.scss'\n```\n\n[Rails6 webpacker demo](https://github.com/doabit/semantic-ui-sass-rails6-demo)\n\n# semantic-ui-sass with Compass\n\n## New project\n\nInstall the gem and create a new project using the gem.\n\n```console\ngem install semantic-ui-sass\ncompass create compass-project -r semantic-ui-sass --using semantic-ui\n```\n\nThis will sort a few things out:\n\n- You'll get a starting `styles.scss`\n- You'll get a compiled stylesheet compiled \u0026 ready to drop into your\n  application\n- We'll also copy the Semantic javascripts \u0026 images \u0026 fonts into their\n  respective folders for you\n\n## Existing project\n\nInstall the gem, add the require statement to the top of your configuration\nfile, and install the extension.\n\n```console\ngem install semantic-ui-sass\n```\n\n```ruby\n# In config.rb\nrequire 'semantic-ui-sass'\n```\n\n```console\ncompass install semantic-ui\n```\n\n### NOTE\n\nWhen using compass, you should visit file in local server, eg\n`http://localhost:3000/index.html`, rather than\n`file:///Users/doabit/demo/index.html`\n\n# Rails Helpers\n\n## Breadcrumbs helper\n\nAdd breadcrumbs helper `\u003c%= semantic_breadcrumbs %\u003e` to your layout.\n\n```ruby\nclass ApplicationController\n  semantic_breadcrumb :index, :root_path\nend\n```\n\n```ruby\nclass ExamplesController \u003c ApplicationController\n  semantic_breadcrumb :index, :examples_path\n\n  def index\n  end\n\n  def show\n    @example = Example.find params[:id]\n    semantic_breadcrumb @example.name, example_path(@example)\n    # semantic_breadcrumb :show, example_path(@example)\n  end\nend\n```\n\n## Flash helper\n\nAdd flash helper `\u003c%= semantic_flash %\u003e` to your layout\n\n## Icon helper\n\n```ruby\nsemantic_icon('add')\n# =\u003e \u003ci class=\"add icon\"\u003e\u003c/i\u003e\nsemantic_icon(:add)\n# =\u003e \u003ci class=\"add icon\"\u003e\u003c/i\u003e\nsemantic_icon('add sign')\n# =\u003e \u003ci class=\"add sign icon\"\u003e\u003c/i\u003e\nsemantic_icon('add', 'sign')\n# =\u003e \u003ci class=\"add sign icon\"\u003e\u003c/i\u003e\nsemantic_icon(:add, :sign)\n# =\u003e \u003ci class=\"add sign icon\"\u003e\u003c/i\u003e\nsemantic_icon('add', id: 'id')\n# =\u003e \u003ci class=\"add icon\" id=\"id\"\u003e\u003c/i\u003e\n```\n\n## TODO\n\n- Add global variables\n- Add rails helpers like `render_flash`?\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%2Fdoabit%2Fsemantic-ui-sass","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdoabit%2Fsemantic-ui-sass","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdoabit%2Fsemantic-ui-sass/lists"}