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

armstrong-css

v2.5.0

Published

Armstrong is a lightweight css framework written in SASS

Downloads

9

Readme

To get started, check out http://armstrongcss.org!

Table of contents

Structure & Modules

Armstrong is designed to be fully modular. If you don't need something, like tables for example, just don't include it!

Below is a breakdown of the structure

style/
└── armstrong/
    ├── modules/
    │   ├── _base.scss
    │   ├── _buttons.scss
    │   ├── _fonts.scss
    │   ├── _forms.scss
    │   ├── _grid.scss
    │   ├── _dialog.scss
    │   ├── _helpers.scss
    │   ├── _lists.scss
    │   ├── _mixins.scss
    │   ├── _normalize.scss
    │   ├── _navigation.scss
    │   ├── _scaffold.scss
    │   ├── _progress.scss
    │   ├── _settings.scss
    │   ├── _tables.scss
    │   └── _typography.scss
    ├── armstrong.scss
    └── armstrong.css

_base.scss

The raw essentials for armstrong. We wouldn't reccomend removing this or anything it imports, or you're gonna have a bad time. Includes the grid, fontawesome and some basic, sensible, hip & happening defaults.

_buttons.scss

Self explanatory really. Adds some plain, sensible, cross browser defaults for button controls. This includes button and submit. The out of the box classes are 'positive' and 'negative', which are green and red respectively.

_fonts.scss

Overides base font with one from Google Fonts (open sans by default). Change this file for an easy way to change your sites global font.

_grid.scss

This file is imported by bicep (via _base) as a mandatory import. It provides a flexible grid based layout for your site. The new version uses flexbox, so make sure you're not targeting old browsers

_lists.scss

Handy for bootstrapping of linear lists.

_mixins.scss

This file is used by various files across armstrong. Nothing exciting here!

_normalize.scss

This file is imported by armstrong as a mandatory import. It is just the latest from normalize.

_scaffold.scss

This provides some defaults for layout pages. Strongly recommended if you want to use headers and footers (sticky or otherwise) without any hassle.

_settings.scss

Provides base settings for all the rest of armstrong. You can change these if you want, but it's better just to override later yourself if you want to.

_progress.scss

New in V2! Gives you a nice spinner along with a determinate/indeterminate progress bar.

_navigation.scss

New in V2! If you use a nav with some a tags, you'll get a nice looking nav without any messing about.

_dialog.scss

New in V2! All you need to show pure css dialogs. Again, made for minimal hassle.

_tables.scss

Again, self explanatory. Provides some less hideous defaults for cross-browser tables.

_typography.scss

This gives you some nice defaults for typography elements (p, span, code, h1, h2, h3, .date, .author etc)

Customization

To customize Armstrong, you just need to crack open the armstrong.scss file and comment/remove the modules you don't need. For example here is the default with all the dumbbells and whistles

// REQUIRED IMPORTS
@import "modules/base";

// OPTIONAL IMPORTS
@import "modules/fonts";
@import "modules/typography";
@import "modules/forms";
@import "modules/tables";
@import "modules/lists";
@import "modules/buttons";

And here is it configured without tables

// REQUIRED IMPORTS
@import "modules/base";

// OPTIONAL IMPORTS
@import "modules/fonts";
@import "modules/typography";
@import "modules/forms";
//@import "modules/tables";
@import "modules/lists";
@import "modules/buttons";

Just be sure never to remove the modules/base import or again, you're gonna have a bad time.

Third party components

Armstrong uses a couple of amazing components from other authors

Huge thanks to these guys for writing libraries we could not live without :)

Bugs and feature requests

Have a bug or a feature request? Please first search for existing and closed issues. If your problem or idea is not addressed yet, please open a new issue.

Community

Keep track of development and community news.

  • Follow @rocketmakers on Twitter.
  • Implementation help may be found at Stack Overflow (tagged armstrong-css).
  • Developers should use the keyword armstrong-css on packages which modify or add to the functionality of Armstrong when distributing through npm or similar delivery mechanisms for maximum discoverability.

Versioning

For transparency into our release cycle and in striving to maintain backward compatibility, Armstrong is maintained under the Semantic Versioning guidelines. Sometimes we screw up, but we'll adhere to those rules whenever possible.

Creators

Rocketmakers

Copyright and license

Code and documentation copyright 2011-2015 Rocketmakers Ltd., and released under the MIT license.