Category Archives: HTML

The 15 Best Material Design Frameworks and Libraries

By Danny Markov

material-frameworks-libraries

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

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.


materialzie

Materialize

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

Materual-UI

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.


5_mui

MUI CSS

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.


6_polymer

Polymer

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.


7_ionic_material

Ionic Material

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.


foundation

Material Foundation

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.


12_surface

Surface

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.


13_essence

Essence

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.


14_lumx

LumX

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.


8_paper

Paper Theme for Bootstrap

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.


material_for_bootstrap

Material Design for Bootstrap

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).


4_angular_material

Angular Material

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.


10_material

Material

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.


15_phonon

Phonon

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.


icons

Bonus: Material Icons

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!

Source:: Tutorialzine.com

What You Need To Know About CSS Variables

By Danny Markov

css-variables

When web projects grow bigger, their CSS usually becomes astronomically large and often times messy. To help us deal with this, new CSS variables are soon to hit mainstream browsers, giving devs the ability to reuse and easily edit repeatedly occurring CSS properties.

We’ve shown you how awesome stylesheet variables can be in our Sass and Less lessons, but these are pre-processors and require compiling before use. Now that variables are available in vanilla CSS, you can use them right away in your browser!

Defining And Using CSS Variables

Variables follow the same scope and inheritance rules like any other CSS definition. The easiest way to use them, is to make them globally available, by adding the declarations to the :root pseudo-class, so that all other selectors can inherit it.

:root{
    --awesome-blue: #2196F3;
}

To access the value inside a variable we can use the var(...) syntax. Note that names are case sensitive, so --foo != --FOO.

.some-element{
    background-color: var(--awesome-blue);
}

Support

Right now, only Firefox supports CSS variables out the box. However, versions 49 and up of Google Chrome will also ship with the feature enabled. If you are still on the older version of Chrome 48, you can enable this and some other new technologies by going to chrome://flags/ and finding Enable experimental Web Platform features. You can get more details here – Can I Use CSS Variables.

Below are a couple of examples, showcasing typical usage of CSS variables. To make sure they work properly, try viewing them on one of the browsers we’ve mentioned above.

Example 1 – Theme Colors

Variables in CSS are most useful when we need to apply the same rules over and over again for multiple elements, e.g. the repeating colors in a theme. Instead of copy-and-pasting every time we want to reuse the same color, we can place it in a variable and access it from there.

Now, if our client doesn’t like the shade of blue we’ve chosen, we can alter the styles in just one place (the definition of our variable) to change the colors of the whole theme. Without variables we would have to manually search and replace for every single occurrence.

For this demo to work properly make sure you are using one of these browsers.

(Play with our code editor on Tutorialzine.com)

Example 2 – Human Readable Names For Properties

Another great use of variables is when we want to save a more complex property value, so that we don’t have to remember it. Good examples are CSS rules with multiple parameters, such as box-shadow, transform and font.

By placing the property in a variable we can access it with a semantic, human readable name.

For this demo to work properly make sure you are using one of these browsers.

(Play with our code editor on Tutorialzine.com)

Example 3 – Dynamically Changing Variables

When a custom property is declared multiple times, the standard cascade rules help resolve the conflict and the lowermost definition in the stylesheet overwrites the ones above it.

The example below demonstrates how easy it is to dynamically manipulate properties on user action, while still keeping the code clear and concise.

For this demo to work properly make sure you are using one of these browsers.

(Play with our code editor on Tutorialzine.com)

A Few More Tips

As you can see CSS variables are pretty straightforward to use and it won’t take much time for developers to start applying them everywhere. Here are a few more things we left our of the article, but are still worth mentioning:

  • The var() function has a second parameter, which can be used to supply a fallback value if the custom property fails:
    width: var(--custom-width, 20%);
  • It is possible to nest custom properties:
    --base-color: #f93ce9;
    --background-gradient: linear-gradient(to top, var(--base-color), #444);
  • Variables can be combined with another recent addition to CSS – the calc() function. Sadly, this works only in Firefox for now.
    --container-width: 1000px;
    max-width: calc(var(--container-width) / 2);

This concludes our article! Have fun trying out this new CSS feature but remember that this is still considered an experimental technology. For now, avoid using it in serious projects and aim to always provide fallbacks.

Source:: Tutorialzine.com

20 Interesting JavaScript and CSS Libraries for February 2016

By Dimo Raichev

interesting-resources-february

The world of web development keeps expanding as new frameworks, libraries and plugins are created everyday. To keep you up to date with all the cool toys, we made this collection of our favorite JavaScript and CSS tools you should try in February 2016.


Super Simple Slider

Super simple slider is jQuery plugin which provides you with a functional and lightweight slider. To set it up just place your content in an empty element and call the plugin. If your content is of different heights, the plugin will animate smoothly to accommodate it.


Chartist

Chartist.js

Chartist is a JavaScript library which helps you present your charts in interesting ways. With CSS animations your charts are clear and eye-catching. Chartist provides you with a simple configuration override mechanism based on media queries to help you control the behavior of your charts.


Gridle

Griddle

Griddle is a useful grid component using React. With a lot of powerful functionality like filtering, paging, infinite scrolling and sub-grids, you can easily customise it to fit your project. Rendering is optimized so that only the current page of results is generated.


Textillate

Textillate.js

Textillate.js is a jQuery plugin which uses animate.css and lettering.js to apply eye-catching animations to text. To use it, include the plugin’s JavaScript file alongside the libraries it depends on and start creating unique effects.


Slideout

Slideout.js

Slideout is a JavaScript library which helps you set up touch slideout navigation menu for your mobile web apps. It doesn’t have any dependencies, has simple markup and uses native scrolling, so that it works smoothly on mobile devices.


Awesomplete

Awesomplete

Awesomplete is a simple and lightweight widget with no dependencies. By default the library expects the list of suggestions to be passed as a data attribute, but you can easily hook it up to your back-end with a simple AJAX request.


timeago

Timeago

Timeago is a jQuery plugin that makes it easy to support automatically updating fuzzy timestamps. You cantake full advantageof page caching in your web applications, because the timestamps aren’t calculated on the server.


ramjet

Ramjet

Ramjet is a JavaScript library which helps you make animations transforming one element into another. It supports images and GIFs so that you can build the perfect landing page. You can also use an easing function to make the transformation seem more natural.


patternizer

Patternizer

Patternizer is an online tool that helps you generate patterns. After you choose options like opacity and width, just copy the code that the website gives you and paste it into your stylesheet.


masonry

Masonry

Masonry is a jQuery plugin for building grid layouts. It places elements optimally depending on their sizes to make maximum use of the available space. With a lot of loading effects and options you can customize the look of your page.


lettering

Lettering.js

Lettering is a jQuery plugin that gives you the ability to style every letter, word and line in your text. The best use case is to create typographical CSS3 posters with unique styling for every letter. Text remains fully selectable.


nativefier

NativeFier

Nativefier is a command line Node.js utility which can easily create a desktop application out of any web site. Apps are wrapped in an Electron shell and packaged into an OS executable (.app, .exe, etc.) for use on Windows, OSX and Linux.


lightGallery

Lightgallery

Lightgallery is a responsive gallery plugin for jQuery. It has numerous options and animations which allows you to customise the plugin easily. The video module allows you to create beautiful youtube/vimeo video galleries with automatic thumbnail fetching.


magic animations

Magic Animations

Magic animations is a CSS library for animations. It has a lot of animation types and is easy to use. Just add the stylesheet to your page and set class names to your elements. If you are interested in CSS animations you can also check Animate.css.


bulma

Bulma

Bulma is a modern CSS framework based on the Flexbox layout model. It has a simple grid system, responsive nav bars and versatile media objects. Most Bulma elements can be customized by applying modifier classes.


ColorZilla

This is an extension for Google Chrome that bundles together a big array of features, including a color picker, CSS gradient generator, recent history of used colors, and more. Another similar tool is the open-source extension Eye Dropper.


WhatFont

With WhatFont you can quickly find out which fonts have been used in a webpage. Simply hover on any text, and the extension will show you the name of that typeface. WhatFont also detects the services used for providing the web fonts.


PerfectPixel

PerfectPixel is a Google Chrome extension that allows you to put a semi-transparent image overlay over the top of the developed HTML and perform per pixel comparison between them. It’s a great helper when you want to transform a PSD to HTML flawlessly.


FireShot

Fireshot allows Chrome users to make full web page screenshots and then directly upload, print or send them to Photoshop or the clipboard. It also support an array of popular formats such as pdf, png and gif, and can work offline without a problem.


Blur

Blur is a Google Chrome extension that makes it easy to keep track of and secure all your personal information online. It helps you remember your passwords, generate hard-to-crack new ones, and sync all the browsers and devices you log on.

Source:: Tutorialzine.com

JavaScript fatigue fatigue

By Axel Rauschmayer

Enough with the fatigue – tips against feeling overwhelmed:

  • Don’t try to know everything – it’s impossible in modern web development. Given that there is always more to know, it doesn’t matter that much what you learn (unless you have a specific need).
    • Go for depth in areas you love.
    • Go for breadth and on-demand learning in areas you are merely interested in or think you should know more about.
  • Wait for the critical mass. You can often afford to get started by reading the opinions of people you trust and wait it out until new ideas prove themselves.
  • Stick to things you understand: don’t use more than 1–2 new technologies per project.
    • It’s important to retain at least some feeling of control.
    • Every technology that people need to learn before they can use your project raises the barrier of entry and makes it more difficult to find collaborators, colleagues and employees.
  • Do exploratory toy projects: I like creating small projects that explore technologies or aspects of technologies.
  • Diversify in life: Specializing is good, but it’s also good to have regular activities not related to tech and/or brain. The advantage is that if you are frustrated in one area of your life, you have others to fall back on.

Even with the last of the previous tips, I find it important to remain human. Don’t overdo discipline, don’t become a life improvement machine. Periods of boredom and doing nothing are important for recuperating and inspiration.

When in doubt about what to learn next, you can always go back to fundamentals:

  • JavaScript, CSS, etc. (which technologies are fundamental depends on your work)
  • Non-technological skills: time management, social skills (communication, team building, …), health (posture, moving well, eating well, …), management processes and so on.

Source:: 2ality

Quick Tip: The Easiest Way To Make Responsive Headers

By Danny Markov

quick-tip-responsive-headers

Making pretty, responsive, headers is always a tricky process. Until now you needed to use floats or other complicated tricks and you even had to manually adjust pixel values. But not any more!

The technique we are about to show you relies on the powerful flexbox layout mode to do all the dirty work for you. It uses just a handful of CSS properties to create a header that is properly aligned and looks good on all screen sizes, while leaving the code cleaner and less hacky.

The Technique

In our demonstrative example we’ve built a header, which is separated in three sections with typical header content nested within them:

  • Left section – The company logo.
  • Middle section – Various hyperlinks.
  • Right section – A button.

Below you can check out a simplified version of the code.

In the first tab is the HTML where we group the sections in separate div tags. This makes it easier for CSS rules to be applied and generally produces a more organised code.

In the other tab is the CSS, which is just a couple of lines, does the entire job of finding the right places for the each of the sections.

Click the Run button to open up a live demo. You can test the responsiveness by resizing the frame:

<header>
	<div class="header-left">CoolLogo</div>
	<div class="header-center">
		<ul>
			<li><a href="#">Our products</a></li>
			<li><a href="#">Pricing</a></li>
			<li><a href="#">Blog</a></li>
		</ul>
	</div>
	<div class="header-right"><button>Buy now</button></div>
</header>
header{
	/* Enable flex mode. */
	display: flex; 
	
	/* Spread out the elements inside the header. */
	justify-content: space-between;

	/* Align items vertically in the center. */
	align-items: center;
}
<!DOCTYPE html>
<html>
<head>

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

<title>Easiest Way To Make Responsive Headers</title>
<link href='https://fonts.googleapis.com/css?family=Fugaz+One' rel='stylesheet' type='text/css'>

<style>
*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body{
	font: normal 16px sans-serif;
	padding: 0 10%;
	background: #eee;
}

body .container{
	max-width:1200px;
	margin:0 auto;
}

/*	Header	*/

header{
	/* Enable flex mode. */
	display: flex; 
	/* Spread out the elements inside the header. */
	justify-content: space-between;
	/* Align items vertically in the center. */
	align-items: center;

	padding: 40px 100px;
	color: #fff;
	background-color: #488EAD;
}

.header-left{
	font: normal 28px 'Fugaz One', cursive;
}

.header-left span{
	color: #EAD314;
}

.header-center ul{
	list-style: none;
}

.header-center ul li{
	display: inline-block;
	margin: 0 15px;
}

.header-center ul li a{
	text-decoration: none;
	color: #fff;
	cursor: pointer;
	font-weight: bold;
}

.header-right button{
    color: #fff;
    cursor: pointer;
    font-weight: 800;
    text-transform: uppercase;
    padding: 12px 30px;
    border: 2px solid #FFFFFF;
    border-radius: 4px;
    background-color: transparent;
}

.header-right button:hover {
    background-color: rgba(255,255,255,0.1);
}

/*	Main content	*/

.main-content{
	padding: 60px 100px;
	background-color: #fff;
    line-height: 1.5;
    color: #444;
}

.main-content h2{
	margin-bottom: 38px;
}

.main-content p{
	margin: 30px 0;
}


.main-content .placeholder{
	margin: 40px 0;
	height:380px;
	background-color: #e3e3e3;
}


/*	Media queries	*/

@media (max-width: 1200px){
	header{
		padding: 40px 60px;
	}

	.main-content{
		padding: 100px 60px;
	}

	body {
	    padding: 0 5%;
	}
}

@media (max-width: 1000px){
	header{
		/* Reverse the axis of the header, making it vertical. */
		flex-direction: column;
		/* Align items to the begining (the left) of the header. */
		align-items: flex-start;
	}

	header > div{
		margin: 12px 0;
	}

	.header-center ul li{
		margin: 0 15px 0 0;
	}

}

@media (max-width: 600px){
	body {
	    padding: 0 10px;
	}

	.header-left{
		margin-top:0;
	}

	header {
	    padding: 30px;
	}

	.main-content{
		padding:30px;
	}
}


</style>
</head>
<body>

<div class="container">
	
	<header>
		<div class="header-left"><span>Cool</span>Logo</div>
		<div class="header-center">
			<ul>
				<li><a href="#">Our products</a></li>
				<li><a href="#">Pricing</a></li>
				<li><a href="#">Blog</a></li>
			</ul>
		</div>
		<div class="header-right"><button>Buy now</button></div>
	</header>

	<section class="main-content">
		<h2>Header with three justify aligned sections</h2>
		<p>Using the power of flexbox, the logo, links, and button of our header stay in their designated places, no matter the screen size. The <strong style="white-space: nowrap;">justify-content</strong> property offers a clean approach and allows us to align the section of the header without a hassle. No need for any floats, margins or crazy width calculations.</p>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus at congue urna, pellentesque faucibus justo. Integer a lorem a mauris suscipit congue luctus ut quam. Mauris pellentesque pellentesque mattis. In sed mi dignissim, faucibus elit at, rutrum odio. Mauris et velit magna. Maecenas iaculis eget sapien eu gravida. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vestibulum a egestas magna. Aenean tellus elit, aliquet at lacinia at, accumsan eget neque. Maecenas rutrum risus quis sem scelerisque sagittis. Quisque sit amet turpis lorem. </p>
		<div class="placeholder"></div>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus at congue urna, pellentesque faucibus justo. Integer a lorem a mauris suscipit congue luctus ut quam. Mauris pellentesque pellentesque mattis. In sed mi dignissim, faucibus elit at, rutrum odio. Mauris et velit magna. Maecenas iaculis eget sapien eu gravida. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vestibulum a egestas magna. Aenean tellus elit, aliquet at lacinia at, accumsan eget neque. Maecenas rutrum risus quis sem scelerisque sagittis. Quisque sit amet turpis lorem. </p>
	</section>

</div>

</body>
</html>

Full responsiveness

The space-between trick will always take care of the alignment, even when the screen size changes. However, when the viewport becomes too small for a horizontal header, we can make it go vertical by changing the flex-direction property in a media query.

@media (max-width: 1000px){
	header{
		/* Reverse the axis of the header, making it vertical. */
		flex-direction: column;
		
		/* Align items to the begining (the left) of the header. */
		align-items: flex-start;
	}
}

Conclusion

This sums up our quick tutorial! We hope you found it useful and will start applying it right away. Flexbox has pretty good browser support nowadays, so unless your user base is IE heavy, this technique can be applied without causing any mayhem.

To learn more about flexbox and the CSS properties that we used, check out these links:

Source:: Tutorialzine.com

Learn Sass In 15 Minutes

By Danny Markov

learn-sass-in-15-minutes

If you write copious amounts of CSS, a pre-processor can greatly decrease your stress levels and save you a lot of precious time. Using tools such as Sass, Less, Stylus or PostCSS makes large and complicated stylesheets clearer to understand and easier to maintain. Thanks to features like variables, functions and mixins the code becomes more organized, allowing developers to work quicker and make less mistakes.

We’ve worked with pre-processors before as you may remember from our article about Less. This time we are going to explain Sass and show you some of it’s main features.

1. Getting Started

Sass files cannot be interpreted by the browser, so they need compiling to standard CSS before they are ready to hit the web. That’s why you need some sort of tool to help you translate .scss files into .css. Here you have a couple of options:

  • The simplest solution is a browser tool for writing and compiling Sass right on the spot – SassMeister.
  • Use a 3rd party desktop app. Both free and paid versions are available. You can go here to find out more.
  • If you are a CLI person like we are, you can install Sass on your computer and compile files manually.

If you decide to go with the command line, you can install Sass in it’s original form (written in ruby) or you can try the Node.js port (our choice). There are many other wrappers as well, but since we love Node.js we are going to go with that.

Here is how you can compile .scss files using the node CLI:

node-sass input.scss output.css

Also, here is the time to mention that Sass offers two distinct syntaxes – Sass and SCSS. They both do the same things, just are written in different ways. SCSS is the newer one and is generally considered better, so we are going to go with that. If you want more information on the difference between the two, check out this great article.

2. Variables

Variables in Sass work in a similar fashion to the those in any programming language, including principals such as data types and scope. When defining a variable we store inside it a certain value, which usually is something that will often reoccur in the CSS like a palette color, a font stack or the whole specs for a cool box-shadow.

Below you can see a simple example. Switch between the tabs to see the SCSS code and it’s CSS translation.

$title-font: normal 24px/1.5 'Open Sans', sans-serif;
$cool-red: #F44336;
$box-shadow-bottom-only: 0 2px 1px 0 rgba(0, 0, 0, 0.2);

h1.title {
  font: $title-font;
  color: $cool-red;
}

div.container {
  color: $cool-red;
  background: #fff;
  width: 100%;
  box-shadow: $box-shadow-bottom-only;
}
h1.title {
  font: normal 24px/1.5 "Open Sans", sans-serif;
  color: #F44336; 
}

div.container {
  color: #F44336;
  background: #fff;
  width: 100%;
  box-shadow: 0 2px 1px 0 rgba(0, 0, 0, 0.2);
}

The idea behind all this is that we can later on reuse the same values more quickly, or if a change is needed, we can provide the new value in just one place (the definition of the variable), instead of applying it manually everywhere we’re using that property.

3. Mixins

You can think of mixins as a simplified version of constructor classes in programming languages – you can grab a whole group of CSS declarations and re-use it wherever you want to give and element a specific set of styles.

Mixins can even accept arguments with the option to set default values. In the below example we define a square mixin, and then use it to create squares of varying sizes and colors.

@mixin square($size, $color) {
  width: $size;
  height: $size;
  background-color: $color;
}

.small-blue-square {
  @include square(20px, rgb(0,0,255));
}

.big-red-square {
  @include square(300px, rgb(255,0,0));
}
.small-blue-square {
  width: 20px;
  height: 20px;
  background-color: blue; 
}

.big-red-square {
  width: 300px;
  height: 300px;
  background-color: red;
}

Another efficient way to use mixins is when a property requires prefixes to work in all browsers.

@mixin transform-tilt() {
  $tilt: rotate(15deg);

  -webkit-transform: $tilt; /* Ch <36, Saf 5.1+, iOS, An =<4.4.4 */
      -ms-transform: $tilt; /* IE 9 */
          transform: $tilt; /* IE 10, Fx 16+, Op 12.1+ */
}

.frame:hover { 
  @include transform-tilt; 
}
.frame:hover {
  -webkit-transform: rotate(15deg);  /* Ch <36, Saf 5.1+, iOS, An =<4.4.4 */
  -ms-transform: rotate(15deg);  /* IE 9 */
  transform: rotate(15deg);  /* IE 10, Fx 16+, Op 12.1+ */ 
}

4. Extend

The next feature we will look at is @extend, which allows you to inherit the CSS properties of one selector to another. This works similarly to the mixins system, but is preferred when we want to create a logical connection between the elements on a page.

Extending should be used when we need similarly styled elements, which still differ in some detail. For example, let’s make two dialog buttons – one for agreeing and one for canceling the dialog.

.dialog-button {
  box-sizing: border-box;
  color: #ffffff;
  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.12);
  padding: 12px 40px;
  cursor: pointer;
}

.confirm {
  @extend .dialog-button;
  background-color: #87bae1;
  float: left;
}

.cancel {
  @extend .dialog-button;
  background-color: #e4749e;
  float: right;
}
.dialog-button, .confirm, .cancel {
  box-sizing: border-box;
  color: #ffffff;
  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.12);
  padding: 12px 40px;
  cursor: pointer; 
}

.confirm {
  background-color: #87bae1;
  float: left; 
}

.cancel {
  background-color: #e4749e;
  float: right; 
}

If you check out the CSS version of the code, you will see that Sass combined the selectors instead of repeating the same declarations over and over, saving us precious memory.

5. Nesting

HTML follows a strict nesting structure whereas in CSS it’s usually total chaos. With Sass nesting you can organize your stylesheet in a way that resembles the HTML more closely, thus reducing the chance of CSS conflicts.

For a quick example, lets style a list containing a number of links:

ul {
  list-style: none;

  li {
    padding: 15px;
    display: inline-block;

    a {
      text-decoration: none;
      font-size: 16px;
      color: #444;
    }

  }

}
ul {
  list-style: none; 
}

ul li {
  padding: 15px;
  display: inline-block; 
}

ul li a {
  text-decoration: none;
  font-size: 16px;
  color: #444; 
}

Very neat and conflict proof.

6.Operations

With Sass you can do basic mathematical operation right in the stylesheet and it is as simple as applying the appropriate arithmetic symbol.

$width: 800px;

.container { 
  width: $width;
}

.column-half {
  width: $width / 2;
}

.column-fifth {
  width: $width / 5;
}
.container {
  width: 800px; 
}

.column-half {
  width: 400px; 
}

.column-fifth {
  width: 160px; 
}

Although vanilla CSS now also offers this feature in the form of calc(), the Sass alternative is quicker to write, has the modulo % operation, and can be applied to a wider range of data-types (e.g. colors and strings).

7. Functions

Sass offers a long list of built-in functions. They serve all kinds of purposes including string manipulation, color related operations, and some handy math methods such as random() and round().

To exhibit one of the more simple Sass functions, we will create a quick snippet that utilizes darken($color, $amount) to make an on-hover effect.

$awesome-blue: #2196F3;

a {
  padding: 10 15px;
  background-color: $awesome-blue;
}

a:hover {
  background-color: darken($awesome-blue,10%);
}
a {
  padding: 10 15px;
  background-color: #2196F3; 
}

a:hover {
  background-color: #0c7cd5; 
}

Except the huge list of available functions, there is also the options to define your own. Sass supports flow control as well, so if you want to, you can create quite complex behaviors.

Conclusion

Some of the above features are coming to standard CSS in the future, but they are not quite here yet. In the meantime, pre-processors are a great way improve the CSS writing experience and Sass is a solid option when choosing one.

We only covered the surface here, but there is a lot more to Sass than this. If you want to get more familiar with everything it has to offer, follow these links:

Source:: Tutorialzine.com

Creating Your First Desktop App With HTML, JS and Electron

By Danny Markov

creating-your-first-desktop-app-with-electron

Web applications become more and more powerful every year, but there is still room for desktop apps with full access to the hardware of your computer. Today you can create desktop apps using the already familiar HTML, JS and Node.js, then package it into an executable file and distribute it accordingly across Windows, OS X and Linux.

There are two popular open source projects which make this possible. These are NW.js, which we covered a few months ago, and the newer Electron, which we are going to use today (see the differences between them here). We are going to rewrite the older NW.js version to use Electron, so you can easily compare them.

Getting Started With Electron

Apps built with Electron are just web sites which are opened in an embedded Chromium web browser. In addition to the regular HTML5 APIs, these websites can use the full suite of Node.js modules and special Electron modules which give access to the operating system.

For the sake of this tutorial, we will be building a simple app that fetches the most recent Tutorialzine articles via our RSS feed and displays them in a cool looking carousel. All the files needed for the app to work are available in an archive which you can get from the Download button near the top of the page.

Extract its contents in a directory of your choice. Judging by the file structure, you would never guess this is a desktop application and not just a simple website.

Directory Structure

We will take a closer look at the more interesting files and how it all works in a minute, but first, let’s take the app for a spin.

Running the App

Since an Electron app is just a fancy Node.js app, you will need to have npm installed. You can learn how to do it here, it’s pretty straightforward.

Once you’ve got that covered, open a new cmd or terminal in the directory with the extracted files and run this command:

npm install

This will create a node_modules folder containing all the Node.js dependencies required for the app to work. Everything should be good to go now, in the same terminal as before enter the following:

npm start

The app should open up in it’s own window. Notice it has a top menu bar and everything!

Electron App In Action

Electron App In Action

You’ve probably noticed that starting the app isn’t too user friendly. However, this is just the developer’s way of running an Electron app. When packaged for the public, the it will be installed like a normal program and opened like one, just by double clicking on its icon.

How it’s made

Here, we will talk about the most essential files in any electron app. Let’s start with package.json, which holds various information about the project, such as the version, npm dependencies and other important settings.

package.json

{
  "name": "electron-app",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "dependencies": {
    "pretty-bytes": "^2.0.1"
  },
  "devDependencies": {
    "electron-prebuilt": "^0.35.2"
  },
  "scripts": {
    "start": "electron main.js"
  },
  "author": "",
  "license": "ISC"
}

If you’ve worked with node.js before, you already know how this works. The most significant thing to note here is the scripts property, where we’ve defined the npm start command, allowing us to run the app like we did earlier. When we call it, we ask electron to run the main.js file. This JS file contains a short script that opens the app window, and defines some options and event handlers.

main.js

var app = require('app');  // Module to control application life.
var BrowserWindow = require('browser-window');  // Module to create native browser window.

// Keep a global reference of the window object, if you don't, the window will
// be closed automatically when the JavaScript object is garbage collected.
var mainWindow = null;

// Quit when all windows are closed.
app.on('window-all-closed', function() {
    // On OS X it is common for applications and their menu bar
    // to stay active until the user quits explicitly with Cmd + Q
    if (process.platform != 'darwin') {
        app.quit();
    }
});

// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
app.on('ready', function() {
    // Create the browser window.
    mainWindow = new BrowserWindow({width: 900, height: 600});

    // and load the index.html of the app.
    mainWindow.loadURL('file://' + __dirname + '/index.html');

    // Emitted when the window is closed.
    mainWindow.on('closed', function() {
        // Dereference the window object, usually you would store windows
        // in an array if your app supports multi windows, this is the time
        // when you should delete the corresponding element.
        mainWindow = null;
    });
});

Take a look at what we do in the ‘ready’ method. First we define a browser window and set it’s initial size. Then, we load the index.html file in it, which works similarly to opening a HTML file in your browser.

As you will see, the HTML file itself is nothing special – a container for the carousel and a paragraph were CPU and RAM stats are displayed.

index.html

<!DOCTYPE html>
<html>
<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Tutorialzine Electron Experiment</title>

    <link rel="stylesheet" href="./css/jquery.flipster.min.css">
    <link rel="stylesheet" href="./css/styles.css">

</head>
<body>

<div class="flipster">
    <ul>
    </ul>
</div>

<p class="stats"></p>

<!-->In Electron, this is the correct way to include jQuery<-->
<script>window.$ = window.jQuery = require('./js/jquery.min.js');</script>
<script src="./js/jquery.flipster.min.js"></script>
<script src="./js/script.js"></script>
</body>
</html>

The HTML also links to the needed stylesheets, JS libraries and scripts. Notice that jQuery is included in a weird way. See this issue for more information about that.

Finally, here is the actual JavaScript for the app. In it we access Tutorialzine’s RSS feed, fetch recent articles and display them. If we try to do this in a browser environment, it won’t work, because the RSS feed is located on a different domain and fetching from it is forbidden. In Electron, however, this limitation doesn’t apply and we can simply get the needed information with an AJAX request.

$(function(){

    // Display some statistics about this computer, using node's os module.

    var os = require('os');
    var prettyBytes = require('pretty-bytes');

    $('.stats').append('Number of cpu cores: <span>' + os.cpus().length + '</span>');
    $('.stats').append('Free memory: <span>' + prettyBytes(os.freemem())+ '</span>');

    // Electron's UI library. We will need it for later.

    var shell = require('shell');


    // Fetch the recent posts on Tutorialzine.

    var ul = $('.flipster ul');

    // The same-origin security policy doesn't apply to electron, so we can
    // send ajax request to other sites. Let's fetch Tutorialzine's rss feed:

    $.get('http://feeds.feedburner.com/Tutorialzine', function(response){

        var rss = $(response);

        // Find all articles in the RSS feed:

        rss.find('item').each(function(){
            var item = $(this);

            var content = item.find('encoded').html().split('</a></div>')[0]+'</a></div>';
            var urlRegex = /(http|ftp|https)://[w-_]+(.[w-_]+)+([w-.,@?^=%&amp;:/~+#]*[w-@?^=%&amp;/~+#])?/g;

            // Fetch the first image of the article.
            var imageSource = content.match(urlRegex)[1];


            // Create a li item for every article, and append it to the unordered list.

            var li = $('<li><img /><a target="_blank"></a></li>');

            li.find('a')
                .attr('href', item.find('link').text())
                .text(item.find("title").text());

            li.find('img').attr('src', imageSource);

            li.appendTo(ul);

        });

        // Initialize the flipster plugin.

        $('.flipster').flipster({
            style: 'carousel'
        });

        // When an article is clicked, open the page in the system default browser.
        // Otherwise it would open it in the electron window which is not what we want.

        $('.flipster').on('click', 'a', function (e) {

            e.preventDefault();

            // Open URL with default browser.

            shell.openExternal(e.target.href);

        });

    });

});

A cool thing about the above code, is that in one file we simultaneously use:

  • JavaScript libraries – jQuery and jQuery Flipster to make the carousel.
  • Electron native modules – Shell which provides APIs for desktop related tasks, in our case opening a URL in the default web browser.
  • Node.js modules – OS for accessing system memory information, Pretty Bytes for formatting.

And with this our app is ready!

Packaging and Distribution

There is one other important thing to do to make your app ready for end users. You need to package it into an executable that can be started with a double click on users’ machines. Since Electron apps can work on multiple operating systems and every OS is different, there need to be separate distributions for Windows, for OS X and for Linux. Tools such as this npm module are a good place to start – Electron Packager.

Take into consideration that the packaging takes all your assets, all the required node.js modules, plus a minified WebKit browser and places them together in a single executable file. All these things sum up and the final result is an app that is roughly 50mb in size. This is quite a lot and isn’t practical for a simple app like our example here, but this becomes irrelevant when we work with big, complex applications.

Conclusion

The only major difference with NW.js that you will see in our example is that NW.js opens an HTML page directly, whereas Electron starts up by executing a JavaScript file and you create an application window through code. Electron’s way gives you more control, as you can easily build multi-window applications and organize the communication between them.

Overall Electron is an exciting way to build desktop web applications using web technologies. Here is what you should read next:

Source:: Tutorialzine.com

Comparing The Top Frameworks For Building Hybrid Mobile Apps

By Danny Markov

comparing-the-top-frameworks

Only a few years ago, developing mobile apps via JavaScript was nothing more then a quirky experiment. The idea that you could build iOS and Android apps, without having to operate with Java and Objective C, seemed appealing to many web devs. Now we have a plethora of frameworks bringing us closer than ever to creating a native mobile experience using only web technologies.

What are Hybrid Mobile Apps?

A hybrid app is just a regular mobile optimized website, written in CSS, HTML and JavaScript, that is displayed in a webview (this is a basically a stripped down web browser). The advantage is that you only need to write a single application, which in most cases runs unmodified on Android, iOS and Windows Phone. Most of the frameworks listed in this article do this using Cordova or PhoneGap, which give you a bridge to the device APIs in JavaScript.

In this article we’re going to compare the most popular JavaScript frameworks for building hybrid and native mobile apps. Scroll to the bottom of the article to see the scores.

1. Ionic

Ionic

Ionic is the most popular framework on our list and probably the first choice of many developers. You can use the CSS portion of the framework to create native looking designs, but to harness the full potential of Ionic, it’s best to pair it with AngularJS. A big bonus you get with Ionic is the command-line interface which is full of awesome features including integrated emulators and a Cordova based app packager.

Pros:

  • Works with predefined components
  • Great community
  • Command Line Interface with lots of useful features

Cons:

  • You need to know AngularJS to do anything complex

2. Onsen UI

Onsen UI

Onsen UI

This is an open source framework that allows developers to build apps by combining native-looking components. It’s fairly simple to use, can work with or without AngularJS, and has great documentation that includes lots of examples and layouts for the most common app structures. A disadvantage of Onsen UI is that it currently offers only an iOS theme, although the next version promises Material Design support.

Pros:

  • Works with predefined components
  • Excellent documentation with examples

Cons:

  • PhoneGap/Cordova builder not included, but supported
  • No support for Material Design (yet)

3. Framework 7

Framework 7

Framework 7

The cool thing about Framework 7 is that it is completely framework agnostic (doesn’t have external dependencies like Angular or React) and still manages to make apps look and feel native, with properly styled components and animations. Anyone who understands HTML, CSS and JavaScript can create an app without making the code convoluted. Framework 7 doesn’t include any tools for emulation or app packaging so you will need to combine it with Cordova or PhoneGap.

Pros:

  • Simple to use, relies only on HTML, CSS and JavaScript
  • Good performance
  • Can be combined with any JavaScript framework of choice

Cons:

  • PhoneGap/Cordova builder not included, but supported

4. React Native

React Native

React Native

As the name implies, React Native’s purpose is to build proper native apps, instead of creating hybrid ones that run in a Webview. Development, however, is still done completely via JavaScript and React. This frameworks isn’t tailored towards beginners in web development, but on the plus side, there is a huge community behind it that will help you in every part of the way. Recently the framework rolled support for Android, so you can have real cross-platform apps.

Pros:

  • Native-like performance
  • Huge community

Cons:

  • Steep learning curve
  • The development tools only work on OS X at the moment

5. jQuery Mobile

jQuery Mobile

jQuery Mobile

The grandpa of all mobile frameworks, jQuery Mobile doesn’t try to make apps that look like Android or iOS. Instead, it’s purpose is to help develop web apps that will work equally well on all mobile browsers (including oldies such as Windows Phone, Blackberry, and Symbian). As such, it is very lightweight, depends only on jQuery and is quite easy to learn, while still offering good touch recognition and PhoneGap/Cordova support.

Pros:

  • Support for wide range of mobile browsers
  • Simple to use

Cons:

  • Dated styles that don’t resemble either iOS or Android
  • PhoneGap/Cordova builder not included, but supported

6. Native Script

NativeScript

NativeScript

Native script’s biggest feature is that it allows you to write the functionality of your app in JavaScript once, which then will be transformed accordingly to Android, iOS and Windows Phone. Packaged, the compiled applications start in a native fashion, without opening and running in a browser. This frameworks does require some coding skills, but compensates for it with an extensive, in-depth documentation.

Pros:

  • Write once, use everywhere approach.
  • Great documentation

Cons:

  • Steep learning curve
  • Small community

7. Famous

Famous

Famous

Famous has a unique approach to web and mobile development. It combines the DOM tree (your HTML) with WebGL, displaying everything in a canvas, similar to what HTML game engines do. This novel technique allows the framework to run your apps in 60 fps, which is as smooth as most native apps. Sadly, this project is no longer being actively developed and doesn’t have good docs for reference.

Pros:

  • Native-like performance

Cons:

  • No longer actively developed
  • Documentation not full
  • Small community

The Rundown

Conclusion

There is no best framework – all of them have their pros and cons and it’s up to you to decide depending on what you plan on using them for.

We hope this quick comparison has been of great use to you! If you have experience with any of the listed frameworks or similar ones, please leave a comment and share your opinion on hybrid app development!

Source:: Tutorialzine.com

Learn the Bootstrap Grid in 15 Minutes

By Danny Markov

learn-bootstrap-grid

Bootstrap is the most widely used frontend framework right now. When it comes to building responsive websites and apps, it’s the first choice of both professionals and hobbyists because of how simple it is to work with. Anybody who knows HTML, CSS and a bit of JavaScript can learn Bootstrap in no time.

In this quick lesson we’re going to cover the grid system, one of the fundamental concepts every Bootstrap developer needs to master. It allows us to create responsive page layouts which can change and adapt depending on the screen size of the device the user is on.

1. Rows and Columns

The grid consists of rows and columns. This allows us to freely position elements vertically and horizontally.

Rows are block level. This means, that when we create a row, it takes up the entire width of the element it is in. You can think of rows as new lines in your layout.

The horizontal alignment in the grid is done via columns. Only columns can be the direct children of a row and all content should go inside them. Placing content directly within a row will break the layout.

<!-- Wrong -->
<div class="row">
    Some content
</div>

<!-- Correct -->
<div class="row">
    <div class="col-md-12">Content Goes Here</div>
</div>
<!DOCTYPE html>
<html>

<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Learn the bootstrap grid in 15 minutes</title>

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <style>

        body{ padding-top:50px;}

        .row div{
            background-color: #2196F3;
            border: 1px solid #fff;
            height: 125px;
            padding: 15px;
            color: #fff;
        }

    </style>

</head>

<body>

    <div class="container">
        <div class="row">
            <div class="col-md-6">First row, first column</div>
            <div class="col-md-6">First row, second column</div>
        </div>

        <div class="row">
            <div class="col-md-4">Second row, first column</div>
            <div class="col-md-4">Second row, second column</div>
            <div class="col-md-4">Second row, third column</div>
        </div>
    </div>

</body>
</html>

Note: Rows and columns have a special relationship. Columns have 15px left and right padding so that their content is properly spaced out. However, this pushes the first and last column’s content 15px away from the parent. To compensate, the row has negative left and right 15px margins. This is why you should always place columns within rows.

2. Rows are Divided in 12

Rows are divided horizontally into 12 equal parts. When we place a column inside a row, we have to specify the number of parts it is going to take up.

This is done by applying a specific class .col-md-NUMBER, where NUMBER can be an integer from 1 to 12. Depending on the number, a column will occupy a percentage of the full row width: 6 will be 50% (12/6), 3 will be 25% (12/3) and so on. The following example should make things clearer:

<div class="row">
    <div class="col-md-12">Full width</div>
</div>
<div class="row">
    <div class="col-md-3">25%</div>
    <div class="col-md-3">25%</div>
    <div class="col-md-6">50%</div>
</div>
<!DOCTYPE html>
<html>

<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Learn the bootstrap grid in 15 minutes</title>

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <style>

        body{ padding-top:50px;}

        .row div{
            background-color: #2196F3;
            border: 1px solid #fff;
            height: 125px;
            padding: 15px;
            color: #fff;
        }

    </style>

</head>

<body>

        <div class="container">
	    <div class="row">
	        <div class="col-md-12">Full width</div>
	    </div>
	    <div class="row">
	        <div class="col-md-3">25%</div>
	        <div class="col-md-3">25%</div>
	        <div class="col-md-6">50%</div>
	    </div>
	</div>

</body>
</html>

3. Column Wrapping

We always have to take into consideration, that there are only 12 available spaces in a line. If we sum up the space required by a couple of adjacent columns, and the result exceeds 12, the last columns in that group will have to move to the next line. Let’s take a look at a practical example:

The first two columns have sizes of respectively 8 and 4 (8+4=12), which makes the first line full. There isn’t enough space for the third cell there, so it will have to wrap to the next line.

<div class="row">
    <div class="col-xs-8"></div>
    <div class="col-xs-4"></div>
    <div class="col-xs-9">This column will move to the next line.</div>
</div>
<!DOCTYPE html>
<html>

<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Learn the bootstrap grid in 15 minutes</title>

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <style>

        body{ padding-top:50px;}


        .row div{
            background-color: #2196F3;
            border: 1px solid #fff;
            height: 125px;
            padding: 15px;
            color: #fff;
        }

    </style>

</head>

<body>

        <div class="container">
	    <div class="row">
	        <div class="col-xs-8"> 8 </div>
	        <div class="col-xs-4"> 4 </div>
	        <div class="col-xs-9"> 9 </div>
	    </div>
	</div>

</body>
</html>

4. Screen Size Classes

Remember when we wrote .col-md-NUMBER in step 2? That -md- stands for medium. Bootstrap has a number of these classes for different screen sizes:

  • xs – Extra small screens like smartphones. Use it as .col-xs-NUMBER
  • sm – Small screen devices like tablets. .col-sm-NUMBER
  • md – Medium sized screens such as low dpi desktops and laptops. .col-md-NUMBER
  • lg – Large, high resolution screens. .col-lg-NUMBER

Bootstrap takes the screen resolution and dpi into account when deciding which classes are active (learn more here). This is a powerful way how to control how layouts render on different devices.

When we define a rule for any device size, this rule will be inherited and applied to all bigger sizes, unless we overwrite it by supplying a new one. Hit the Run button on the following example and try resizing your browser to see the layout adapt.

<div class="row">
    <div class="col-xs-12 col-md-6"><p>Try resizing the browser to see this text and the image rearrange for optimal viewing. </p></div>
    <div class="col-xs-12 col-md-6"><img src="city.jpg" class="img-responsive"></div>
</div>
<!DOCTYPE html>
<html>

<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Learn the bootstrap grid in 15 minutes</title>

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <style>

        body{ padding-top:50px;}

    </style>

</head>

<body>

        <div class="container">
	    <div class="row">
	        <div class="col-xs-12 col-md-6">
	            <p>Try resizing the browser to see this text and the image rearrange for optimal viewing.</p>
	            <p> On extra small screens both the text and the image take up the whole width of the row. </p>
	            <p> When the browser size gets into the medium category, they can move in together and share a single row. They only need half of the row, since there is more space horizontally on the screen.</p>
	        </div>
	        <div class="col-xs-12 col-md-6"><img src="http://cdn.tutorialzine.com/wp-content/uploads/2015/10/city.jpg" class="img-responsive"></div>
	    </div>
	</div>

</body>
</html>

5. Clearfix

In some scenarios, when a column has much more content and a bigger height then the ones after it, the layout will break. The columns will all pile up under each other, instead of moving to the next line as they should.

To prevent this, we add a helper div with the clearfix class. It will force all columns after it move to a new line, solving the issue.

<div class="row">
    <div class="col-xs-6 tall-column">A column much taller than the rest.</div>
    <div class="col-xs-6"></div>
    <div class="clearfix"></div>
    <div class="col-xs-6"></div>
</div>
<!DOCTYPE html>
<html>

<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Learn the bootstrap grid in 15 minutes</title>

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <style>

        body{ padding-top:50px;}

        .row{
            margin-bottom: 50px;
        }

        .row .col-xs-6{
            background-color: #2196F3;
            border: 1px solid #fff;
            height: 125px;
            padding: 15px;
            color: #fff;
        }

        .row .tall-column{
            height: 300px;
        }

    </style>

</head>

<body>

         <div class="container">

	    <div class="row">
	        <div class="col-xs-6 tall-column">All columns are 6 units wide, but this one is too tall!</div>
	        <div class="col-xs-6"></div>
	        <div class="col-xs-6">This column shoudln't be here.</div>
	        <div class="col-xs-6">This column shoudln't be here.</div>
	    </div>

	    <div class="row">
	        <div class="col-xs-6 tall-column">By adding a clearfix between the second and third columns, everything will go where it should.</div>
	        <div class="col-xs-6"></div>
	        <div class="clearfix"></div>
	        <div class="col-xs-6">All better now.</div>
	        <div class="col-xs-6"></div>
	    </div>

	</div>

</body>
</html>

You can use Bootstrap’s responsive utility classes to control when clearfix is active.

6. Offsets Are Your Friend

By default, columns stick to each other without leaving any space, floating to the left. Any excess space remaining in that row stays empty on the right.

To create margins on the left of columns we can use the offset classes. Applying a .col-md-offset-2 class to any column will move it to the right, as if there is an invisible .col-md-2 cell there. You can have different offsets for the different screen sizes thanks to the xs, sm, md and lg prefixes.

You can use offsets to easily center columns:

<div class="row">
    <div class="col-md-6 col-md-offset-3"></div>
    <div class="col-md-10 col-md-offset-1"></div>
</div>
<div class="container">

    <div class="row">
        <div class="col-xs-5 col-xs-offset-4">col-xs-5 col-xs-offset-4</div>
        <div class="col-xs-9 col-xs-offset-2">col-xs-9 col-xs-offset-2</div>
        <div class="col-xs-6 col-xs-offset-1">col-xs-6 col-xs-offset-1</div>
        <div class="col-xs-4 col-xs-offset-1">col-xs-4 col-xs-offset-1</div>
        <div class="col-xs-11 col-xs-offset-1">col-xs-11 col-xs-offset-1</div>
        <div class="col-xs-10">col-xs-10</div>
        <div class="col-xs-7">col-xs-7</div>
    </div>
    <div class="row">
        <div class="col-xs-5">col-xs-5</div>
    </div>
    <div class="row">
        <div class="col-xs-7">col-xs-7</div>
        <div class="col-xs-10">col-xs-10</div>
        <div class="col-xs-11 col-xs-offset-1">col-xs-11 col-xs-offset-1</div>
        <div class="col-xs-11 col-xs-offset-1">col-xs-11 col-xs-offset-1</div>
        <div class="col-xs-9 col-xs-offset-2">col-xs-9 col-xs-offset-2</div>
        <div class="col-xs-5 col-xs-offset-4">col-xs-5 col-xs-offset-4</div>
    </div>

</div>
<!DOCTYPE html>
<html>

<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Learn the bootstrap grid in 15 minutes</title>

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <style>

        body{ padding-top:50px;}

        .row{
            padding: 0 250px;
        }

        .row div{
            background-color: #2196F3;
            height: 50px;
            padding: 15px;
            color: #fff;
        }

        @media(max-width: 992px){

            .row{
                padding: 0 100px;
            }

            .row div{
                height: 25px;
            }
        }

    </style>

</head>

<body>

        <div class="container">

	    <div class="row">
	        <div class="col-xs-5 col-xs-offset-4">col-xs-5 col-xs-offset-4</div>
	        <div class="col-xs-9 col-xs-offset-2">col-xs-9 col-xs-offset-2</div>
	        <div class="col-xs-6 col-xs-offset-1">col-xs-6 col-xs-offset-1</div>
	        <div class="col-xs-4 col-xs-offset-1">col-xs-4 col-xs-offset-1</div>
	        <div class="col-xs-11 col-xs-offset-1">col-xs-11 col-xs-offset-1</div>
	        <div class="col-xs-10">col-xs-10</div>
	        <div class="col-xs-7">col-xs-7</div>
	    </div>
	    <div class="row">
	        <div class="col-xs-5">col-xs-5</div>
	    </div>
	    <div class="row">
	        <div class="col-xs-7">col-xs-7</div>
	        <div class="col-xs-10">col-xs-10</div>
	        <div class="col-xs-11 col-xs-offset-1">col-xs-11 col-xs-offset-1</div>
	        <div class="col-xs-11 col-xs-offset-1">col-xs-11 col-xs-offset-1</div>
	        <div class="col-xs-9 col-xs-offset-2">col-xs-9 col-xs-offset-2</div>
	        <div class="col-xs-5 col-xs-offset-4">col-xs-5 col-xs-offset-4</div>
	    </div>

	</div>

</body>
</html>

7. Push and Pull

The push and pull classes allow us to reorder columns depending on screen size. Push moves a column to the right, and pull to the left. This is different from offset as push and pull use position: relative and don’t shift other columns.

Push and pull classes have the following format: .col-SIZE-push-NUMBER, and .col-SIZE-pull-NUMBER. Possible SIZE values are sm, xs, md and lg. This represents in which of the 4 screen size scenarios we want the swap to occur. NUMBER tells Bootstrap how many positions we want to move.

Hit Run on the code below and resize the pop-out to see how the two cells change places when the window becomes small.

<div class="row">
    <div class="col-xs-4 col-md-push-8">On laptop and desktop screens this text will go to the right and the image will go to the left, changing places.</div>
    <div class="col-xs-8 col-md-pull-4"><img src="city.jpg" class="img-responsive"></div>
</div>
<!DOCTYPE html>
<html>

<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Learn the bootstrap grid in 15 minutes</title>

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <style>

        body{ padding-top:50px;}

    </style>

</head>

<body>

       <div class="container">
	    <div class="row">
	        <div class="col-xs-4 col-md-push-8">On laptop and desktop screens this text will go to the right and the image will go to the left, changing places.</div>
	        <div class="col-xs-8 col-md-pull-4"><img src="http://cdn.tutorialzine.com/wp-content/uploads/2015/10/city.jpg" class="img-responsive"></div>
	    </div>
	</div>

</body>
</html>

Conclusion

Great job! You now know the most important part of the Bootstrap framework, and you’re ready to build your next stellar responsive design. But there is a bit more left to learn to achieve true mastery. Check out Bootstrap’s extensive documentation for more.

Source:: Tutorialzine.com

15 Interesting JavaScript and CSS Libraries for January 2016

By Dimo Raichev

interesting-resources-january

Now is a fantastic time to be a web developer. The community creates lots of new and exciting JavaScript and CSS libraries, so there is always something new to learn and see. Here are some of our favorites, which we think that you should check out in January 2016.


Datedropper

Datedropper is a jQuery plugin which helps you create an interesting way for presenting date fields. It supports 16 languages and all date formats. It has a lot of useful options and eye-catching animation. It is very easy to use – just embed the JavaScript file in your page and initialize the date field with the dateDropper() method.


Drop.js

Drop.js

Drop.js is a useful JavaScript and CSS library for creating dropdowns and floating displays. It’s animated smoothly with CSS and you can embed whatever HTML code you wish in the dropdown.


Vorlon.js

Vorlon.js

Vorlon.js is a cross platform tool, developed by Microsoft, that helps you remotely debug and test your JavaScript. It gives you the ability to remotely connect up to 50 devices and easily test your code on all of them simultaneously. There is also a desktop application, built using Electron, which helps you run your tests from an easy to use graphical app.


Hammer

Hammer

Hammer is an open-source library that recognizes gestures made by touch, mouse and pointer events. It supports complex multi-touch gestures like rotate, pinch and swipe, which makes it possible to develop web apps that can rival the experience that native applications provide.


Vivus

Vivus

Vivus is a JavaScript class that helps you bring your SVGs to life, giving them the appearance of being drawn. It is standalone and has no dependencies. It supports a lot of animation types and timing options, as well as option to script your own animations with JavaScript.


Popmotion

Popmotion

Popmotion is JavaScript motion engine, with physics and input tracking. It gives you a great deal of control over every aspect of your animations. You can define custom easing transitions, pause, reverse and seek animations and more. It supports CSS and SVG animations which work smoothly on any browser.


Animateplus

Animateplus

Animateplus is a CSS and SVG animation library. It works very well on mobile devices, and is perfect for smooth landing pages. You can configure the duration, easing and delay before the animation starts.


Dinamics.js

Dinamics.js

Dinamics.js is JavaScript library that helps you create physics-based animations. It has a lot of useful options like friction, bounciness and elasticity. You can animate all your menus, load elements and buttons. Their website has lots of pretty examples which you can start with.


Gradient Animator

Gradient Animator

Gradient animator is an online tool that helps you generate animated CSS gradients. After you choose options like colors speed and angles, just copy the code that the website gives you and paste it into your stylesheet.


Notie.js

Notie.js

Notie Is clean and simple notification library for JavaScript. It supports many types of notifications including alternatives for the confirm and prompt browser dialogs. The library gives you an easy way to override the way noties look and feel, so you can customize everything to match your design.


OhSnap!.js

OhSnap!.js

OhSnap! Is a simple notification library for jQuery/Zepto. It is designed to work well in both desktop and mobile browsers. It is very easy to integrate into an existing website. To customize it you only need to edit a single .css file.


PurifyCSS

PurifyCSS

Purify is a utility which cleans up your CSS. It has the ability to detect the dynamically-loaded CSS selectors in your JavaScript. It works with single-page as well as multi-page apps.


Wheelnav.js

Wheelnav.js

Wheelnav is JavaScript library, built on SVG, for tab navigation and wheel menus. It has the option to create collapsible pie menus with optional sub menus. Despite that the default appearance is a wheel you can modify your menu easily.


spaceBase

spaceBase

SpaceBase is a Sass-based framework that combines the best responsive practices into ready-to-use boilerplate project. It contains must-haves like a mobile-friendly grid, common ui components like buttons and lists, help classes and mixins and more.


Egg.js

Egg.js

Egg.js is a simple library that helps you add a web easter egg by watching the user’s key strokes. You can add a hook that will run after any egg code is triggered. You can use this to send out a tweet that someone found your easter egg.

Source:: Tutorialzine.com