EASY

Easy Angular Styles with a11Y

Overview

EASY is a CSS framework developed on 4 core principles:

• Flexible
• Accessible
• Responsive
• Lightweight

Flexible

Limited CSS selector specificity allows developers to easily override classes. Other than resets, HTML tags remain mostly untouched. This allows for additive development by adding color, spacing, and other CSS classes as needed.

All components look and behave the same in all evergreen browsers (Chrome, Edge Chromium, Firefox, and Safari).

The framework works nicely with Angular. You can use simple CSS classes to render content in different ways.

Accessible

Most accessibility requirements are added automatically. Of course, it falls on the developer to ensure all code follows WCAG 2.1 guidelines.

Responsive

EASY was created with mobile first in mind. There are many layout options and they all look great on any device.

Lightweight

Developers can use all components or only the components needed for a particular project. This is done through module imports.

Installation

NPM: npm i easy-framework

Angular CLI: ng add easy-framework

Usage

Import specific module(s) and core styles (utilities) of Easy into a shared module.

shared.module.ts

import { ButtonModule, EasyModule, FlexboxModule } from 'easy-framework';

Add the exports to your shared module's NgModule.

shared.module.ts

@NgModule({
    exports: {
        ButtonModule,
        EasyModule,
        FlexboxModule
    }
})

Or, import all components and/or layout module(s) along with core styles (utilities) of Easy into a shared module.

shared.module.ts

import { ComponentsModule, EasyModule, LayoutModule } from 'easy-framework';

Add the exports(s) to your shared module's NgModule.

shared.module.ts

@NgModule({
    exports: [
        ComponentsModule,
        EasyModule,
        LayoutModule
    ]
})

Import the shared module into your app module.

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { SharedModule } from './shared/shared.module';

Add the import to your app module's NgModule.

app.module.ts

@NgModule({
    imports: [
        AppRoutingModule,
        BrowserModule,
        SharedModule        
    ]
})

Add the <ez-root> tag to your app component's HTML.

app.component.html

<ez-root>
    <app-header />
    <app-nav />
    <main>
        <router-outlet />
    </main>
    <app-footer />
</ez-root>

Documentation

Read the Documentation.

Changlog

View the Changelog.

Contributing

1. Review the Code of Conduct
2. Review the Contributing guidelines
3. Fork the repo
4. Run npm i
5. Open two terminal windows
6. Run npm run watch:easy in the first and ng serve in the second
7. Open the projects/easy-framework/src/lib folder in your code editor
8. Edit the code base
9. Update the documentatation in projects/easy-docs/src/app folder as needed
10. Submit a pull request

Issues

Report an issue or a feature request.

License

Copyright (c) 2021, Paul Chehak. (MIT License).