Git Product home page Git Product logo

boundless's Introduction

Boundless

NPM version Build Status codecov

Installation

# the whole library
npm i boundless --save

# or just a part of it
npm i boundless-button --save

Boundless currently supports IE10+ (needs a Promise polyfill) and all other modern browsers.

Philosophy

Boundless is a UI toolkit that was conceived to abstract away difficult interface patterns. It follows three main guidelines:

  1. Performance is mandatory, not a nice-to-have.
  2. Components should be as customizable as possible.
  3. Components should be as accessible as possible (falling back to WAI-ARIA attributes when necessary.)

The general idea of this library is to provide ready-to-go solutions for things you really wouldn't want to build yourself, not because they're hard... but because they're hard to design right. We are always open to suggestions and strive to keep Boundless as concise and useful as possible.

Reference styles

A precompiled base "skin" is available to use as a base when customizing Boundless for your own project. Some of the components do rely on the reference layout in their styles to function properly. It is designed to be very unopinionated.

You can find the compiled CSS at /public/skin.css. There is a minified version available as well: /public/skin.min.css.

The Boundless website is based on this skin with branding colors, etc.

Branding Boundless

Thanks to the modular nature of Stylus, injecting your own customization to things like accent color(s) is extremely simple.

In your own project's .styl file, define any variable overrides (see variables.styl for what variables can be overridden), then import Boundless's master styl file:

// first, pull in the variables
@require "node_modules/boundless/variables";

// do overrides as desired...
color-accent = red;

// then pull in the rest of the styles
@require "node_modules/boundless/style";

Next time your project's CSS is built, Boundless's CSS will automatically be compiled with the appropriate changes and included in your stylesheet.

Developing Boundless

git clone [email protected]:enigma-io/boundless.git boundless
cd boundless

npm i
npm start # runs the development server so you can make changes live ✨

MIT License

boundless's People

Contributors

sighrobot avatar quantizor avatar newyork-anthonyng avatar jdan avatar j16r avatar

Watchers

James Cloos avatar Erick Katzenstein avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.