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

bootstrap-solarized-theme

v1.0.3

Published

Bootstrap theme using the Solarized color palette

Downloads

7

Vulnerabilities

Powered byPowered by Snyk
  • 0High
  • 0Medium
  • 0Low

Links

Git

Maintainers

thijskokthijskok

Keywords

bootstrapthemesolarized

Readme

Bootstrap Solarized theme

Build Status npm version

Bootstrap Solarized is a Bootstrap 3 compatible theme that uses Ethan Schoonover's awesome Solarized color palette. It comes in two varieties, a light and a dark theme.

preview_light preview_dark

How to use

Using this theme on your existing Bootstrap application is easy:

  1. Install this theme using either NPM or Bower:

    For NPM, use:

    npm install bootstrap-solarized-theme

    For Bower, use:

    bower install bootstrap-solarized-theme

  2. Add the necessary links to your <head> element for the stylesheet:

      <!-- Bootstrap -->
  <link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

  <!-- Bootstrap Solarized dark theme -->
  <link rel="stylesheet" type="text/css" href="dist/css/solarized-dark-theme.min.css">

    Note: depending on your installation and deployment methods, the CSS files might reside in another directory. Change dist/css/ into the path where the CSS files got installed or copied to. For example, NPM installs the theme into node_modules/bootstrap-solarized-theme/dist as a default.

  3. Refresh that page and watch some (dark) Solarized glory!

Support and Contributions

Contributions are welcome and will be fully credited.

Before filing an issue:

  • Attempt to replicate the problem, to ensure that it wasn't a coincidental incident.
  • Check to make sure your feature suggestion isn't already present within the project.
  • Check the pull requests tab to ensure that the bug doesn't have a fix in progress.
  • Check the pull requests tab to ensure that the feature isn't already in progress.

Before submitting a pull request:

  • Check the codebase to ensure that your feature doesn't already exist.
  • Check the pull requests to ensure that another person hasn't already submitted the feature or fix.

Development

This project uses Gulp to automate the workflow and build process. Ensure you have nodejs installed and gulp installed globally. After cloning the repo, run npm install to ensure you have all dev dependencies.

Gulp

  • gulp - build the CSS files and minify them.
  • gulp watch - run a watch task that will monitor the SASS files and regenerate the CSS files.
  • gulp lint - run a SASS lint task.

SASS

This theme uses the SASS syntax to redefine the Bootstrap variables.

  • solarized-dark-theme.scss: dark theme
  • solarized-light-theme.scss: light theme

You can add your overrides to either of these files. Say, if you want to use a different font, you can simply modify the theme file to look like this:

// Custom variables
$font-family-sans-serif:  'Menlo', Arial, sans-serif !default;

// Solarized Dark variables
@import 'variables-dark';

// Bootstrap SASS theme
@import '../node_modules/bootstrap-sass/assets/stylesheets/bootstrap';

Solarized

The Bootstrap Solarized theme is based on the Solarized project. All credits for picking the basic colors in this theme should go to Ethan Schoonover. Solarized provides a carefully designed sixteen color palette that offers great readability, nice contrasts, and a variety of basic colors that can be used to signify various application states (e.g., warning or error states, etc). Solarized can be used in many other ways, like in your favorite IDE or Terminal client, give it a try!

License

MIT License