Skip to content

Latest commit

 

History

History
59 lines (36 loc) · 2.31 KB

README.md

File metadata and controls

59 lines (36 loc) · 2.31 KB
Raw

Camden::StyleGuide

A Rails engine that provides a visual design template for Camden apps using Webpacker

Why?

  • Avoids keeping some stuff in Sprockets and some in Webpacker, less artifacts to download, cache, better compression etc
  • Encourages a consistent design across pages and applications
  • Reduces the tendency to reinvent wheels
  • Provides an isolated environment for devs and designers to collaborate on design features without setting up and running a target app
  • Preserves some of the development and design effort currently being put into apps that may or may not be around in the near future

What's in the box

This is a Ruby gem containing a Rails engine and a Dockerfile for development purposes. There is a dummy rails app in the test/dummy folder that uses the gem as an example for usage and to support development. The Dockerfile brings up the dummy app and a webpack dev server, so live changes can be made to the guide and viewed in realtime.

Usage within your Rails app

  • Add the gem to the Gemfile (TODO - publish somewhere)
gem "camden_style_guide", git: '[email protected]:wearefuturegov/camden-style-guide.git'

And then execute:

$ bundle
  • Import the styles in your layout
<%= Camden::StyleGuide::TagHelper.style_guide_css_pack_tag :media => "all" %>

  • You can also view the docs by visiting http://localhost:3000/style-guide

  • For production usage you can run rake camden_style_guide:webpacker:compile to create the assets which will then be served statically.

Usage for development of the Guide itself

This ought to start a server so that you can preview the guide at http://localhost:4000/style_guide

docker-compose up

This brings up a dev server running on 3056 that shows live updates as you make them (js) or refresh (scss).

Contributing

  1. Add a section to the style guide documentation page app/views/camden/style_guide/application/index.html.erb with some example usage and explanation on how to use.

  2. Add some CSS to the app/frontend/stylesheets/ folder and import it from app/frontend/packs/style_guide.scss

  3. Bump the version. This is important so that target apps can control when they upgrade their styles

  4. Open a PR

License

The gem is available as open source under the terms of the MIT License.