Element – A Desktop UI Library

Element, a Vue 2.0 based component library for developers, designers and product managers

Element is a complete and minimal framework including many useful UI components to quickly build websites and apps. The toolkit is based on Vue.js and provides all the basic elements you may need when creating a complex product (grid system, forms, navigation, notices, dialogs and more).


Fontisto – An iconic font and CSS toolkit

Fontisto is a new iconic font curated and maintained by Kenan Gündoğan that includes more than 360 pictographic icons and a CSS toolkit for easily customising size, color, drop shadow and anything else via CSS.


  • It doesn’t require JavaScript
  • Icons are infinitely scalable and look sharp on HiDPI screens
  • The icon font has been built with accessibility in mind
  • Last but not lease, it’s free for commercial use

Font Awesome 5 Released !!!

Get vector icons and social logos on your website with Font Awesome, the web’s most popular icon set and toolkit.

Select2 – The jQuery replacement for select boxes

Select2 gives you a customizable select box with support for searching, tagging, remote data sets, infinite scrolling, and many other highly used options.
  • Fully extensible
  • Dynamic item creation
  • Full browser support

Responsive reCAPTCHA

The new reCAPTCHA is here. A significant number of your users can now attest they are human without having to solve a CAPTCHA. Instead with just a single click they’ll confirm they are not a robot. We’re calling it the No CAPTCHA reCAPTCHA experience.


// Resize reCAPTCHA to fit width of container
// Since it has a fixed width, we're scaling
// using CSS3 transforms
// ------------------------------------------
// captchaScale = containerWidth / elementWidth

function scaleCaptcha(elementWidth) {
  // Width of the reCAPTCHA element, in pixels
  var reCaptchaWidth = 304;
  // Get the containing element's width
	var containerWidth = $('.container').width();
  // Only scale the reCAPTCHA if it won't fit
  // inside the container
  if(reCaptchaWidth > containerWidth) {
    // Calculate the scale
    var captchaScale = containerWidth / reCaptchaWidth;
    // Apply the transformation

$(function() { 
  // Initialize scaling
  // Update scaling on window resize
  // Uses jQuery throttle plugin to limit strain on the browser
  $(window).resize( $.throttle( 100, scaleCaptcha ) );


.g-recaptcha {
  transform-origin: left top;
  -webkit-transform-origin: left top;

Differences Between Bootstrap 3 and 4

Bootstrap 4 brought some major changes, adding new components, scrapping others. Here's the difference between Bootstrap 3 and Bootstrap 4.
Component Bootstrap 3 Bootstrap 4
Source CSS Files LESS SCSS
Primary CSS Unit px rem
Media Queries Unit px px
Global Font Size 14px 16px
Default Fonts Helvetica Neue, Helvetica, Arial, sans-serif Uses a "native font stack" (user's system fonts), with a fallback to Helvetica Neue, Arial, and sans-serif
Grid Tiers 4 tier grid system (xs, sm, md, lg) 5 tier grid system (xs, sm, md, lg, xl).
Offsetting Columns Uses col-*-offset-* classes to offset columns. For example, col-md-offset-4. Uses offset-*-* classes to offset columns. For example, offset-md-4.
Inverse Tables Not supported. Added inverse tables with the .table-inverse class.
Table Head Styles Not supported. Added table head styles with the .thead-default and .thead-inverse classes.
Condensed Tables .table-condensed .table-sm
Contextual Classes Bootstrap 3 doesn't use the .table- prefix for its contextual classes. For example, Bootstrap 3 uses .active whereas Bootstrap 4 uses .table-active. Other than that, both versions use the same 5 contextual keywords (active, success, info, warning, danger). Added the .table- prefix for its contextual classes.
Responsive Tables The .table-responsive class must be added to a parent div element. Can add .table-responsive to the actual table element.
Reflow Tables Not supported. Added reflow tables with the .table-reflow class. Reflow tables have now been dropped.
Horizontal Forms Horizontal forms require the .form-horizontal class. Forms don't require .row when using grids (although this class is still a requirement on Bootstrap 3 grids in general). Bootstrap 4 dropped the .form-horizontal class — it is no longer needed to display horizontal forms. Forms require the .row class when using grids.
Use .control-label when using grids for form layout. Bootstrap 4 uses .col-form-label * when using grids for form layout. * Note that Bootstrap 4 initially used .form-control-label but subesquently changed this to .col-form-label.
Checkboxes and Radio Buttons Uses .radio, .radio-inline, .checkbox, or .checkbox-inline to display checkboxes and radio buttons. Uses .form-check, .form-check-label, .form-check-input, and .form-check-inline.
Form Control Size Use .input-lg and .input-sm to increase or decrease the size of an input control. Use .form-control-lg and .form-control-sm to increase or decrease the size of an input control.
Help Text Use the .help-block class to display help text. Bootstrap 4 uses the .form-text class to display help text. Bootstrap 4 forms don't have an official class for help text. Instead, the .text-muted class was introduced for more flexibility.
Validation and Feedback Icons Includes validation styles for error, warning, and success states on form controls (for example, .has-warning). To present icons on the input fields using Bootstrap 3, use glyphicons. Validation styles are not available for Bootstrap 4 forms. Use custom Bootstrap form validation messages instead.
Legends No classes for styling the form legends. Provides the option of using .col-form-legend on legend elements to style it more like a label.
Custom Forms Not supported. Bootstrap 4 introduced custom forms — completely custom form elements that replace the browser defaults.
Styles Includes the .btn-default and .btn-info classes. The .btn-secondary class isn't available in Bootstrap 3. Introduced the .btn-secondary, .btn-light, and .btn-dark classes. Dropped the .btn-default class. Note that the .btn-info class was initially dropped in Bootstrap 4 but then reappeared again.
Outline Buttons Not supported. Introduced the .btn-outline-* classes for styling buttons with an outline color. Introduced the .btn-*-outline classes for styling buttons with an outline color. (The .btn-*-outline classes became .btn-outline-* in Alpha 3).
Button Sizes The .btn-xs class is available. Dropped the .btn-xs class (only .btn-sm and .btn-lg are available now).
Responsive Images Use .img-responsive class. Use .img-fluid class.
Image Alignment Use .pull-right, .pull-left, and .center-block helper classes. Uses .m-x-auto instead of .center-block to align block-level images. Can also use the various .pull-*-right and .pull-*-left responsive helper classes, as well as the .text-*-left, .text-*-center, and .text-*-right helper classes on the image's parent. Can use the various .pull-*-none classes to disable floating.
Media Objects
Classes Includes many different classes for media objects, including .media, .media-body .media-object, .media-heading, .media-right, .media-left, and .media-list and .media-body. Uses just .media class. Margins can be applied using spacer utilities. Media objects are flexbox enabled in Bootstrap 4, so the various flexbox classes can also be applied (such as reordering, etc).
Structure Apply dropdowns to lists (i.e. using ul and li). Dropdowns can be built with ul or divs. Apply the .dropdown-item to a a or button element and wrap them all in a div (or ul) with a .dropdown-menu class applied.
Menu Headers Apply .dropdown-header to the li tag. Apply .dropdown-header to h1 - h2 tags (as Bootstrap no longer uses li tags to build dropdowns).
Dividers Apply the .divider class to the li element (because it used lists to build dropdowns). Apply the .dropdown-divider to the div element.
Disabled Menu Items Apply the .disabled class to the li element. Apply the .disabled class to the a element.
Button Groups
Justified? Supports justified button groups (via the .btn-group-justified class). Not supported.
Extra Small? Supports extra small button groups (via the .btn-group-xs class). Not supported (dropped the .btn-group-xs class).
Inline Navs There is no .nav-inline class. Can use the .nav-inline class to explicitly specify navs to be displayed inline.
Colors Limited (preset) color options. Supports inverse navbars but not the other classes. New (preset) color options. Introduced the .navbar-light and the .navbar-dark classes, and allows the .bg-* classes to be used on navbars.
Navbar Alignment Use .navbar-right, .navbar-left to align components within the navbar. Use the various .pull-*-right and .pull-*-left responsive helper classes. Can also use the various .pull-*-none classes to disable floating. Can either use spacing utilities such as .mr-auto, or any of the flexbox alignment utilities.
Navbar Forms Add the .navbar-form class to forms within navbars. Bootstrap 4 dropped the .navbar-form class. It's no longer necessary.
Fixed Navbars Uses .navbar-fixed-top and .navbar-fixed-bottom to fix navbars to the top or bottom. Uses .fixed-top and .fixed-bottom.
Default Pagination Only requires .pagination to be added (to the ul element that represents the list of pages). Must also add .page-item to each li element and .page-link to each a element.
Pagers Uses .previous and .next for aligning pagers. Pagers have been dropped in Bootstrap 4 (Alpha 3). Uses .pager-prev and .pager-next for aligning pagers.
Pill Labels The .label-pill class is not available. However, Bootstrap 3 does have badges (which achieves a similar visual effect). Labels have been replaced by badges in Bootstrap 4. Badges can use the .badge-pill for rounded corners.
Supported? No. "Tags" are called "Labels" in Bootstrap 3 (i.e. they use the .label class). Yes. The .tag class was introduced in Bootstrap 4 (Alpha 3) to replace the .label class. This was done to disambiguate from the label element. Tags have now been renamed to "badges". These replace labels from Bootstrap 3.
Full-Width The .jumbotron-fluid class is not required on full-width jumbotrons. Introduced the .jumbotron-fluid class for full-width jumbotrons.
Progress Bars
Uses progress? Doesn't use the progress for progress bars. Instead, applies progress bar classes to nested div elements. Uses the HTML5 progress element when working with progress bars. Using the progress element was abandoned in Alpha 6. Bootstrap 4 now uses the div element again.
Supported? Supported. Not supported.
Blockquotes Bootstrap styles are applied to the blockquote element by default. Introduced the .blockquote class for styling the blockquote element (i.e. styling this element is now opt-in).
Blockquote Alignment Use .blockquote-reverse to align a blockquote to the right. Use the text utilities to align blockquotes (.text-center and .text-right).
Page Headers The .page-header class is supported. The .page-header class is not supported.
Description Lists The .dl-horizontal class was used to declare a horizontal list. Horizontal lists are now declared with the .row class on the dl tag, then any of the grid system's predefined classes to the dt and dd tags.
Non-Responsive Usage
Supported? Supported. You can specify a layout to be non-responsive. Not supported.
List Groups
Linked List Items / Button List Items Apply .list-group-item to the a element. Apply .list-group-item-action to the a element.
Show content Uses .in to have content expanded upon page load. Uses .show to have content expanded upon page load.
Supported? Not supported. Introduced in Bootstrap 4. Cards replace functionality that was previously provided by panels, wells, and thumbnails.
Supported? Supported. Not supported. Use cards instead.
Supported? Supported. Not supported. Use cards instead.
Supported? Supported. Not supported. Use cards instead.
Classes Uses the .breadcrumb class against the ul tag. Also requires .breadcrumb-item to be applied against all li elements that make up the breadcrumb. Breadcrumbs can also be used outside of lists. For example, the .breadcrumb-item could be applied to a bunch of a elements that are wrapped in a .breadcrumb element.
Carousel Item Use .item class. Use .carousel-item class.
Supported? Yes. No.

Responsive Facebook Like Box

<!DOCTYPE html>
<script src="//" type="text/javascript"></script>

<div id="container" style="width:100%;">
<div class="fb-like-box" data-href="" data-width="292" data-show-faces="true" data-stream="true" data-header="true"></div>

<div id="fb-root"></div>
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); = id;
js.src = "// YOUR APP ID HERE";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
$(window).bind("load resize", function(){
var container_width = $('#container').width();
$('#container').html('<div class="fb-like-box" ' +
'data-href=""' +
' data-width="' + container_width + '" data-height="730" data-show-faces="false" ' +
'data-stream="true" data-header="true"></div>');
FB.XFBML.parse( );




Lazy Line Painter

A jQuery plugin for SVG path animation

Scalable Vector Graphics (SVG) is an XML-based vector image format for two-dimensional graphics with support for interactivity and animation. The SVG specification is an open standard developed by the World Wide Web Consortium (W3C) since 1999. SVG images and their behaviors are defined in XML text files.


18 web design trends for 2017

As we look forward to 2017 — a year that hopefully won’t be plagued by the passing of so many of the world’s greatest artists and performers — the big question on every designer’s mind has to be: what will define design in 2017?
So with that in mind, I decided to ask Webflow’s own designers what trends they think will dominate the world of digital design in 2017. (And wrote up a little commentary on their thoughts.) First, let’s hear from Webflow’s Chief Design Officer, Sergie Magdalin.
Sergie Magdalin, Chief Design Officer at Webflow
‍Sergie Magdalin, Chief Design Officer at Webflow

Layouts that let content shine

The arrangement of design elements within a given structure should allow the reader to easily focus on the message, without slowing down the speed of his reading

The last few years have seen a sea change in how people view design’s role in business. Design has shifted from a late-in-the-process “optimization” stage where designers swooped in to sprinkle on some “pretty” like mystical fairy dust to a real competitive advantage.

It’s been an amazing evolution to watch.

And a fascinating element of that evolution has been the shift back toward a focus on content: the meat on the bones of the web. Designers worldwide have realized that people visit websites for their content — whether it’s raging tweetstorms, thoughtful long-reads, or the latest “user-generated” meme — and that design’s ultimate role is to present content in an intuitive, efficient, and “delightful” way.

That’s one reason for the shift away from skeuomorphic design toward “flatter,” more minimalist design approaches, as seen in Google’s Material aesthetic, and really, across the web and our various devices.

Of course, as Newton’s third law states, for every action, there’s an equal and opposite reaction. Many designers feel that the flat design trend has taken the “soul” out of design. We expect to see this conversation continue across 2017, but look forward to it becoming a productive dialogue that never loses sight of the heart of our design work: the content.

Better collaboration between designers, and between designers and developers

As design has taken a greater and more influential role in shaping businesses, more and more attention has been paid to designers’ collaboration with both their fellow designers, and their developer colleagues.

The emphasis on designer collaboration has arisen in part from the massiveness of the web and mobile apps we’re building these days. Gigantic platforms like Google, Facebook, Twitter, and LinkedIn require not only huge design teams working on disparate aspects of the platform, but also better ways for designers to stay on the same page — and that means more collaboration, and better communication.

All kinds of tools have arisen to help facilitate that collaboration, from the shared templates and dashboards in Webflow’s Team plan to the real-time, shared canvas of Figma — and you can bet 2017 will bring both improvements to those platforms, and all-new options.

On the designer-developer collaboration front, lots of attention has been focused on the all-important handoff stage. Where designers used to hand off massive packages of static images and specs, they’re now sharing dynamic visualizations enabled by tools like InVision, Marvel, and UXPin — or doing one better by exporting real, production-ready code from Webflow.

Read Article

A Complete Guide to Flexbox

Flexbox, or the Flexible Box Layout, is a new layout mode in CSS3 designed for laying out complex applications and web pages.

In CSS 2.1, four layout modes were defined which determine the size and position of boxes based on their relationships with their sibling and ancestor boxes: the block layout designed for laying out documents, and that lays elements on a page vertically; the inline layout designed for laying out text horizontally inside block-level containers; the table layout designed for laying out two-dimensional data in a tabular format; and the positioned layout designed for very explicit positioning without much regard for other elements in the document.

Flexbox is similar to the block layout, except that it lacks many of the properties that can be used in a block layout, such as floats and columns. But then again it has more flexibility for distributing space and aligning content in ways that web applications and complex web pages often need. It solves many other layout problems that we have been fighting against and trying to solve for a very long time—such as vertical centering, for example, among many others.

Flexbox allows you to lay out elements in a container, arrange and (re)order them, align them, and distribute the space between (and/or around) them, regardless of their size. It allows you to make them literally flexible—items inside a container can be stretched and shrunk to accommodate the available space, and can be sized in proportionally to each other, and any available space between or around them can be distributed among them based on a proportion that you get to specify.

Using flexbox, you can also lay elements out inside a container in either directions: horizontal or vertical, called the flex directions; you’re not bound to just one direction as in other layout modes. This allows for the creation of more adaptive and responsive layouts that adapt to the layout changes on different screen sizes and orientations.

Summary of Flexbox Properties

  • flex-direction
  • flex-wrap
  • flex-flow
  • justify-content
  • align-items
  • align-content
  • order
  • align-self
  • flex-grow
  • flex-shrink
  • flex-basis
  • flex

Creating a Flexible Layout: The Flex Container and Items

The first step to start using Flexbox is to create a flex container. Children of a flex container are called the flex items, and are laid out inside the flex container using the Flexbox properties. Some of the Flexbox properties apply to the container, others are applied to the flex items.

A flex container is created by setting the display property of an element to either flex or inline-flex.

.flex-container {
    display: flex;
/* or */
.flex-container {
    display: inline-flex;

display: flex creates a block-level flex container; display: inline-flex creates an inline-level flex container. The flex container becomes a flex context for its direct descendants.

Children of a flex container, the flex items, are laid out using the Flexbox layout. Any element outside a flex container is not affected by the Flexbox layout defined on it, and will be rendered as it normally would in the page.

More Info