Frontile

Overview

Frontile is an active development project that aims to provide the necessary components, helpers, modifiers, and styles for building consistent and powerful Ember.js apps. It follows best practices from the community and offers both low-level and high-level components for applications. The project is built with accessibility in mind, using TypeScript and Glimmer components. It also offers TailwindCSS plugins for styles, which can be customized to fit specific application needs.

Features

• Legos for Building: Frontile provides components, helpers, modifiers, and styles to build consistent and powerful Ember.js apps.
• Accessibility-focused: All components are built with accessibility in mind, ensuring inclusive user experiences.
• Modularity: Frontile is logically separated into multiple packages, allowing developers to choose and use only the necessary components.
• Written in TypeScript: The project is written in TypeScript, providing static typing and improved tooling support.
• Glimmer Components: All components in Frontile are Glimmer components, ensuring better performance and rendering speed.
• TailwindCSS Styles: Frontile offers styles through TailwindCSS plugins, allowing for easy customization and responsive design.
• Responsive Design: The styles provided by Frontile are fully responsive, ensuring optimal user experiences across devices.
• Documentation and Live Demos: Detailed documentation and live demos can be found at frontile.dev.

Installation

To use Frontile in your Ember.js application, follow these steps:

1. Install the necessary packages:

   npm install --save-dev @frontile/core @frontile/forms @frontile/changeset-form @frontile/notifications @frontile/overlays @frontile/buttons
   

2. Import the required components in your application code:

   import { Button, FormInput, ToastNotification, ModalDialog } from '@frontile/core';
   import { InputField, FormWrapper } from '@frontile/forms';
   // import other necessary components
   

3. Use the imported components in your application templates as needed:

   <Button @label="Submit" @onClick={{/*this.submitForm*/}} />
   <FormInput @placeholder="Enter your name" @value={{/*this.name*/}} @onChange={{/*this.updateName*/}} />
   <ToastNotification @message={{/*this.notificationMessage*/}} />
   <ModalDialog @title="Confirmation" @content="Are you sure you want to delete this item?" />
   <!-- use other imported components -->
   

4. Customize the styles as per your application needs. If you are using TailwindCSS, the Frontile styles can be easily customized using TailwindCSS plugins.

For more detailed information, refer to the Frontile documentation.

Summary

Frontile is an actively developed project that offers components, helpers, modifiers, and styles for building Ember.js applications. It is designed to promote consistency and best practices while providing accessibility-focused components. Frontile is modular, allowing developers to choose the necessary components and is written in TypeScript for better tooling support. The project provides TailwindCSS styles that can be easily customized, and comprehensive documentation is available for reference.