@algolia/fragments.js

Fragments.js is a Nodejs implementation of Fragments.css, an atomic css framework that aims to make developers' lives easier.

Made for all usecases

One of the advantages of choosing Fragments.js to build your UIs is that it's fully customizable from one and only entry point. Head to the fragments.config.js and adjust the template with your own colors, fonts and styles, which will then be propogated to the compiled CSS.

Using Fragments.js

Note that we're using yarn for these examples, but you can of course use the npm equivalent.

Getting started

yarn add @algolia/fragments.js

To initialise the fragments.config.js, run the following:

fragments init

Make sure to edit the newly created fragments.config.js file in your root directory, after which you can run:

fragments build [destination]

This will output fragments.css with your configuration, into the destination folder, which defaults to /dist.

If you're having troubles making it work and getting command not found, try running the command using either node_modules/.bin/fragments <command> [options] or npx.

Versions

Do your edits, then:

• Open a new pull request from the branch holding your changes to master

Once your PR has been merged:

• git checkout master && git pull origin master
• Bump the version in the package.json
• npm publish
• git add . && git commit -m"bumped version <version>" && git push origin master

If you edited the docs:

• yarn docs:build

Usage

Example usage in React:

import React from 'react';
import '~/dist/fragments.css';

const App = () => (
  <div className="bgc-cosmos">
    <p className="color-white fsz-24 ta-center">
      Hello world, using <b>Fragments.js</b>
    </p>
  </div>
);

export default App;