Tag Archiv: Tutorial
Playing video games often involves solving tricky problems with logical thinking and trial-and-error strategies. Can you think of something else that requires these skills? That’s right – programming!
In this article we’ve prepared for you 10 browser games for web developers and coders, that you can use to learn more about JavaScript, CSS and HTML, or as a proving ground for your webmaster skills. Some of the games are easy, others extremely difficult, but they are all fun!
Although Code Combat is made for children in school, the game can still be enjoyed by adults of all ages. In it you programatically control the actions of a brave hero going through hundreds of dungeons, fighting enemies and collecting gems. Beating the whole game takes about 20+ hours and covers most programming concepts.
In this version of the classic arcade game the world is attacked by a trio of aliens, each sporting a different color. To save humanity, the player must quickly translate a RGB hex value into human colors and shoot down the invaders.
Puzzle game where you have to help a group of colorful frogs get to their lillypads of choice. Moving the amphibians around is done with flexbox and will truly test you layout building skills. The in-game hints will tell you which CSS properties to use in each situation, but it’s up to the player to decide what combination of values to set.
Pixactly has a very simple, yet challenging concept. The game gives you two random pixel values, one for the width and one for the height of a rectangle. The player then has to draw a box that is as close as possible to the given dimensions.
A great game for learning CSS selectors. The player is given a table of dishes in animated and HTML form, and a certain item or items to select from the table. The different levels cover everything a web developer should know about selectors, from the very basics to ~ and :first-child.
You can think of this game as your digital ant farm where every “ant” is programmed by the player. After setting up a colony and the behavior of your creeps, they will go about their business of exploring the endless game world, collecting resources and fighting enemies even while you are offline.
A huge collection of games that can all be played in JavaScript, PHP, Ruby, Go, Python, and many other programming languages. The platform includes various puzzle, multiplayer and AI based games, while the code is written in an advanced IDE with Emacs and Vim support.
Classic tower defense game with a CSS twist – all the turrets and traps in the game are positioned using the flexible box layout. There are 12 levels with waves of enemies trying to reach your base. To complete them all you will have to apply your entire knowledge of flexbox properties.
Elevator Saga is a puzzle game in which you use JavaScript to control the elevators in a building. Hordes of people are going up and down all the time and you have to try and get them to their destinations as quickly as possible. The game tests your algorithm writing abilities as well as your knowledge of JS functions, arrays and event handlers.
Untrusted is a meta-JavaScript adventure game where you play the role of Dr. Eval, an @ sign that can control the world around him by changing the source code. The player is presented with the functions that initialize every level and has to alter them using the game API to create and escape route for Dr. Eval.
A talent tree with CSS, HTML and JavaScript magic instead of fire and ice. Add points in the skill you already know and see how close you are to becoming a true Web Development Master. Submit talent tree as CV for job applications at your own risk.
Our mission at Tutorialzine is to keep you up to date with the latest and coolest trends in web development. That’s why every month we release a collection of some of the best resources that we’ve stumbled upon and deemed worthy of your attention. This May our list includes JS libraries for better scrolling, jQuery plugins for creating modals, a web boilerplate from Google, and much more!
Pure CSS library for adding tooltips to HTML elements. Hint is very compact in size, while still managing to offer lots of options for customization such as different sizes, colors and animations. It doesn’t require any coding, tooltips are created and styled by just adding the right data attributes.
With Turntable.js you can effortlessly create cool rotating demos for 3D objects by placing a large array of images into a on-hover slider. This enables users to quickly go through the whole set of pictures, creating a flipbook effect and showcasing a product from all sides.
Magic is an animation library made entirely out of vanilla CSS. This makes it extremely lightweight and easy to use, as well as buttery smooth. All animations are triggered through adding or removing classes, and can be customized by simply overwriting the default CSS rules.
Sausage is a jQuery tool that follows the scrollbar and keeps track of which section in a page we are reading. This plugin can be of great help when designing a big documentation hub or an infinite scrolling website, since a vertical pagination will keep things way more organized.
The new word I learned today is odometer – that’s what the mileage gauge in a car is called. This JavaScript library with the same name recreates that gadget and can be used to add vertical transitions between numbers. It’s lightweight, easy to implement, and sports a number of great looking themes such as slot machine and train station.
These days we see more and more websites use the full screen slide effect, where one touch of the scroll wheel changes the entire page. Unless you are extremely DIY oriented, this library is the perfect tool for implementing such functionality – it’s elementary to use, has detailed docs, and offers great browser support.
Awesome library for creating eye-catching animated charts. For better performance, Chart.js relies on canvas elements to draw all the graphs, but doesn’t require of you to know anything about canvas to work with it. All the customization options (and there are a ton of them) are controlled through a simple JavaScript API.
JavaScript library for building Pinterest-like cascading grids. Working with Bricklayer isn’t complicated at all and in no time you will have a robust, repsonsive layout. It also has no external dependencies, which makes it really easy to integrate with Angular, React, or any other big framework.
Flatmarket is an open-source project that provides one of the cheapest and easiest to operate platforms for e-commerce. It consist of a static website for the customers and a Node.js server that handles all the payments. A CLI tool is available that makes setting up a store from scratch much simpler.
Modaal is a jQuery plugin for creating modal popup windows that has accessibility as it’s top priority. It provides many features that make sure the end product is available to everybody, easily readable and optimized for screen readers. Some of the good practices used in Modaal are adding keyboard controls, including ARIA attributes and maintaining proper focus.
Web Starter Kit is a collection of tools that will help developers quickly set up their projects. It’s designed by Google and focuses on providing a boilerplate that works equally well across different devices and browsers. Some of the libraries included in this kit are MDL, Sass, Babel, and gulp for task automation.
This is a button that transforms into a dialog. The cool thing about it is the transition, which varies depending on which part of the button the user clicked. Flipside isn’t a proper library but we enjoyed it a lot so we decided to share it anyway. If you want to use it, the source code is available on GitHub.
Responsify is a jQuery plugin that guarantees an image remains responsive and showing the right content. This is done by adding an attribute to ![]()
<img> tags, where a focus area is defined. If the image has to be resized, Responsify will try and keep the focus area visible, and hide parts of the image that are less important.
Select boxes are still astronomically annoying to style across all browsers. Thankfully, there are plugins like Select2 which deal with that issue and offer painless embellishment of the select element and it’s options. This library also has useful extra features such as searching, infinite scrolling and IE8 support.
A tiny jQuery plugin for creating dialog pop-ups with a neat fake-3D animation effect. This library is only 2kb minified and gzipped so it practicly costs nothing to include in a project. It has a couple of available themes, and you can add your own customizations fairly easily as well.
Flexbox is a CSS standard optimized for designing user interfaces. Using the various flexbox properties we can construct our page out of small building blocks, which then are effortlessly positioned and resized any way we want. Websites and apps made this way are responsive and adapt well to all screen sizes.
In this article we’re going to take a look at five flexbox approaches to solving common CSS layout problems. We’ve also included practical examples to showcase real life scenarios in which these techniques are applied.
1. Creating Equal Height Columns
This may not seem like a difficult task at first, but making columns that have the same height can be really annoying. Simply setting min-height won’t work, because once the amount of content in the columns starts to differ, some of them will grow and others will remain shorter.
Fixing this issue using flexbox couldn’t be easier, as columns created this way have equal heights by default. All we have to do is initialize the flex model, then make sure the flex-direction and align-items properties have their default values.
.container {
/* Initialize the flex model */
display: flex;
/* These are the default values but you can set them anyway */
flex-direction: row; /* Items inside the container will be positioned horizontally */
align-items: stretch; /* Items inside the container will take up it's entire height */
}
<div class="container">
<!-- Equal height columns -->
<div>...</div>
<div>...</div>
<div>...</div>
</div>
To see a demo of this technique, you can head out to our Easiest Way To Create Equal Height Sidebars article, in which we create a responsive page with a sidebar and main content section.
Equal Height Sidebar with Flexbox
2. Reordering Elements
A while ago, if we had to dynamically change the order of some elements, we would probably try some CSS hack, quit in frustration, and go do it with JavaScript. With flexbox however, this task comes down to applying a single CSS property.
It’s called order and just like its name everything about it as straightforward as possible. It allows us to swap any number of flex items and change the sequence in which they appear on the screen. It’s only parameter is an integer determining the position of that element – lower numbers mean bigger priority.
.container{
display: flex;
}
/* Reverse the order of elements */
.blue{
order: 3;
}
.red{
order: 2;
}
.green{
order: 1;
}
<div class="container">
<!-- These items will appear in reverse order -->
<div class="blue">...</div>
<div class="red">...</div>
<div class="green">...</div>
</div>
The order property has many practical uses. If you want to see some of them, you can check out this article, where we use it to build a responsive comment section.
Responsive Comment Section With Flexbox
3. Horizontal And Vertical Centering
Vertical centering in CSS is one of those problems that makes us ask ourselves: How is such a trivial thing still so complicated to do? And it really is. If you google vertical centering CSS, an infinite amount of different techniques will pop up, and most of them will involve tables or transforms – things that aren’t designed for making layouts.
Flexbox offers an easier solution to the problem. Every flex layout has two directions (X axis and Y axis) and two separate properties for their alignment. By centering both we can position any element right in the middle of its parent container.
.container{
display: flex;
/* Center according to the main axis */
justify-content: center;
/* Center according to the secondary axis */
align-items: center;
}
<div class="container">
<!-- Any element placed here will be centered
both horizonally and vertically -->
<div>...</div>
</div>
To see this tecnhique in action and read more about it, you can go to our quick-tip article on the same topic.
Horizontal And Vertical Centering With Flexbox
4. Creating Fully Responsive Grids
Most developers rely on a CSS frameworks when creating responsive grids. Bootstrap is the most popular one but there are hundreds of libraries that can help you with this task. They usually work well and have tons of options, but tend to be quite heavy. If you are a DIY person or don’t want to implement a whole framework just for the grid, flexbox has you covered!
A row in the flexbox grid is simply a container with display:flex. The horizontal columns inside it can be any amount of elements, setting the size of which is done via flex. The flex model adapts to the viewport size, so this setup should look fine on all devices. However, if we decide there isn’t enough space horizontally on the screen, we can easily turn the layout into a vertical one with a media-query.
.container{
display: flex;
}
/* Classes for each column size. */
.col-1{
flex: 1;
}
.col-2{
flex: 2;
}
@media (max-width: 800px){
.container{
/* Turn the horizontal layout into a vertical one. */
flex-direction: column;
}
}
<div class="container">
<!-- This column will be 25% wide -->
<div class="col-1">...</div>
<!-- This column will be 50% wide -->
<div class="col-2">...</div>
<!-- This column will be 25% wide -->
<div class="col-1">...</div>
</div>
You can check out a variation of this technique in our The Easiest Way To Make Responsive Headers Quick Tip.
Responsive Header With Flexbox
5. Creating The Perfect Sticky Footer
Flexbox has an easy solution to that problem as well. When building pages that include a sticky footer, by doing the whole thing in flex elements we can be sure that our footer will always stay at the bottom of the page.
Applying display: flex to the body tag allows us to construct our entire page layout using flex mode properties. Once that’s done the main content of the website can be one flex item and the footer another, which makes it really easy to manipulate their positioning and place them exactly where we want.
html{
height: 100%;
}
body{
display: flex;
flex-direction: column;
height: 100%;
}
.main{
/* The main section will take up all the available free space
on the page that is not taken up by the footer. */
flex: 1 0 auto;
}
footer{
/* The footer will take up as much vertical space as it needs and not a pixel more. */
flex: 0 0 auto;
}
<body>
<!-- All the page content goes here -->
<div class="main">...</div>
<!-- Our sticky foooter -->
<footer>...</footer>
</body>
You can find more information about this technique in our article The Best Way To Make Sticky Footers.
Sticky Footers With Flexbox
Conclusion
All mainstream browsers (except IE 9) now support the flex layout mode, so unless you have a user base that prefers retro Microsoft browsers, it’s safe to say that flexbox is production ready. If you haven’t used it by now, we highly recommend that you try it!
We hope you found our CSS tips useful and that they will help you build better and more robust responsive layouts. Enjoy!
In this post we are going to talk about two CSS properties that not a lot of web developers know about. They are called object-fit and object-position and both have to do with styling images and video.
First, we’ll show you how to use them and go into detail covering all the important specs. After that, we’ve prepared for you a tiny demo app, in which you can play around with the properties and see them in action. Let’s begin!
Object-fit
With object-fit we can address how an image (or video) stretches or squeezes itself to fill it’s content box. This is needed when a photo we have has a different size or aspect ratio from the place we’ve designated for it in a layout.
Traditionally, to solve this problem one would create a div and set background-image and background-size. Modern CSS, however, allows us to simply add an image tag, set it’s source as usual, and then apply object-fit directly to the image selector:
img {
width: 100%;
object-fit: cover;
}
The possible values it receives are:
- fill (default) – The width and height of the image match those of the box. Most of the times this will mess up the aspect ratio.
- cover – The image keeps its aspect ratio and fills the whole box, parts of it are cropped and won’t be shown.
- contain – The image keeps it aspect ratio and enlarges/shrinks to fit inside the box.
- none – Original size and aspect ratio.
- scale-down – Displays like one of the above, depending on which produces the smallest sized image.
Object-position
This property defines where inside the container the image will be positioned. It takes two numerical values, one for the top-bottom axis and another for the left-right axis. These numbers can be in percentages, pixels or other measuring units, and can be negative. Some keywords such as center, top, right, etc. can be used as well.
By default an image is positioned in the center of a container, so the default value is:
img {
object-position: center;
/* which equals */
object-position: 50% 50%;
}
Playground Demo
Reading about CSS properties is one thing, testing them out for yourself is a whole different story. Below is a demo page which will help you get the hang of object-fit and object-position in no time. In it you can test the properties and give them different values to see how they can transform a media object. Don’t be afraid to open up DevTools as well.
Browser Support
Following the tradition of all cool CSS features, the browser support for object-fit and object-position is rather inconsistent and in this case it’s IE and Edge that offer no support at all. While waiting for all Microsoft browsers to adopt the two properties you can use this polyfill which fixes the issue nicely. Also, it’s always a good idea to set a background color to all image containers as a fallback.
Conclusion
The object-fit and object-position properties can be of great help when building responsive web pages. They are easy to use and remember, and do their job perfectly. We are sure that once IE and Edge adopt them, they will quickly become a part of every web developer’s CSS toolbox.
Thanks for reading!
In this post we bring you our monthly collection of web dev libraries, frameworks and plugins that we’ve recently come across. Each one of them is handpicked and we’ve tried our best to select tools that are useful, reliable, and built with the latest trends in mind. Enjoy!
An official Microsoft open-source project, this is a framework for building web apps that follow the look and feel of desktop MS Office programs. It works in a similar fashion to Bootstrap: HTML and CSS components, a responsive grid, and a lot of jQuery add-ons.
This library allows developers to add unique peel-off stickers to their web projects. Any element on the page can be transformed into a sticker and when somebody hovers on it a realistic animation is applied. This library has no external dependencies – only vanilla JavaScript and smooth CSS3 animations are used.
Cash is a lightweight alternative to jQuery. It provides the same syntax and many of the popular jQuery methods and features, rewritten using modern JavaScript, resulting in a library only 8kb in size (compared to the 32kb of jQuery). If you don’t need to support old IE and think jQuery has become too big through the years, give Cash a try.
Popper is a JavaScript library for adding tooltips and popovers to HTML elements. It offers a ton of customization options and is fully modular with separate plugins for every feature. Popper is fairly complicated compared to other tooltip libraries, while still being very easy to use and small in size.
A Material Design themed date and time picker built on top of jQuery and Momentjs. To use it you just have to bind it to an input field, set the options you need, and decide if you want a date picker, time picker or both. When a user clicks on the input, a modern looking dialog will pop up containing an Android inspired calendar or clock.
A free UI kit that combines the familiar syntax of Bootstrap with the modern looks of Google’s Material Design. There are other similar projects such as Material Design for Bootstrap and Bootswatch Paper Theme, but Material Kit, being the newest, has learned from the older frameworks and offers a polished product with neat styles and lots of components.
Skeleton is a responsive CSS library that will turn a bland HTML project into a stylish one with practically zero effort. Unlike Bootstrap and other UI frameworks where you have to add a ton of classes to the HTML, Skeleton requires just a handful of classes and automatically styles everything else. The library is extremely lightweight, featuring just a simple 12 column grid and the most basic components.
As most web developers know, the default HTML checkboxes and radio buttons look horrible and are a huge pain to customize correctly across all browsers. That’s why there are countless libraries that help you do this, and iCheck is probably the coolest of them all. It offers several unique themes, is heavily customizable, and even has IE6+ and mobile browser support.
Stylefmt is a PostCSS module that automatically formats CSS and SCSS stylesheets. You can write your own format rules or use the standard ones to make the CSS of your project look the same, no matter who wrote it. Stylefmt is available everywhere – as a CLI, a node.js module, and as a plugin for popular text editors or task runners.
Turn any text on your web page into a twitter share button. Just add a span with the right attributes and InlineTweet will automatically turn the selected text into a link. When someone clicks on it, it will generate a tweet, including hashtags and a URL going back to your page.
SmoothState is a brave project that turns your ordinary web sites into single page apps. The way this works is it prevents links from opening new pages and instead injects them into the current one using AJAX, while manipulating the browser history and URLs, as if the page has changed. Add a cool loading animation while the AJAX request finishes and you’ve got yourself a SPA.
In just 700 bytes gzipped, nanobars enables web developers to quickly create fully functional progress bars. The library has a very tiny pool of methods and options but gives you exactly what you need – a function to initialize a new bar, and another one to change it’s progress.
This is a jQuery plugin that allows deveopers to add a blur filter to images. Usually this can be done using the CSS filter property, but the browser support for it is still pretty bad. By using this plugin you can make sure that the blur effect will work equally well in all mainstream browsers.
With TypeIt you can create animation effects that will display a string as if it is being typed out. The library offers all the features you might think of such as looping animations, controlling the typing speed, replacing a string with a new one, and others.
CSS animations are way more memory efficient than their JavaScript counterparts, but can still slow down a web page if they are not done correctly. Applying transition effects to the width, height, top or left of an element causes a redraw of the DOM and occupies the GPU. Instead, the transform property should be applied and the guys behind Repaintless have used this to create the most buttery-smooth animation library possible.
In this installment of our freebie series, we’ve prepared for you a collection of 6 templates for pagination menus and tab controls. We’ve built them without relying on any frameworks, so adding your own content or customization is as easy as editing a bit of HTML and CSS.
Pagination
For paginations we’ve come up with two designs – one standard with page numbers and next/prev buttons, and the other with next/prev buttons and a dropdown. Both of them are simple and clean, so they should look great in almost any layout.
Basic Pagination Template
Tabs
Here we give you the option to choose between four different designs. We know that creating working tabs from scratch can be a bit tedious, so we’ve also included a short jQuery snippet in them to enable switching between the tab pages.
Underlined Tabs Template
How to use
To use any of the templates from the demo, follow these steps:
- Grab the zip archive from the Download button near the top of the page and extract it.
- Open the .html file for the template you want, copy the code inside the
<body> and paste it in your project.
- The styles are located in separate CSS files for each design. You can find them in the /assets/css folder. We’ve made sure our CSS is self contained and won’t break anything in your own styles.
- Replace our placeholder content with your own and add more buttons/tabs if you need to.
Free for Commercial Use
All of the templates are completely free and can be used in both personal and commercial projects. Don’t worry, you don’t have to include any form of attribution either! Enjoy :)
While developing web layouts, at some point you’ve probably run into this issue:
This obviously broken layout happens when a footer is positioned statically at the end of the body, but the page doesn’t have much content. There is nothing to push the footer down enough and it stays in the middle of screen, leaving a huge area of whitespace below it.
In this quick tutorial we’re going to take a look at a modern technique for building footers that are guaranteed to stick to the bottom of the page at all times.
The Technique
To prevent the above from happening we will be building our page using flexbox, the most advanced tool CSS3 has to offer for building adaptive layouts. For those of you not familiar with the flexbox model and its properties, we will leave a couple of links at the end of the article.
Our simple demo page will have a header, main section, and a footer. Here is the HTML, nothing extraordinary there.
<body>
<header>...</header>
<section class="main-content">...</section>
<footer>...</footer>
</body>
To enable the flex model we add display: flex to the body, and change the direction to column (the default is row, which is a horizontal layout). Also, the html and body will need 100% height to fill up the whole screen.
html{
height: 100%;
}
body{
display: flex;
flex-direction: column;
height: 100%;
}
Now we need to adjust how much space each section will take up. We’ve done this via the flex property, which bundles together three flex- specs into one:
- flex-grow – Defines how much of the available free space in the container goes to an element.
- flex-shrink – How much an element will shrink when there isn’t enough space for everything.
- flex-basis – The default size for an element.
We want our header and footer to take up just as much space as they need, and everything else to be reserved for the main content section. The CSS for such layout looks like this:
header{
/* We want the header to have a static height,
it will always take up just as much space as it needs. */
/* 0 flex-grow, 0 flex-shrink, auto flex-basis */
flex: 0 0 auto;
}
.main-content{
/* By setting flex-grow to 1, the main content will take up
all of the remaining space on the page.
The other elements have flex-grow: 0 and won't contest the free space. */
/* 1 flex-grow, 0 flex-shrink, auto flex-basis */
flex: 1 0 auto;
}
footer{
/* Like the header, the footer will have a static height - it shouldn't grow or shrink. */
/* 0 flex-grow, 0 flex-shrink, auto flex-basis */
flex: 0 0 auto;
}
To see this technique in action, check out our demo page by clicking the image below. Using the big pink button you can change the amount of content to help you observe how the layout adapts and pushes the footer to the bottom at all times.
Conclusion
As you can see flexbox is a powerful ally when building layouts from scratch. All mainstream browsers support it, with a few minor exceptions, so its pretty much safe to use it in all IE9+ projects – Can i use flexbox.
Here are a some awesome lessons and cheatsheats for learning more about the flexbox layout model:
- A quick guide to flexbox by CSS-Tricks – here.
- Solved by Flexbox, a website dedicated to cool flexbox techniques – here.
- 5-minute interactive lesson – here.
We hope you liked our way of creating sticky footers and that you’ve picked up something new and useful from the article. Leave us a comment if you have a cool flexbox trick of your own!
In this article we’ve gathered for you a collection of 15 awesome JavaScript and CSS libraries. Each one of them presents different solutions to common frontend tasks and can be of great help to both beginner and advanced developers. Check them out, you might find the perfect tool for your next project!
Hamburgers is a collection of over 20 hamburger menu buttons. All of them have unique well-made animations that are done with pure CSS and are guaranteed to run as smooth as possible. A Sass version is also available for those of you who use pre-processors in your projects.
This is a great resource containing a selection of well-designed, CSS-only loaders. Adding them to your website or app is very straightforward and probably the hardest part of doing so is choosing the loader you like most (our favorite is the pacman one).
Grd, as it’s name suggests, is all about building grid layouts. The library is made with pure CSS, utilizes the flexbox model properties, and offers only the most necessary and useful features. All these factors result in a very small framework – just 512 bytes when Gzipped.
With Superplaceholder you can add one or more messages of your choice as placeholders to input fields. The library will then display these messages with a cool animation as if someone is typing them in. Thanks to the rich customization options, you have a great deal of control over how and when the animations will be shown.
Slick is probably the most complex and feature-rich carousel plugin out there. It enables manipulating every imaginable setting but does it in a user friendly way, thanks to it’s well built API.
This futuristic library allows you to create virtual reality experiences using only good ol’ web technologies. After you’ve created your 3D world in HTML, A-frame will take it and split it into two screens with slightly different viewing angles. Now, you can run your demo on your mobile phone using Google Cardboard or another headset and have some serious VR fun.
Infinite scrolling is getting a bad rep from both developers and users – it’s often difficult to implement and frustrating when not done properly. Lavalamp is a JS plugin that offers a great alternative to infinite scrolling. Instead of automatically loading new content, you can add buttons at the top and bottom of the page for loading previous or next items.
Drift is an open-source JavaScript library for adding zoom-on-hover and magnifying glass effects to your website’s images. It has great browser support, no external dependencies, and is relatively easy to implement.
With this library you can add progress bars to any HTML element of your choice, including tricky ones such as input fields, images and video. Every aspect of the bars can be modified either by the library’s options or custom CSS styles.
In just 995 bytes, Min is one of the world’s most compact CSS frameworks. In its tiny package Min contains a classic 12-column grid, a good number of components and has great browser support.
This JavaScript and CSS library offers a fresh new take on responsive navigation menus. Instead of creating a bar that is displayed in its entirety on desktop and is collapsed on mobile, OkayNav tries to fit as many nav items as possible in the current browser size.
A CSS library for building advanced grid layouts. With Pintsize you have the option to create both Bootstrap-like grids and flexbox grids that adapt to the size of the content. The project’s website has a good examples section including browser support and code snippets.
Velocity is a JavaScript animation engine that combines the well-known API for jQuery’s animate(), with pure CSS animations to provide fast, reliable, and easy to use transitions. If you find yourself using jQuery only for animating elements, you can seamlessly switch to Velocity for better performance.
This CSS only library allows developers to add on-hover tooltips to elements on the page without including a single line of JavaScript. By adding data attributes to the HTML you can specify the content to be shown, the direction of the pop-up and other customization options.
Small JavaScript library for animating SVGs as if they are being hand drawn. It has many options for animation style and even gives developers the ability to make their own. Vivus is inspired by this awesome Codrops article, it has some breathtaking demos, go check them out!
We’ve already covered Angular.js and React in previous articles but there is a new frontend library that we think is worth your time. It’s called Vue.js and it has gathered a large community of enthusiastic developers.
The philosophy behind Vue.js is to provide the simplest possible API for creating real-time, two-way data binding between the view (HTML) and the model (a JavaScript object). As you will see in the following examples, the library holds true to that idea and working with it is effortless and enjoyable, without compromising on any functionality.
Getting Started
The easiest way to install Vue.js is to simply include it with a <script> tag at the end of your HTML’s body. The entire library is located in a single JavaScript file which you can download from the official website or import directly via CDN:
<script src="http://cdnjs.cloudflare.com/ajax/libs/vue/1.0.16/vue.js"></script>
If you want to use the library in a Node.js project, vue is available as an npm module. There is also an official CLI, which allows users to quickly setup their whole project based on premade template builds.
Below are five editors containing example apps we’ve built for you. The code has lots of comments and is separated in tabs for each file, making it really easy to follow. The editors have Vue.js built-in so don’t be afraid to experiment. Also, you can download an archive containing all the examples from the Download button near the top of this article.
1. Navigation Menu
To kick things off we’re going to build a simple navigation bar. There are a few basic components almost every Vue.js app need to have. They are:
- The model, or in other words our app’s data. In Vue.js this is simply a JavaScript object containing variables and their initial values.
- An HTML template, the correct terminology for which is view. Here we chose what to display, add event listeners, and handle different usages for the model.
- ViewModel – a Vue instance that binds the model and view together, enabling them to communicate with each other.
The idea behind these fancy words is that the model and the view will always stay in sync. Changing the model will instantly update the view, and vice versa. In our first example this is shown with the active variable, representing which menu item is currently selected.
(Play with our code editor on Tutorialzine.com)
As you can see working with the library is pretty straightforward. Vue.js does a lot of the work for us and provides familiar, easy to remember syntax:
- simple JavaScript object for all the options
{{double brackets}} for templatingv-something inline attributes for adding functionality directly in the HTML.
2. Inline Editor
In the previous example our model had only a couple of predefined values. If we want to give the users the ability to set any data, we can do two-way binding and link together an input field with a model property. When text is entered, it is automatically saved in the text_content model, which then causes the view to update.
(Play with our code editor on Tutorialzine.com)
Another thing to note in the above code is the v-if attribute . It show or hides a whole element depending on the truthfulness of a variable. You can read more about it here.
3. Order Form
This example illustrates multiple services and their total cost. Since our services are stored in an array, we can take advantage of the v-for directive to loop through all of the entries and display them. If a new element is added to the array or any of the old ones is changed, Vue.js will automatically update and show the new data.
(Play with our code editor on Tutorialzine.com)
To display the prices in a correct format we use one of the available filters that come built-in with Vue.js. They allow us to lazily modify the model data – in this case the currency filter is perfect, as it adds a dollar sign and proper number decimals. Just like in Angular filters are applied using the | syntax – {{ some_data | filter }}.
4. Instant Search
Here we will create an app, that exhibits some of the articles on our website. The app will also have a search field allowing us to filter which articles are displayed. There is a filterBy filter available, but it doesn’t do exactly what we need it to, so instead we will be creating our own custom filter.
(Play with our code editor on Tutorialzine.com)
The input field is bind to the searchString model. When text is entered the model is instantly updated and passed on to the searchFor filter. This way we can create a real-time search without having to worry about rendering or setting up event listeners – Vue.js handles all that!
5. Switchable Grid
In our last example we will demonstrate a common scenario where a page has different layout modes. Just like in the previous app we will be showing a list of articles from tutorialzine.com stored in an array.
By pressing one of the buttons in the top bar you can switch between a grid layout containing large images, and a list layout with smaller images and text.
(Play with our code editor on Tutorialzine.com)
Conclusion
There is a lot more to Vue.js than what we’ve showcased in these examples. The library also offers animations, custom components and all sorts of other features. We recommend you check out the excellent official documentation which is full of information and helpful snippets.
Having troubles deciding whether Vue.js is the right library for your project? The following links will be of great help to you:
- An official, detailed comparison with other frameworks – here.
- TodoMVC – a website where the same app is recreated with many different frameworks.
- Our articles where we’ve done similar examples using React and Angular.js.
Thanks for reading!
Material design was developed by Google, with the basic idea to create a unified style for all of the company’s web and mobile apps. It is based on many principles including things like proper animations, responsiveness, and smart usage of colors and shadows. You can read about the guidelines in full detail here.
Although Google’s design language is seen mainly in native Android apps, it’s still a great choice for web and hybrid applications. To aid users in the creation of web projects rocking the Material look, there are many frameworks and libraries offering ready-to-use components and styles. Here is our list of the top 15!
Material Design Lite is an official Google framework, so you can always expect the components to be up to date with the latest standards of the visual language. It looks fantastic, is relatively easy to use, and has no external dependencies.
This is a front-end framework for building responsive web apps and sites. It’s really simple to get started with, especially to people familiar with other similar projects, such as Bootstrap. A cool feature is the SASS version, which allows users to choose which components to include.
Material-UI is a rich set of React components implementing Material Design principles. This is a very polished library featuring pixel-perfect CSS styles and animations. There are also two separate themes for users to choose from – dark and light.
This is one of the most lightweight framework on our list, without any external dependencies and only 12kb gzipped for the CSS and JS. It offers React support, customization via SASS files, and has a separate inline version for styling emails.
Polymer is another Google product on our list. It’s a library for building fast, reusable web components which then you can import in your projects. Polymer offers a big selection of ready-to-use elements, organized in seven categories. One of them is called Paper and is full of Material Design components.
This is an extension library for the Ionic hybrid mobile app framework. It adds new classes, methods and helpers alongside a fresh set of CSS styles to bring the Material look to Ionic, without changing the way apps are developed with the framework.
The Zurb Foundation framework is another popular tool for building responsive websites and apps. This is an independent set of components that offers a quick way to add a Material twist to some of Foundation’s elements. It looks pretty good but doesn’t include many key Material Design components.
The result of a two-week long experiment, Surface is a CSS only framework in which many of the classic Material UI components are recreated without the help of any JavaScript or other programming languages. Since it consist of just one CSS file, it’s extremely lightweight and easy to use.
Essence is a CSS framework based on React and React Native. It allows developers to build super-fast and at the same time great looking web & mobile interfaces, implementing the Material Design specification. Using npm you can install the whole library, or just the modules you really need.
This Angular.js-like framework provides many, well-animated CSS and JavaScript components. For the layouts and styles LumX uses the Sass-based library Bourbon, and for the animations the popular Velocity.js. By combining these and some other plugins, LumX is able to offer a wide range of tools for building responsive web apps.
The guys at Boostwatch make a lot of cool Bootstrap themes, including one imitating Material Design, called Paper. It doesn’t have all of the classic Material components, but it is still a great option for people who already work with Bootstrap, since they don’t have to change absolutely anything (except for importing the theme) to get a modern looking app.
Another great option for Bootstrap enthusiasts. This is an actively updated theme for the front-end framework, which adds new styles and a number of JavaScript and jQuery plugins to apply Google’s design language to Bootstrap. A big plus here is the active community on GitHub (over 14000 stars).
AngularJS is a hugely popular open-source framework for web development. It’s primarily maintained by a team in Google, so it’s no surprise it gets is own version of a Material Design kit. For now it works only with Angular 1, but it most probably will get a port for the second version as well.
You can think of Material as a UI framework that is the perfect mix between Bootstrap and MDL – it works very similarly to Bootstrap (almost the same grid and HTML), but adds on top of that many Material components such as cards and pop-out date pickers. Most of the traditional Material Design elements are present here and are made to look spot on.
The Photon framework is dedicated for the development of hybrid mobile apps. Since it’s only around 60kb and does not depend on any third party libraries, it can be used to create Cordova and PhoneGap applications that are very lightweight. The look and feel of Photon’s UI components follow closely Material Design’s concepts.
A Suggestion From Our Readers: Framework7
Framework7 is a created with hybrid mobile apps in mind. It allows developers to quickly build web apps that imitate the appearance and behavior of native iOS and Android. To make that possible there are two distinct themes – one for Apple devices, and the other one offering Material Design components and styles.
This is the icon set that Google uses in most of their web, Android and iOS apps. There is a huge list of icons to chose from and more are being added all the time. It’s completely free and very easy to implement through Google Fonts or other methods.
Conclusion
Most of the libraries and frameworks on our list offer similar components and overall features. It’s up to every individual developer to decide which one works best for them and their current project. We hope we’ve helped you make the right choice!
