Motion Design – slides

I made a slide about Motion Design – you can view it here

https://doсs.google.com/presentation/d/1xycVCpGnVgz1VAnO0iaXDP7bc8K8bfl3JXZLiDvkDws/

Favorite material design button with or without JS

I am having fun creating things at Codepen.io.

I have created a toggle button with JS and without using JS.
For the non-JS version I used the radio-button hack technique with stacked radio buttons.

Without JS

 

With JS

Being creative – Making logos with css

My latest hobby is to find logos as images and re-create them with css and responsive design.
I have added mouse over effects to make the logos dynamic.
You can resize the width of the browser window and you should see the logos adapts to the screen width.

Build for modern browsers, tested with latest Chrome and Firefox
(I don’t want to spend too much time with browser-testing in my leisure time).

Here are some of the results.

Working with Sass and Media Queries

If you want responsive design and use Sass you could do this. Setup your break points
(this post is similar to my Less post, but with Sass this time).

Setup Sass and Media Queries

/* Setup */
$device-extra-small-width: 480px;
$device-small-width: 768px;
$device-medium-width: 992px;
$device-large-width: 1200px;

@mixin device-extra-small {
 @media (min-width: #{$device-extra-small-width}) { @content; }
}
@mixin device-small {
 @media (min-width: #{$device-small-width}) { @content; }
}
@mixin device-medium {
 @media (min-width: #{$device-medium-width}) { @content; }
}
@mixin device-large {
 @media (min-width: #{$device-large-width}) { @content; }
}

When you want to apply responsive design for a component you structure the Media Queries like this.

Html

<div class='responsive-component'>
  sass and media queries example
</div>

Sass

/* Usage */
.responsive-component {
  
   /* default is device-extra-extra-small */
   font-size: 100%;
   background: tomato;

   @include device-extra-small {
    font-size: 120%;
    background: aqua;
  }
   @include device-small {
    font-size: 140%;
    background: orange;
  }
  @include device-medium {
    font-size: 160%;
    background: lime;
  }
  @include device-large {
    font-size: 180%;
    background: yellow;
  }
}

Here is a demo. Edit on Codepen, resize the browser horizontally and see how the content changes.

Reference reading:

• https://css-tricks.com/approaches-media-queries-sass/
• http://thesassway.com/intermediate/responsive-web-design-in-sass-using-media-queries-in-sass-32
• http://davidwalsh.name/write-media-queries-sass
• http://include-media.com/

Working with Less and Media Queries

If you want responsive design and work with LESS you could do this. Setup your break points.

@extra-small: ~" (min-width: 480px)";
@small: ~" (min-width: 768px)";
@medium: ~" (min-width: 992px)";
@large: ~" (min-width: 1200px)";


 


Then when you want to apply responsive design for a component you structure the media queries like this.

.spot-basic {
	font-size: 120%; /* extra extra small is default */

	@media @extra-small {
		font-size: 130%;
	}

	@media @small {
		font-size: 140%;
	}

	@media @medium {
		font-size: 150%;
	}

	@media @large {
		font-size: 160%;
	}
}


 


Here is a demo. Edit on Codepen, resize the browser horizontally and see how the content changes.


 


Reference reading:

• https://www.vodori.com/blog/use-less-media-query-variables-responsive-design/
• http://codepen.io/ericrasch/full/HzoEx/