# <img src="https://github.com/pip-webui/pip-webui/raw/master/doc/Logo.png" alt="Pip.WebUI Logo" style="max-width:30%"> <br/> CSS styles
![](https://img.shields.io/badge/license-MIT-blue.svg)

Angular-Material library this framework is based on provides a pretty complete set of CSS styles that include typography and responsiveness. But, real applications would need more. 
In Pip.WebUI.CSS we collected generic CSS styles that we reused across many web applications. 

### Typography

CSS classes and mixins to set fonts, sizes, styles and other visual text attributes. 
<a href="https://github.com/pip-webui/pip-webui-css/raw/master/doc/images/img-fonts.png" style="border: 3px ridge #c8d2df; margin: auto; display: inline-block">
    <img src="https://github.com/pip-webui/pip-webui-css/raw/master/doc/images/img-fonts.png"/>
</a>

### Positions

CSS classes and mixins to position elements on web pages
<a href="https://github.com/pip-webui/pip-webui-css/raw/master/doc/images/img-alignment.png" style="border: 3px ridge #c8d2df; margin: auto; display: inline-block">
    <img src="https://github.com/pip-webui/pip-webui-css/raw/master/doc/images/img-alignment.png"/>
</a>

### Sizes

CSS classes and mixins to set width, height, paddings and margins for elements

<a href="https://github.com/pip-webui/pip-webui-css/raw/master/doc/images/img-size.png" style="border: 3px ridge #c8d2df; margin: auto; display: inline-block">
    <img src="https://github.com/pip-webui/pip-webui-css/raw/master/doc/images/img-size.png"/>
</a>

### Flexbox

CSS classes and mixins to extend flexbox layouts implemented by Angular Material.

### Colors

CSS classes and mixins to set colors from predefined pallettes or special color set.

<a href="https://github.com/pip-webui/pip-webui-css/raw/master/doc/images/img-colors.png" style="border: 3px ridge #c8d2df; margin: auto; display: inline-block">
    <img src="https://github.com/pip-webui/pip-webui-css/raw/master/doc/images/img-colors.png"/>
</a>

### Animations, transformations and other visual effects

CSS classes and mixins to specify animations and transformations. It also has CSS classes for dividers and opacity.

<a href="https://github.com/pip-webui/pip-webui-css/raw/master/doc/images/img-animation.png" style="border: 3px ridge #c8d2df; margin: auto; display: inline-block">
    <img src="https://github.com/pip-webui/pip-webui-css/raw/master/doc/images/img-animations.png"/>
</a>

### Control properties

CSS styles and mixins to change behavior of HTML controls. They allow to change scrolling, cursors and other control properties.

## Learn more about the module

- [User's guide](https://github.com/pip-webui/pip-webui-css/blob/master/doc/UsersGuide.md)
- [Online samples](http://webui.pipdevs.com/pip-webui-css/index.html)
- [Developer's guide](https://github.com/pip-webui/pip-webui-css/blob/master/doc/DevelopersGuide.md)
- [Changelog](https://github.com/pip-webui/pip-webui-css/blob/master/CHANGELOG.md)
- [Pip.WebUI project website](http://www.pipwebui.org)
- [Pip.WebUI project wiki](https://github.com/pip-webui/pip-webui/wiki)
- [Pip.WebUI discussion forum](https://groups.google.com/forum/#!forum/pip-webui)
- [Pip.WebUI team blog](https://pip-webui.blogspot.com/)

## <a name="dependencies"></a>Module dependencies

* [pip-webui-lib](https://github.com/pip-webui/pip-webui-lib): angular material CSS styles

## <a name="license"></a>License

This module is released under [MIT license](License) and totally free for commercial and non-commercial use.