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

solar-css

v0.6.0

Published

A front-end framework for modular web apps

Downloads

7

Readme

Solar css framework

Solar is a front-end css framework. It is developed for anybody to use with the Interstellar Module System. It is also to be used by Stellar.org's web properties.

Design philosophies/goals

The solar css framework is:

  • Mobile first: concepts designed with a mobile first philosophy
  • Unopinionated: the core is unopinionated in design
  • Themable: enabling anybody to theme the look and feel
  • Modular: enables styles to be shared across multiple web applications, websites, teams or organizations

Getting started

To see an example of solar in use, see the new client.

To learn about the different parts of the solar ecosystem and how extensions and themes come in, read the Solar css framework architecture.

To learn about how to write css consistent with the design laid out in solar, read the solar css guide.

Simple usage

At the top of your css file, import the necessary files in the right order. For example:

@import '../../node_modules/solar-css/lib/index';
@import '../../node_modules/solar-stellarorg/lib/index';

@import '../../node_modules/solar-css/styles/index';
@import '../../node_modules/solar-stellarorg/styles/index';
@import '../../node_modules/solar-stellarorg-pages/styles/index';

This allows for useful error/warning messages from sass since the direct files are being imported and not just bundled. The downside is that the developer will have to manage this. However, if the developer already understands how Solar works, then it should be easy.

Conventions

Solar is more than just a set of sass/js files. It is also set of conventions. Solar extensions and consumers should follow the solar conventions. These conventions are designed to enable developers to write css in a unified, clean, and modular way.

These conventions should be keep the css organized while still being easy to understand. Developers new to this framework should be able to write code meaningfully without being bogged down by heavy conventions.