npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

bourbon-bitters

v1.2.1

Published

Scaffold styles, variables and structure for Bourbon projects.

Downloads

49

Readme

Bitters

Gem Version

Scaffold styles, variables and structure for Bourbon projects.

Bitters helps designers start projects faster by defining a basic set of Sass variables, default element style and project structure. It’s been specifically designed for use within web applications. Bitters should live in your project’s root Sass directory and we encourage you to modify and extend it to meet your design and brand requirements.

Bitters is made to work alongside a CSS reset; not replace one. Our suggested reset is Normalize.

Follow the @bourbonsass Twitter account for updates.

Requirements

  • Sass 3.4+ or LibSass 3.1+
  • Bourbon 5.0+
  • Ruby 1.9.3+ (required to install Bitters from the command line)

Installation

For command line help, visit our wiki page on Bitters’ command line interface.

  1. Install the Bitters gem using the RubyGems package manager:
$ gem install bitters

If you use rbenv, be sure to run rbenv rehash without any errors.

  1. Install Bourbon

  2. Install the Bitters library into the current directory by running the following command at the command-line. If you’re using Ruby on Rails, run the command in app/assets/stylesheets:

$ bitters install

A base directory will be generated which contains all of the Bitters files.

  1. Import Bitters after Bourbon in your application.css.scss or main manifest file. All additional stylesheets should be imported below Bitters.
@import "bourbon";
@import "base/base";
  1. Once Bourbon and Bitters are set up, you can begin to import your styles below them.
@import "bourbon";
@import "base/base";
@import "my-project-styles";
…

Using Bitters

Sass structure & default style

The Bitters directory should contain styles for all the basic elements used throughout the project. It also contains directories for custom mixins and extends for your site as well. Add code to the existing files or add new files to the directories. Customize Bitters for your site as you see fit.

Variables

This houses all variables that are used, or will be used, in more than one file in your site. Variable names in Bitters that are used outside of the variables file start with $base to indicate that they are the most basic variables.

Typography

All type is based on $base-font-size which is set to 1em (16px) by default. The spacing around type is based on $base-line-height so as to keep a semi-baseline grid. All sizes are scaled up or down by a factor of 0.25.

Lists

All lists have stripped out styles. No bullets, no left padding.

Forms

Adds basic styles all form elements. The variables at the top of the file all inherit from the variables file but make it really easy to be overridden.

Buttons

Basic style for button and input[type="submit"]. Base button styles can be changed by modifying the styles applied to button and #{$all-button-inputs} in base/_button.scss.

Contributing

For more information on contributing to Bitters, check out our contributing guide.

The Bourbon family

  • Bourbon: A simple and lightweight mixin library for Sass
  • Neat: A lightweight semantic grid framework for Sass and Bourbon
  • Bitters: Scaffold styles, variables and structure for Bourbon projects
  • Refills: Prepackaged patterns and components built with Bourbon, Neat and Bitters

License

Copyright © 2013–2015 thoughtbot, inc. Bitters is free software, and may be redistributed under the terms specified in the license.

About thoughtbot

Bitters is maintained and funded by thoughtbot, inc. The names and logos for thoughtbot are trademarks of thoughtbot, inc.

We love open source software! See our other projects or hire us to design, develop, and grow your product.