Skip to content

chrislopresto/ember-freestyle

Folders and files

NameName
Last commit message
Last commit date

Latest commit

3ca8cf9 Β· Sep 28, 2023
Jul 4, 2023
Oct 31, 2021
Sep 28, 2023
Sep 28, 2023
Sep 21, 2022
Jul 18, 2023
May 20, 2016
Sep 28, 2023
Sep 14, 2022
Sep 28, 2023
Sep 28, 2023
Oct 11, 2022
Mar 23, 2021
Oct 10, 2021
Sep 22, 2020
Jul 4, 2022
Mar 3, 2022
Jul 13, 2023
Jul 4, 2022
Mar 7, 2022
Mar 3, 2022
Jul 13, 2023
Oct 9, 2021
Sep 30, 2021
Jan 21, 2016
Oct 6, 2019
Sep 28, 2023
Mar 3, 2022
Sep 22, 2022
Apr 3, 2020
Sep 21, 2022
Sep 14, 2022
Oct 31, 2021
Jul 4, 2023
Jan 21, 2021
Sep 28, 2023
Jan 21, 2021
Sep 21, 2022
Sep 28, 2023

Repository files navigation

Ember Freestyle

Build Status

NPM Version Download Count All Time Ember Observer Score

All Contributors

Ember Freestyle is an Ember addon that allows you to quickly create a component explorer for your Ember app.

Documentation

This README provides a lightweight overview of Ember Freestyle to get you going. More complete documentation can be found at https://chrislopresto.github.io/ember-freestyle.

Live Demo

To see Ember Freestyle in action, visit https://chrislopresto.github.io/ember-freestyle/#/acceptance.

Compatibility

  • Ember.js v3.24 or above
  • Ember CLI v3.24 or above
  • Node.js v14 or above
  • Ember Auto Import v2 or above

ember-freestyle includes Typescript types and provides addon/glint.ts for Glint usage

Installation

This installation process is opinionated in order to get you going quickly.

  1. ember install ember-freestyle

    This will do the following:

    • Install the ember-freestyle addon itself
    • Add a freestyle template in your app
    • Add a freestyle controller in your app
  2. Add this.route('freestyle'); to your app/router.js file

  3. Navigate to /freestyle. You should now see something like:

All of the generated output is optional. If you don't want a freestyle route, for example, feel free to get rid of it and add a freestyle-guide somewhere else in your app.

You can use the freestyle-guide component anywhere you'd like in your app. You can organize your components into multiple Freestyle guides if you want to. You can even use the constituent components like freestyle-usage on their own.

Problems? No problem.

Hopefully the installation instructions got you off to a smooth, seamless start. If you have any problems, feel free to chat with us in the Ember Community Discord or open an issue. As always, PRs are welcome!

Excluding Ember Freestyle's Styles

If you want to exclude Ember Freestyle's styles, you can set the includeStyles option to false in your ember-cli-build.js file:

// ember-cli-build.js

module.exports = function (defaults) {
  const app = new EmberApp(defaults, {
    'ember-freestyle': {
      includeStyles: false,
    },
  };
};

This might be useful in case you want to define your own styles or if you are using ember-cli-sass and want to import Ember Freestyle's styles explicitly:

$FreestyleGuide-color--primary: #C70039;
$FreestyleGuide-color--accent: #DAF7A6;

@import 'ember-freestyle';

Excluding Ember Freestyle from Your Production Build

We recommend excluding Ember Freestyle from production builds using Ember CLI's addons.exclude option.

// ember-cli-build.js

const environment = process.env.EMBER_ENV;
const addonsToExclude = environment === 'production' ? ['ember-freestyle'] : [];

module.exports = function (defaults) {
  const app = new EmberApp(defaults, {
    addons: {
      exclude: addonsToExclude,
    },
  };
};

Using Ember Freestyle Within an Addon

You should include ember-freestyle in your devDependencies so that apps using your addon will not include Ember Freestyle CSS and JavaScript in their production builds.

Contributing

See the Contributing guide for details.

Contributors ✨

Thanks goes to these wonderful people (emoji key):


Chris LoPresto

πŸ’» πŸ“– ⚠️

Luke Melia

πŸ’» πŸ“– ⚠️

Andrew Fan

πŸ’»

Chris van der Ploeg

πŸ’» πŸ“–

Ilya Radchenko

πŸ’» πŸ“–

Mike SzΓΆrnyi

πŸ’» πŸ“–

miguel barcos

⚠️

Nathan Ward

πŸ’» πŸ“–

zidjian257

πŸ’» ⚠️

Eli Dupuis

πŸ’»

Peter Wagenet

πŸ’»

Sivakumar Kailasam

πŸ’»

Manuel Wiedenmann

πŸ’»

Lucas Hill

πŸ’»

Alex Zlotnik

πŸ’»

Tamzin Blake

πŸ’»

Simon Ihmig

πŸ“–

Ryan Tablada

πŸ’»

Kerrick Long

πŸ’»

Hajdukovic Radovan

πŸ’» πŸ“–

Rob

πŸ’»

Gijs Boddeus

πŸ’»

Sarah Canieso

πŸ’»

Brian Runnells

πŸ’»

Dan Wenzel

πŸ’» ⚠️

Camille TJHOA

πŸ’» πŸ“–

Michael Swanson

⚠️

Sam Van Campenhout

πŸ“–

Chris Krycho

πŸ’»

Will Bagby

πŸ’» ⚠️

Noah

πŸ’»

Stanley Stuart

πŸ’»

Matt McManus

πŸ’»

Suzi Dao

πŸ’» ⚠️

Ray Tiley

πŸ’»

lucasmerat

πŸ’»

Kit

πŸ’»

Andrey Mikhaylov (lolmaus)

πŸ› πŸ’»

Bert De Block

πŸ’» πŸ€”

This project follows the all-contributors specification. Contributions of any kind are welcome!

License

This project is licensed under the MIT License.