STYLE SWITCHER

HTML 5

Making Responsive HTML Email Coding Easy With MJML

MJML is a markup language designed to reduce the pain of coding a responsive email. Its semantic syntax makes it easy and straightforward and its rich standard components library speeds up your development time and lightens your email codebase. MJML’s open-source engine generates high quality responsive HTML compliant with best practices.

Overview

MJML rolls up all of what Mailjet has learned about HTML email design over the past few years and abstracts the whole layer of complexity related to responsive email design. Get your speed and productivity boosted with MJML’s semantic syntax. Say goodbye to endless HTML table nesting or email client specific CSS. Building a responsive email is super easy with tags such as <mj-section> and <mj-column>. MJML has been designed with responsiveness in mind. The abstraction it offers guarantee you to always be up-to-date with the industry practices and responsive. Email clients update their specs and requirements regularly, but we geek about that stuff - we’ll stay on top of it so you can spend less time reading up on latest email client updates and more time designing beautiful email.
<mjml>
	<mj-head>
		<!-- Head components go here: https://mjml.io/documentation/#standard-head-components -->
	</mj-head>

	<!-- All of the content of our email will go in mj-body -->
	<mj-body>
		<!-- mj-container defines the default styling of our email, including the default width, set to 600px but overwritable -->
		<mj-container>
			<!-- Body components go here (https://mjml.io/documentation/#standard-body-components) -->
		</mj-container>
	</mj-body>
</mjml>
Website  
More

Dynamic Page / Replacing Content – jQuery

Let's say you wanted to make a website where clicking buttons in the nav would dynamically load some content. Kind of like the organic tabs thing, only the content is loaded dynamically. Say something like this:

The HTML: It all works without JavaScript

There is no excuse for the navigation of a website to be completely broken without JavaScript enabled. So the best approach here is just to create these pages and the navigation as plain ol' semantic HTML. You know, like it's 2001. The navigation links to the files that contain that content, and are fully formed functional pages on their own.
<nav>
    <ul>
        <li><a href="index.php">Home</a></li>
        <li><a href="about.php">About</a></li>
        <li><a href="contact.php">Contact</a></li>
    </ul>
</nav>
Demo Website
More

Responsive Parallax Drag-Slider With Transparent Letters

A tutorial about creating responsive drag slider with parallax effect and transparent letter effect by using javascript, css.
Website
More

Bootstrap Dropdown Slidemorph Menu

Bootstrap Dropdown Slidemorph Menu inspired by Youtube context menus within a video player. Transitions between submenus create very neat experience. Also, menu provides information about selected values for each item.
Website
More

MenuSpy – Javascript Library to Highlight Menu Item Based On Scroll Position

MenuSpy is a JavaScript library to make navigation menus highlight the item based on currently in view section.
[otw_shortcode_button href="https://leocs.me/menuspy/#features" size="medium" icon_position="left" shape="square" css_class="codehints-post" target="_blank"]Website[/otw_shortcode_button]  
More

Custom Checkbox using SASS

Styling default checkbox using SASS.
<div class="custom-checkbox">
    <label>
        <input type="checkbox" name="">                                                   
        <span class="checkbox-icon"></span>
        <span class="checkbox-text">Select</span>
   </label>
</div>                 

Color Variables

$primary_color    : #000;
$fonts_1          : FontAwesome;

Mixins

@mixin transition($transition...){
  transition: $transition;
  -webkit-transition: $transition;
  -moz-transition: $transition;
  -ms-transition: $transition;
  -o-transition: $transition;
}

SASS Structure


.custom-checkbox{
	position: relative;
	display: inline-block;
	min-height: 19px;
	padding: 0px 0px 0px 27px;

	label{
		margin: 0;
		padding: 0;
		display: block;
	}
	.checkbox-icon{
		width: 19px;
		height: 19px;
		display: block;
		background: lighten($primary_color, 95%);
		border: lighten($primary_color, 80%) 1px solid;
		position: absolute;
		top: 0px;
		left: 0px;
		text-align: center;

		&::before{
			content: "\f00c";
			font-family: $fonts_1;
			font-size: 13px;
			color: lighten($primary_color, 40%);
			display: block;

			opacity: 0;
			filter: alpha(opacity=0);

			transform: translate(4px, 0px);
			-webkit-transform: translate(4px, 0px);
			-moz-transform: translate(4px, 0px);
			-ms-transform: translate(4px, 0px);
			-o-transform: translate(4px, 0px);

			@include transition(all ease 0.2s);
		}
	}
	input{
		display: none;

		&:checked + span.checkbox-icon{

			&::before{
				opacity:1;
				filter: alpha(opacity=100);

				transform: translate(0px, 0px);
				-webkit-transform: translate(0px, 0px);
				-moz-transform: translate(0px, 0px);
				-ms-transform: translate(0px, 0px);
				-o-transform: translate(0px, 0px);
			}
		}
	}

	.checkbox-text{
		font-size: 14px;
		padding-top: 1px;
	}
}
More

Pixi js

PixiJS - The HTML5 Creation Engine. Create beautiful digital content with the fastest, most flexible 2D WebGL renderer.
[otw_shortcode_button href="http://www.pixijs.com/" size="medium" icon_position="left" shape="square" css_class="codehints-post" target="_blank"]Website[/otw_shortcode_button]  
More

Table Dragger – Create ReOrderable Drag & Drop Table with Javascript

Table Dragger is a minimalist plain Table-dragger is a minimalist plain Javascript library for building reorderable drag-and-drop table.
[otw_shortcode_button href="https://sindu12jun.github.io/table-dragger/" size="medium" icon_position="left" shape="square" css_class="codehints-post" target="_blank"]Website[/otw_shortcode_button] [otw_shortcode_button href="https://github.com/sindu12jun/table-dragger" size="medium" icon_position="left" shape="square" css_class="codehints-example" target="_blank"]Download[/otw_shortcode_button]  
More

Huebee – One-Click Color Picker with Javascript

huebee-brand
Huebee is a JavaScript library for creating user-centric color pickers. Huebee displays a limited set of colors so users view all colors at a glance, make clear decisions, and select a color with a single click. Huebee has open-source license for personal usage.
Website
More

Uppy – Open Source File Uploader for Web Browsers

uppy
Uppy is (going to be) a JavaScript file uploader that fetches files from Dropbox, Instagram, local disk, remote URLs, and other exciting locations. It has a plugin-based architecture, first-class support for resumable uploads according to the open standard: tus, and custom encoding backends, making it extensible and robust.
Website More Info
More