easy-framework

EASY CSS framework.

Usage no npm install needed!

<script type="module">
  import easyFramework from 'https://cdn.skypack.dev/easy-framework';
</script>

README

CircleCI branch Dependabot badge Dependency Status devDependency Status

npm downloads License codecov.io Conventional Commits

GitHub forks GitHub stars

EASY

Easy Angular Styles with a11Y

This project is a work in progress. Not all components are created or documented...yet.

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.

The framework works nicely with Angular. You can use components, directives, CSS classes, or any combination that fits your coding style.

Accessible

Most accessibility requirements are added automatically. Of course, it falls on the developer to ensure all code follows WCAG 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 only the components needed for a particular project. This is done through module imports.

Installation

NPM: npm i --save easy-framework

Usage

Import core styles into your app root module.

app.module.ts

import { EasyModule } from 'easy-framework';

Add the import to your app root NgModule.

app.module.ts

@NgModule({
    imports: [
        EasyModule
    ]
})

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

app.component.html

<ez-root>
    <router-outlet></router-outlet>
</ez-root>

Then, import specific module(s) where needed.

some.module.ts

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

Add the import(s) to your NgModule.

some.module.ts

@NgModule({
    imports: [
        ButtonModule,
        FlexboxModule
    ]
})

Or, import all component and/or layout module(s).

some.module.ts

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

Add the import(s) to your NgModule.

some.module.ts

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

Documentation

Read the Documentation.

Changlog

View the Changelog.

Contributing

  1. Review the Code of Conduct
  2. Review the Contributing guidelines
  3. Fork or clone the repo
  4. Run npm i
  5. Run npm start
  6. Open the projects/easy-framework/src/lib folder in your code editor
  7. Edit the code base
  8. Submit a pull request

Issues

Report an issue or a feature request.

License

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