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

@benefex/styles

v0.4.2

Published

Benefex Bootstrap override

Downloads

98

Readme

Benefex Bootstrap overrides

Make sure you set the relative icon-font-path for sass, see below:

# import the entire stylesheet as less

// assuming a webpack build you need the ~ to import from node modules
$icon-font-path: "~@benefex/styles/dist/fonts/bootstrap/"
@import "~@benefex/styles/dist/scss/_bootstrap.scss"

# import individual components
@import "~@benefex/styles/dist/scss/bootstrap/_buttons.scss"

For IE8 Support

For IE8 you need to use the extract text plugin, to extract the css into a separate file and not load it inline with the JS.

var ExtractTextPlugin = require("extract-text-webpack-plugin");
var autoprefixer = require('autoprefixer');
var browserList = require('browserslist');

var targetBrowsers = browserList('last 2 version, > 5%, ie > 7');

// Webpack config
 
config: {
    plugins: [
        new ExtractTextPlugin('[name].css')
    ],
    postcss: function(){
        return [autoprefixer({browsers: targetBrowsers})];
    },
    module: {
        loaders: [
            {
                test: /\.(scss|sass)$/,
                loader: ExtractTextPlugin.extract('style-loader', 'css-loader!postcss-loader!sass-loader')
            },
            { test: /\.(png|jpg|gif|svg)$/, loader: 'url?limit=2000'},
            {test: /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=1000&mimetype=application/font-woff'},
            {test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=1000&mimetype=application/octet-stream'},
            {test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: 'file'},
            {test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=1000&mimetype=image/svg+xml'}
        ]
    }
}

// make sure common chunks is specific and does not include the respond.js and html5 shiv
config.plugins.push(new webpack.optimize.CommonsChunkPlugin({name: 'vendor', chunks: ['app', 'vendor'], minChunks: Infinity}))

You should create a base style and import the bootstrap less file. Note the ~.

// basestyles.less 
@import "~@benefex/styles/dist/less/bootstrap.scss";

Bundle respond and html5shiv together into a ie8.js file

// ie8.ts
require('imports?this=>window!html5shiv');
require('imports?this=>window!@benefex/respond.js');

Sample setup. Be sure to include the ie8.js file after your extracted styles:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="path/yourCreatedCssFile.css" rel="stylesheet">

    <!-- HTML5 shiv and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="ie8.js"></script>
    <![endif]-->
  </head>
  <body ng-app>
    <div hello-directive>Hello, world!</hello-directive>

    <!-- Include webpack build as needed -->
    <script src="app.js"></script>
  </body>
</html>

Development

The original bootstrap is loaded via NPM so to update it just install a newer version in package.json.

To override existing bootstrap styles just create a file of the same name in the overrides folder.

See the folder structure in node_modules/bootstrap-sass. It should match.

overides/
├── _bootstrap.scss
├── _bootstrap-compass.scss
│   ├── bootstrap/
│      ├── _alerts.scss
│      ├── _etc.scss

Will be output to

dist/
├── scss/
│   ├── _bootstrap.scss
│   ├── _bootstrap-compass.scss
│   ├── bootstrap/
│      ├── _alerts.scss
│      ├── _etc.scss
|      ├── mixins/
|           ├── _alerts.scss
└── fonts/
    ├── bootstrap/
        ├── glyphicons-halflings-regular.eot
        ├── glyphicons-halflings-regular.svg
        ├── glyphicons-halflings-regular.ttf
        ├── glyphicons-halflings-regular.woff
        └── glyphicons-halflings-regular.woff2

Fonts

You must register for an icomoon account and import the SVG file which is under fonts/**/icomoon. You can then generate a new font with the updated icons if you added one. Make sure the existing class names are maintained or updated. e.g .icon-female

Replace

Files with named: name.replace.scss will replace the entire bootstrap file

Concat

Other files will have the overrides concatenated onto the end of the original file

Install

npm i @benefex/[email protected] --save-dev --exact

Webpack loaders

# include in webpack.config.js
module.exports = {
  module: {
    loaders: [
      // the url-loader uses DataUrls.
      // the file-loader emits files.
      {test: /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=application/font-woff'},
      {test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=application/octet-stream'},
      {test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: 'file'},
      {test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=image/svg+xml'}
    ]
  }
};

Installing

npm install

NPM Tasks

npm build builds a version for distribution via npm npm prepublish used when publishing to npm

Publishing workflow

  1. Run build and check that your styles have been updated in dist
  2. Bump version in package.json following Semantic Versioning SemVer
  3. Tag the release commit in git: git tag -a v0.1.5 -m "Published v0.1.5"
  4. Push the tags up to github: git push origin --tags
  5. Push the repo git push
  6. Publish npm publish