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!
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.
Be careful aweCSSome is constantly in development! Try it out on your own risk.
npm install awecssome
After installation, you can link or import the CSS file into your project:
aweCSSome is compatible with 2 recent desktop versions of:
and 2 recent mobile versions of:
We support only fresh browsers to keep our components' code clean and provide high performance.
The browserlist config is provided.
aweCSSome is based on the next main principles:
- BEM methodology
- No default theme
- Provided component modifiers
- Mobile friendly
- SEO friendly
- WCAG 2.0 compliance
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.
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.
project/common.blocks/ # redefinition level with framework's blocksbreadcrumbs/ # breadcrumbs block composition stylesproject.blocks/ # redefinition level with project blocksbreadcrumbs/ # 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.
/* default instans of a component *//* 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.
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.
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.
If you're interested in the improvement of this project you can help in the following ways: