Instacart

Beetstrap

Shared icons, images, styles, fonts, etc.

This is still a work in progress as we transition the consumer app over to these styles.

Usage

Add the gem:

  gem 'beetstrap', git: '[email protected]:instacart/beetstrap.git'

Import beetstrap in your css manifest (application.scss):

@import 'beetstrap';

Boom.

Documentation

To build the docs, first run (you'll need to install node/npm as a prerequisite):

npm install

After you've installed the dependencies, run:

npm install gulp -g
gulp

This will watch for file changes and rebuild the site. You can view the docs locally at http://localhost:8080

Why?

To give designers and frontend folks an alternative to setting up the Rails app to work on assets/icons/styles/etc.

Setup

  • Clone and cd into this repo.
  • Run bundle install

To test changes against the dummy Rails app:

  • cd into the test app: cd test/dummy
  • Boot the server: rails s -p 3002
  • Visit http://localhost:3002/ in your browser!

Publishing Fonts

  • visit fontastic
    • click to 'publish' tab, then 'download' for install manually
    • should include font files and a style.css file inside ia-icons folder
  • copy fonts into assets/fonts/beetstrap
  • delete old ic-**** fonts
  • change new fonts from ia-**** to ic-****
  • view the diff, make sure correct icons have changed and some have not. Sometimes updating icons will utilize different characters and caching can cause incorrect icons to show up.
  • bump version on gem
  • build gem
  • publish gem

Copyright © 2015 Maplebear inc. All Rights Reserved.