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

patternfly-sass

v3.23.2

Published

Red Hat's Patternfly, converted to Sass and ready to drop into Rails

Downloads

17

Readme

#patternfly-sass

Gem Version Dependency Status Build Status Chat

patternfly-sass is a Sass-powered version of PatternFly, ready to drop right into your Sass powered applications.

Installation

Please see the appropriate guide for your environment of choice:

a. Ruby on Rails

patternfly-sass is easy to drop into Rails with the asset pipeline.

In your Gemfile you need to add the patternfly-sass gem, and ensure that the sass-rails gem is present - it is added to new Rails applications by default.

gem 'patternfly-sass', '~> 3.0.0'
gem 'sass-rails', '>= 3.2'

bundle install and restart your server to make the files available through the pipeline.

Import Bootstrap styles in app/assets/stylesheets/application.scss:

// "patternfly-sprockets" must be imported before "patternfly" and "patternfly/variables"
@import "patternfly-sprockets";
@import "patternfly";

patternfly-sprockets must be imported before patternfly for the icon fonts to work.

Make sure the file has .scss extension (or .sass for Sass syntax). If you have just generated a new Rails app, it may come with a .css file instead. If this file exists, it will be served instead of Sass, so rename it:

$ mv app/assets/stylesheets/application.css app/assets/stylesheets/application.scss

Then, remove all the //= require and //= require_tree statements from the file. Instead, use @import to import Sass files.

Do not use //= require in Sass or your other stylesheets will not be able to access the PatternFly mixins or variables.

Require PatternFly Javascripts in app/assets/javascripts/application.js:

//= require jquery
//= require bootstrap
//= require patternfly

Rails 4.x

Please make sure sprockets-rails is at least v2.1.4.

Rails 3.2.x

patternfly-sass is no longer compatible with Rails 3.

Configuration

Sass

By default all of PatternFly is imported.

You can also import components explicitly. To start with a full list of modules copy _patternfly.scss file into your assets as _patternfly-custom.scss. Then comment out components you do not want from _patternfly-custom. In the application Sass file, replace @import 'patternfly' with:

@import 'patternfly-custom';

Sass: Number Precision

patternfly-sass requires minimum [Sass number precision][patternfly-precision] of 8 (default is 5).

Precision is set for Rails automatically. When using ruby Sass compiler standalone you can set it with:

::Sass::Script::Value::Number.precision = [8, ::Sass::Script::Value::Number.precision].max

Sass: Autoprefixer

PatternFly requires the use of Autoprefixer. Autoprefixer adds vendor prefixes to CSS rules using values from Can I Use.

JavaScript

assets/javascripts/patternfly.js contains all of PatternFly JavaScript, concatenated in the correct order.

Fonts

The fonts are referenced as:

"#{$icon-font-path}#{$icon-font-name}.eot"

$icon-font-path defaults to patternfly/ if asset path helpers are used, and ../fonts/patternfly/ otherwise.

When using patternfly-sass with Sprockets, you must import the relevant path helpers before PatternFly itself, for example:

@import "patternfly-sprockets";
@import "patternfly";

Usage

Sass

Import PatternFly into a Sass file (for example, application.scss) to get all of PatternFly's styles, mixins and variables!

@import "patternfly";

The full list of patternfly variables can be found here. You can override these by simply redefining the variable before the @import directive, e.g.:

$navbar-default-bg: #312312;
$light-orange: #ff8c00;
$navbar-default-color: $light-orange;

@import "patternfly";

Version

PatternFly for Sass version may differ from the upstream version in the last number, known as MINOR. The minor version may be ahead of the corresponding upstream minor. This happens when we need to release Sass-specific changes.

Always refer to CHANGELOG.md when upgrading.


Development and Contributing

If you'd like to help with the development of patternfly-sass itself, read this section.

Upstream Converter

Keeping patternfly-sass in sync with upstream changes from PatternFly used to be an error prone and time consuming manual process. With Bootstrap 3 we have introduced a converter that automates this.

Note: if you're just looking to use PatternFly, see the installation section above.

Upstream changes to the PatternFly project can now be pulled in using the convert rake task.

Here's an example run that would pull down the master branch from the main patternfly/patternfly repo:

rake convert

This will convert the latest LESS to Sass and update to the latest JS. To convert a specific branch or version, pass the branch name or the commit hash as the first task argument:

rake convert[tags/v1.2.1]

The latest converter script is located here and does the following:

  • Converts upstream patternfly LESS files to its matching SCSS file.
  • Copies all upstream JavaScript into assets/javascripts/patternfly, a Sprockets concatenation at assets/javascripts/patternfly.js.
  • Copies all upstream font files into assets/fonts/patternfly.
  • Sets Patternfly::PATTERNFLY_SHA in version.rb to the branch sha.

This converter fully converts original LESS to SCSS. Conversion is automatic but requires instructions for certain transformations (see converter output). Please submit GitHub issues tagged with conversion.

Credits

patternfly-sass's converter is a fork of bootstrap-sass. The modifications and all other code is made by: