HyperMedia
A simple Angular 2 template
Mission
Hello. My name is Alex Polymath and I'm creator of HyperMedia. When I started this project I wanted to make smth extremely simple and flashy the same time. And I guess I got close to it. It took me few weeks to find really interesting design concepts. And I came to interesting solutions like "Grain" gradient effect, SVG brush paintings and pure CSS Grids.
Which leads to a single purpose - attempt to predict how the web-design will look like in the nearest future.

Login
Dashboard
Organisms
Smart table
Particles
Bootstrap4
HyperMedia uses bootstrap 4 framework to manage UI. It takes all the advantages of flex-box to simplify elements layout.
Inline SVG
This little feature gives us ability to modify SVG icons right inside CSS files, which is pretty handy.
Grain effects
It's very rare to find plain colors in real world. Mostly it has some gradients, dispositions. So I decided to implement those imperfections in the interface to make it more palpable.
SVG icon set
Inside of a template I used InlineSVG to make icons fully scalable and easily manage it's properties.
CSS Grid
It's a new CSS standard supported only by the latest browsers. And it's extremely powerful tool to design web-page layout.
Flexible charts
HyperMedia uses one of the best charts frameworks - Chartist.js. I guess the main feature, that we can easily customize it and apply awesome SVG filters to any element of a chart. Whether it's labels, lines, area, etc.
The Grid
It's worth to make a separate note about grid system. Because it's basically the founding of a whole work. Template uses CSS Grid which is a new standard and supported only by the latest browsers. It gives us ability to manipulate the layout any way we want. So to make smth beautiful you don't need to mess with the flex-box or massive amount of CSS properties. To make it even easier. I design 2 Angular components which handles it. It's called Grid and Gridarea. Just specify layout configuration as a parameters and put all your content inside of them.
Check out following images, which are the best explanation.
HyperMedia
A simple Angular 2 template
Contact:
Telegram: +7 962 913 48 67
E-mail: hey@alex-polymath.com