{"id":19809893,"url":"https://github.com/lewagon/rails-stylesheets","last_synced_at":"2026-01-25T08:31:02.732Z","repository":{"id":27025748,"uuid":"30490440","full_name":"lewagon/rails-stylesheets","owner":"lewagon","description":"Stylesheets starting kit @LeWagon","archived":false,"fork":false,"pushed_at":"2025-12-26T04:22:30.000Z","size":80,"stargazers_count":171,"open_issues_count":0,"forks_count":96,"subscribers_count":25,"default_branch":"master","last_synced_at":"2026-01-15T00:59:34.328Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"SCSS","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/lewagon.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2015-02-08T12:33:01.000Z","updated_at":"2025-10-30T15:00:18.000Z","dependencies_parsed_at":"2024-03-06T12:45:08.070Z","dependency_job_id":"1a912d3a-a311-4dc1-8817-3c4bfb7fa90c","html_url":"https://github.com/lewagon/rails-stylesheets","commit_stats":null,"previous_names":["lewagon/stylesheets"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/lewagon/rails-stylesheets","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lewagon%2Frails-stylesheets","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lewagon%2Frails-stylesheets/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lewagon%2Frails-stylesheets/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lewagon%2Frails-stylesheets/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/lewagon","download_url":"https://codeload.github.com/lewagon/rails-stylesheets/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lewagon%2Frails-stylesheets/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28749284,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-25T07:58:02.558Z","status":"ssl_error","status_checked_at":"2026-01-25T07:57:57.153Z","response_time":113,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5: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":"2024-11-12T09:18:35.588Z","updated_at":"2026-01-25T08:31:02.727Z","avatar_url":"https://github.com/lewagon.png","language":"SCSS","funding_links":[],"categories":["Uncategorized"],"sub_categories":["Uncategorized"],"readme":"First of all make sure you've created a rails app\n\n```bash\nrails new APP_NAME\n```\n\n## Setup\n\nEnsure you have the following gems in your Rails `Gemfile`:\n\n```ruby\ngem \"sassc-rails\"\ngem \"bootstrap\", \"~\u003e 5.3\"\ngem \"autoprefixer-rails\"\ngem \"font-awesome-sass\", \"~\u003e 6.1\"\ngem \"simple_form\"\n```\n\nIn your terminal, generate Simple Form Bootstrap config:\n\n```bash\nbundle install\nrails generate simple_form:install --bootstrap\n```\n\nThen replace Rails' stylesheets by Le Wagon's stylesheets:\n\n```bash\nrm -rf app/assets/stylesheets\ncurl -L https://github.com/lewagon/stylesheets/archive/master.zip \u003e stylesheets.zip\nunzip stylesheets.zip -d app/assets \u0026\u0026 rm stylesheets.zip \u0026\u0026 mv app/assets/rails-stylesheets-master app/assets/stylesheets\n```\n\n**On Ubuntu/Windows**: if the `unzip` command returns an error, please install it first by running `sudo apt install unzip`.\n\nNote that when you update the colors in `config/colors`, the (text) color of your buttons might change from white to black. This is done automatically by Bootstrap using the [WCAG 2.0 algorithm](https://getbootstrap.com/docs/5.1/customize/sass/#color-contrast) which makes sure that the contrast between the text and the background color meets accessibility standards.\n\n## Bootstrap JS\n\nInstall Bootstrap JS:\n```bash\nimportmap pin bootstrap\n```\n\nImport Bootstrap:\n\n```js\n// app/javascript/application.js\nimport \"bootstrap\"\nimport \"@popperjs/core\"\n```\n\n```js\n// app/assets/config/manifest.js\n//= link popper.js\n//= link bootstrap.min.js\n```\n\n```rb\n# config/importmap.rb\n\n# replace these lines:\n# pin \"bootstrap\" # @5.3.2\n# pin \"@popperjs/core\", to: \"@popperjs--core.js\" # @2.11.8\n# with this:\npin \"bootstrap\", to: \"bootstrap.min.js\", preload: true\npin \"@popperjs/core\", to: \"popper.js\", preload: true\n```\n\n## Adding new `.scss` files\n\nLook at your main `application.scss` file to see how SCSS files are imported. There should **not** be a `*= require_tree .` line in the file.\n\n```scss\n// app/assets/stylesheets/application.scss\n\n// Graphical variables\n@import \"config/fonts\";\n@import \"config/colors\";\n@import \"config/bootstrap_variables\";\n\n// External libraries\n@import \"bootstrap\";\n@import \"font-awesome-sprockets\";\n@import \"font-awesome\";\n\n// Your CSS partials\n@import \"components/index\";\n@import \"pages/index\";\n```\n\nFor every folder (**`components`**, **`pages`**), there is one `_index.scss` partial which is responsible for importing all the other partials of its folder.\n\n**Example 1**: Let's say you add a new `_contact.scss` file in **`pages`** then modify `pages/_index.scss` as:\n\n```scss\n// pages/_index.scss\n@import \"home\";\n@import \"contact\";\n```\n\n**Example 2**: Let's say you add a new `_card.scss` file in **`components`** then modify `components/_index.scss` as:\n\n```scss\n// components/_index.scss\n@import \"card\";\n```\n\n## Navbar template\n\nOur `layouts/_navbar.scss` code works well with our home-made ERB template which you can find here:\n\n- [version without login](https://github.com/lewagon/awesome-navbars/blob/master/templates/_navbar_wagon_without_login.html.erb)\n- [version with login](https://github.com/lewagon/awesome-navbars/blob/master/templates/_navbar_wagon.html.erb)\n\nDon't forget that `*.html.erb` files go in the `app/views` folder, and `*.scss` files go in the `app/assets/stylesheets` folder. Also, our navbars have a link to the `root_path`, so make sure that you have a `root to: \"controller#action\"` route in your `config/routes.rb` file.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flewagon%2Frails-stylesheets","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flewagon%2Frails-stylesheets","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flewagon%2Frails-stylesheets/lists"}