A front-end framework for modular web apps
Switch branches/tags
Clone or download
Latest commit e9e2fb6 Mar 18, 2016
Type Name Latest commit message Commit time
Failed to load latest commit information.
docs clean up docs Mar 18, 2016
lib use #5b6a72 to derive neutralRoot Nov 3, 2015
styles lighten s-alert--info background color for aesthetics Feb 10, 2016
CONTRIBUTING.md update CONTRIBUTING.md to newer version Jul 1, 2015
LICENSE Update LICENSE Apr 16, 2015
README.md clean up docs Mar 18, 2016
index.json index.json Apr 30, 2015
package.json bump package.json to 0.6.0 Aug 28, 2015


Solar css framework

Solar is a front-end css framework. It was originally developed for use with the Stellar Interstellar Module System. It is currently mainly used on front-end projects by Stellar.org.

This framework was designed to work in layers so that specific layers of the solar framework could be replaced with ease.

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.


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.