Numerous Problems Multiplied

    This package has been deprecated

    Author message:

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

    awecssome

    0.8.1 • Public • Published
    aweCSSome logo

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

    Travis (.org) GitHub release npm npm Twitter Follow WCAG 2.0 Level AA schema.org


    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.

    Install

    npm i awecssome

    DownloadsWeekly Downloads

    47

    Version

    0.8.1

    License

    GPL-3.0

    Unpacked Size

    85.2 kB

    Total Files

    22

    Last publish

    Collaborators

    • lautsevich