Thursday Roundup # 30
Responsive Grid System For Mounted And Fluid Layouts: Profound Grid
A responsive grid system for mounted and fluid layouts. In-built SCSS, it provides you flexibility and full management. Profound Grid makes use of adverse margins to calculate columns. Not like with different grid methods, fluid layouts will look precisely the identical in each browser. Click here to read more about Profound Grid
This tutorial reveals the best way to create a easy merchandise slider with CSS animations and jQuery. The thought was impressed by the Apple product slider the place a number of little gadgets fly in with a bouncing animation. This tutorial interprets this idea to a modern-looking various for a minimal on-line retailer design the place the gadgets signify completely different classes. Classes as use-case match fairly effectively due to the restricted nature of such a slider. For extra gadgets to be proven, that is definitely a far-from-optimal answer. If the quantity of things is proscribed this would possibly give an fascinating little contact to the expertise.
Charts are an incredible visible support when presenting knowledge. You may’t construct an expert admin panel with out them. They’re additionally difficult to arrange. Nonetheless, there’s a new library that makes issues simpler – xCharts. This tutorial makes use of it together with the daterange picker for Twitter Bootstrap, to construct a reasonably, AJAX-powered chart to your internet utility that fetches knowledge from a MySQL desk.
A jQuery plugin for itemizing social accounts and sharing on social media with some good overlay choices.
A straightforward jQuery plugin for Instagram API to fetch and show consumer, standard or tags picture feeds inside your internet utility or web site. It provides to get the latest media revealed by a consumer, the most well-liked media in the meanwhile, or lately tagged media from Instagram API. It could show the outcomes on checklist gadgets or every other HTML tag you outline. It additionally has choice to outline the dimensions of the photographs (small, medium, huge).
Regexper is an excellent regex visualization instrument that may aid you understanding any common expression you’re working with.
CSS3 transitions carry easy and chic animations to internet purposes, however there’s much more to the spec than first meets the attention.
This submit goes to delve into among the extra sophisticated elements of CSS transitions, from chaining and occasions to acceleration and animation features.
Letting the browser management animations sequences permits it to optimize efficiency and effectivity by altering the body charge, minimizing paints and offloading among the work to the GPU.