https://travis-ci.org/AnthonyMoulin/appear.svg?branch=master

appear-js

Introduction

A pop-up is a graphical user interface ( GUI ) display area, usually a small window, that suddenly appears ("pops up") in the foreground of the visual interface. Pop-ups can be initiated by a single or double mouse click or rollover (sometimes called a mouseover), and also possibly by voice command or can simply be timed to occur. A pop-up window must be smaller than the background window or interface; otherwise, it's a replacement interface.

What I have done is an example of a little "pop_up" solution which allows you to set different log levels with color, informing the user about the website activity.

this is my first task asked from my teacher to show my first steps in the JavaScript world.

Inspiration

This little popup uses the material design Responsive in pourcentage, pixels,em etc. Basically, it makes more liberal use of grid-based layouts, responsive animations and transitions, padding, and depth effects such as lighting and shadows.

For instance, this little popup "appear" is made through differents attributes called box-shadow, position, bottom, min-width, max-width, padding-left, text-align, background and background-color.

Unlike real paper, digital material can expand and reform intelligently. Material has physical surfaces and edges. Seams and shadows provide meaning about what you can touch. Material design can be used in API Level 21 (Android 5.0) and newer or via the v7 appcompat library, which is used on virtually all android devices manufactured after 2009. Material Design is gradually be extented throughout Google's array of web and mobile products, providing a consistent experience across all platforms and applications.

The canonical implementation of Material Design for web application user interfaces is called Polymer. It consists of the Polymer library, a shim that provides a Web Components API for browsers that do not implement the standard natively, and an elements catalog, including the paper elements collection that features visual elements of the Material Design.

Web pages should not leave out information to fit smaller devices, but rather adapt its content to fit any device.

The responsive design makes the web page looking good on all devices, using only HTML and CSS. It resizes, hides, shrinks, enlarges, or move the content to make it look good on any screen.

CSS3 transitions allows you to change property values smoothly (from one value to another) over a given duration.

As Appear does, to create a transition effect, we must have 2 things: the CSS property to add and effect to and the duration of the effect. If the duration part is not specified, the transition will have no effect, because the default value is 0.

This popup is a transposition of the PHP Psr-3 logger interface but for client side. the main goal here is to allow libraries to receive a Psr\Log\LoggerInterface object and write logs to it in a simple and universal way. Frameworks and CMSs that have custom needs may extend the interface for their own prupose. This ensures that the third-party libraries an application uses can write to the centralized application logs.

Example

Basic usage for this component.

appear->emergency("coucou");

Author

AnthonyMoulin

Licence

AnthonyMoulin Copyright (c) 2017 All rights reserved.