This package has been deprecated

Author message:

aweCSSome package is no longer maintained! Use @undercoatcss/framework istead.

awecssome

aweCSSome is a new breed CSS framework build on the edge of modern web standards.

---

CAUTION! IT'S UNDER HEAVY DEVELOPMENT CURRENTLY! DON'T USE IT IN PRODUCTION!

---

Contents

1. Description
2. Installation
3. Usage
4. Browser support
5. Key concepts
6. Contributing

Description

aweCSSome is ready to use out of the box because it's written on vanilla CSS and doesn't require building. The main advantages are:

• flexible and predictable architecture based on BEM methodology;
• no need in overriding the framework code because there's no default theme provided;
• SEO-friendly HTML markup enriched by microdata;
• mobile-friendly by virtue of following of Google recommendations and using web standards capabilities;
• WCAG 2.0 compliance HTML markup for developing inclusive web interfaces.

Installation

Be careful aweCSSome is constantly in development! Try it out on your own risk.

NPM

npm install awecssome

Usage

After installation, you can link or import the CSS file into your project:

HTML

<link rel="stylesheet" href="/path/to/awecssome/awecssome.css" />

CSS

@import '/path/to/awecssome/awecssome.css';

Via PostCSS and postcss-import

import 'awecssome';

Via webpack and css-loader

import 'awecssome';

CDN

Coming soon!

Browser support

aweCSSome is compatible with 2 recent desktop versions of:

• Chrome
• Edge
• Firefox
• Opera
• Safari

and 2 recent mobile versions of:

• Chrome
• Safari

We support only fresh browsers to keep our components' code clean and provide high performance.

The browserlist config is provided.

Key concepts

aweCSSome is based on the next main principles:

1. BEM methodology
2. No default theme
3. Provided component modifiers
4. Mobile friendly
5. SEO friendly
6. WCAG 2.0 compliance

BEM methodology

AweCSSome provides a set of common page components (breadcrumbs, cards, form elements etc.). Each component is logically and functionally independent block. Blocks allow for their re-use, as well as facilitating the project development and support process. Read more about blocks in official BEM documentation.

AweCSSome follows BEM naming convention with the classic naming scheme, where the name of an entity is unique. The same BEM entity always has the same name in all technologies (CSS, JavaScript, HTML etc.).

AweCSSome follows an alternative file structure approach to organizing the framework's file system. It's nested on the root level and flat on the component level.

Example

project
    common.blocks/
        input/                                # Directory for the input block 
            input_type_search.css             # CSS implementation of the input_type modifier 
            input__clear_visible.css          # CSS implementation of the input__clear_visible modifier 
            input__clear.css                  # CSS implementation of the input__clear element 
            input__clear.js                   # JavaScript implementation of the input__clear element 
            input.css                         # CSS implementation of the input block 
            input.js                          # JavaScript implementation of the input block 

No default theme

AweCSSome doesn't have a default theme for page components. Component's CSS code represents only their composition, not the appearance. So there's no need for a developer to override the framework code. Just write (extend) your own code (add new properties) next to the component's code following BEM's redefinition levels rules.

Example

project/
    common.blocks/       # redefinition level with framework's blocks 
        breadcrumbs/     # breadcrumbs block composition styles
    project.blocks/      # redefinition level with project blocks 
        breadcrumbs/     # breadcrumbs block project appereance styles

Just remember aweCSSome doesn't impose design decisions that you have to fight to undo!

All components have base variables (CSS Custom properties) for building typography and color schemes (not fully implemented yet).

Provided component modifiers

Each component has his own set of predefined modifiers. The modifiers represent specific instances of the component. Use them to change an instance without affecting surrounding blocks.

Example

.product-card               /* default instans of a component */
.product-card_landscape     /* landsape orientation instans of a component */

You can add any number of modifiers to a block. Besides you can add your custom modifiers by redefinition levels. As a result, rules from all redefinition levels should be compiled by your build script (or linked to the page manually in the right order) and applied to the component.

Mobile friendly

Following actual global trends, aweCSSome framework was built based on mobile first approach.

Each component provides best practices for dealing with content images on different screen resolutions and image formats.

Example

<picture>
    <source 
        src="product.webp"
        srcset="product.webp 350w, product.webp 650w" 
        sizes="(max-width: 600px) 300px, (min-width: 600px) 600px"
        alt="Product name">
    <img 
        rc="product.jpg"
        srcset="product.jpg 350w, product.jpg 650w" 
        sizes="(max-width: 600px) 300px, (min-width: 600px) 600px"
        alt="Product name">
</picture>

SEO friendly

HTML markup of all components was developed based on semantic of HTML5 tags. It gives a lot of benefits besides SEO. In addition to semantic markup aweCSSome components are enriched by structured metadata using microdata for common cases (product cards, reviews etc.).

These efforts lead to successful project indexing by search engines and enhance website "snippet" by making it "rich", or a short piece of quoted text shown when the page appears in search listings.

WCAG 2.0 compliance

SEO appropriate HTML markup semantics of aweCSSome components improves the accessibility of the user interface.

Accessibility of components is improved by following WAI-ARIA Authoring Practices 1.1. All of the components will be polished to be WCAG 2.0 compliant.

Contributing

If you're interested in the improvement of this project you can help in the following ways:

• bug reporting and new feature requesting by creating issues on plugin GitHub page;
• contribution to a project following these instructions.