Coder Social home page Coder Social logo

burakcive / fractal Goto Github PK

View Code? Open in Web Editor NEW

This project forked from frctl/fractal

0.0 0.0 0.0 22.98 MB

A tool to help you build and document website component libraries and design systems.

Home Page: https://fractal.build

License: MIT License

Shell 0.02% JavaScript 90.09% Handlebars 0.23% SCSS 9.67%

fractal's Introduction

Fractal



Fractal is a tool to help you build and document website component libraries and design systems.

Read the full Fractal documentation

Introduction

Component (or pattern) libraries are a way of designing and building websites in a modular fashion, breaking up the UI into small, reusable chunks that can then later be assembled in a variety of ways to build anything from larger components right up to whole pages.

Fractal helps you assemble, preview and document website component libraries, or even scale up to document entire design systems for your organisation.

Check out the documentation for more information.

Requirements

You'll need a supported LTS version of Node. Fractal may work on unsupported versions, but there is no active support from Fractal and new features may not be backwards compatible with EOL versions of Node.

Getting started

Install into your project (recommended)

npm install @frctl/fractal --save-dev

Then create your fractal.config.js file in the project root, and configure using the official documentation.

Then you can either run npx fractal start to start up the project, or create an alias under the scripts section in your package.json as a shortcut.

e.g.

"scripts": {
    "fractal:start": "fractal start --sync",
    "fractal:build": "fractal build"
}

then

npm run fractal:start

Installing globally

npm i -g @frctl/fractal

This will also give you global access to the fractal command which you can use to scaffold a new Fractal project with fractal new.

The downside is that it's then difficult to use different Fractal versions on different projects.

This option is not recommended until a global Fractal install is capable of offloading to a project specific version.

Examples

  • Official demo (using Nunjucks): demo.fractal.build

    Repository: demo.fractal.build

  • Official examples are available in the examples directory. Although we primarily use them for developing and testing Fractal, they probably are a great resource for users as well.

  • Additional public examples can be found on the Awesome Fractal repo.

Contributing

Fractal has an active group of contributors but we are always looking for more help. If you are interested in contributing then please come and say hi on Fractal's Discord server.

Please note we have a code of conduct, please follow it in all your interactions with the project.

Reporting issues & requesting features

We use GitHub issues to track bugs and feature requests. Thank your for taking the time to submit your issue in one of our repositories.

If you rather have a question, please ask it on our Discord server.

Submitting pull requests

We will always welcome pull requests on any of the frctl organisation repositories. Please submit PRs against main branch with an explanation of your intention.

We use conventional commits, which means that every pull request title should conform to the standard.

Development

This repository is a monorepo managed by Lerna. There is only one lockfile in root. This means that all packages must be installed in root, manually added to the packages' package.json files and then bootstrapped with lerna.

To do some work, run the following commands in root:

  1. npm ci
  2. npm run bootstrap

Testing

Fractal is a project that evolved rapidly and organically from a proof-of-concept prototype into a more stable, mature tool. Because of this it's currently pretty far behind where it should be in terms of test coverage. Any contributions on this front would be most welcome!

Existing tests can be run using the npm test command.

Contributors ✨

Thanks goes to all wonderful people who have helped us out.

Contributions of any kind welcome!

License

MIT

fractal's People

Contributors

allmarkedup avatar dependabot[bot] avatar mihkeleidast avatar dkhuntrods avatar chapabu avatar lebenleben avatar paulrobertlloyd avatar snyk-bot avatar svenheden avatar arnoud-dv avatar rchavik avatar greenkeeper[bot] avatar levito avatar khawkins98 avatar mjomble avatar nchase avatar schleuse avatar scottmorris avatar tomdavies avatar justafish avatar mischah avatar 13twelve avatar pgrimaud avatar sebimoe avatar baerkins avatar vincevince1006 avatar ahebrank avatar douglasf avatar fvanderwielen avatar k-utsumi 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.