Ember Nrg UI

screenshot of Ember Nrg UI
ember
scss

Opinionated UI addon based on how KUB scaffolds web applications

Overview

Ember NRG UI is a robust UI addon specifically designed to enhance the development of Ember.js applications. Built to accommodate the latest Ember and Node.js versions, it provides developers with a comprehensive skeleton for creating applications, allowing them to focus on solving business problems right out of the gate. The inclusion of essential components, routing, and theming tools makes it a valuable asset for anyone looking to streamline their development process.

What sets Ember NRG UI apart is its opinionated structure, which not only simplifies the setup but also encourages best practices in application development. With features like sidebar navigation and ready-to-use UI components, it ensures that you have a well-organized starting point for your projects.

Features

  • Application Shell: Comes with a pre-configured application shell that includes sidebar navigation, enabling immediate usability.
  • Sass Integration: Seamlessly converts the application to use Sass for styling, allowing for more sophisticated and manageable stylesheets.
  • 404 Not Found Route: Automatically adds a route for handling 404 errors, ensuring a complete user experience.
  • Configuration Modifications: Essential changes to the config/environment.js and ember-cli-build.js simplify project setup.
  • Dummy Application: Includes a fully functioning example app to demonstrate all components and provide a reference for developers.
  • Theming Capabilities: Offers a dedicated _nrg-override.scss file for easy customization of base colors and styles.
  • Environment Display: Customizable app bar to display environmental settings, with options to show or hide specific production environments.
ember
Ember

Ember.js is a productive, battle-tested JavaScript framework for building modern web applications. It includes everything you need to build rich UIs that work on any device.

scss
SCSS

SCSS is a preprocessor scripting language that extends the capabilities of CSS by adding features such as variables, nesting, and mixins. It allows developers to write more efficient and maintainable CSS code, and helps to streamline the development process by reducing repetition and increasing reusability.

eslint
Eslint

ESLint is a linter for JavaScript that analyzes code to detect and report on potential problems and errors, as well as enforce consistent code style and best practices, helping developers to write cleaner, more maintainable code.

webpack
Webpack

Webpack is a popular open-source module bundler for JavaScript applications that bundles and optimizes the code and its dependencies for production-ready deployment. It can also be used to transform other types of assets such as CSS, images, and fonts.