STYLE SWITCHER

HTML 5

Media queries

Media queries

A media query consists of an optional media type and zero or more expressions that limit the style sheets' scope by using media features, such as width, height, and color. Media queries, added in CSS3, let the presentation of content be tailored to a specific range of output devices without having to change the content itself.

Syntax

Media queries consist of an optional media type and can, as of the CSS3 specification, contain zero or more expressions, expressed as media features, which resolve to either true or false. The result of the query is true if the media type specified in the media query matches the type of device the document is being displayed on and all expressions in the media query are true.
<!-- CSS media query on a link element -->
<link rel="stylesheet" media="(max-width: 800px)" href="example.css" />

<!-- CSS media query within a stylesheet -->
<style>
@media (max-width: 600px) {
  .facet_sidebar {
    display: none;
  }
}
</style>

When a media query is true, the corresponding style sheet or style rules are applied, following the normal cascading rules. Style sheets with media queries attached to their tags will still download even if their media queries would return false (they will not apply, however).

Unless you use the not or only operators, the media type is optional and the all type will be implied.

Logical operators

You can compose complex media queries using logical operators, including not, and, and only. The and operator is used for combining multiple media features together into a single media query, requiring each chained feature to return true in order for the query to be true. The not operator is used to negate an entire media query. The only operator is used to apply a style only if the entire query matches, useful for preventing older browsers from applying selected styles. If you use the not or only operators, you must specify an explicit media type.

You can also combine multiple media queries in a comma-separated list; if any of the media queries in the list is true, the entire media statement returns true. This is equivalent to an or operator.

The and keyword is used for combining multiple media features together, as well as combining media features with media types. A basic media query, a single media feature with the implied all media type, could look like this:

@media (min-width: 700px) { ... }
If, however, you wanted this to apply only if the display is in landscape, you could use an and operator to chain the media features together.
@media (min-width: 700px) and (orientation: landscape) { ... }
Now the above media query will only return true if the viewport is 700px wide or wider and the display is in landscape. If, however, you only wanted this to apply if the display in question was of the media type TV, you could chain these features with a media type using an and operator.
@media tv and (min-width: 700px) and (orientation: landscape) { ...  }

Now, the above media query will only apply if the media type is TV, the viewport is 700px wide or wider, and the display is in landscape.

Read more
More
Moon – A minimal, blazing fast user interface library.

Moon – A minimal, blazing fast user interface library.

A minimal, blazing fast user interface library. Weighing in at 5kb minified + gzipped, Moon is one of the lightest libraries out there.
Website
More
Styletron – Universal, High Performance JavaScript Styles

Styletron – Universal, High Performance JavaScript Styles

Styletron is a universal CSS-in-JS engine built from the ground up for high-performance.
Website
More
Making Responsive HTML Email Coding Easy With MJML

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

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

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

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 – 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.
Website
More
Custom Checkbox using SASS

Custom Checkbox using SASS

Styling default checkbox using SASS.

HTML

<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

Pixi js

PixiJS - The HTML5 Creation Engine. Create beautiful digital content with the fastest, most flexible 2D WebGL renderer.
Website
More