Software Programming

Kunuk Nykjaer

Archive for the ‘Css’ Category

Motion Design – slides

leave a comment »

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

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

Written by kunuk Nykjaer

August 22, 2016 at 10:03 am

Posted in Css, Design, Javascript

Tagged with

Favorite material design button with or without JS

leave a comment »

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

Written by kunuk Nykjaer

March 10, 2016 at 4:57 pm

Posted in Css, Javascript, Visualization

Tagged with

Being creative – Making logos with css

leave a comment »

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.

Written by kunuk Nykjaer

April 4, 2015 at 10:15 pm

Posted in Css, Visualization

Tagged with ,

Working with Sass and Media Queries

leave a comment »

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:

Written by kunuk Nykjaer

March 15, 2015 at 2:14 pm

Posted in Css

Tagged with

Working with Less and Media Queries

with one comment

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:

Written by kunuk Nykjaer

February 11, 2015 at 2:01 pm

Posted in Css

Tagged with

From json data to responsive design example

leave a comment »

Synopsis:

Somebody (your boss or customer) comes to you and says:
‘Create a web page which displays this data and the design must be responsive. I will give you a REST API to a service.’

If you work with front-end tasks, you probably would now be thinking JavaScript templating, Media queries and a JavasScript library to work with the REST API (maybe jQuery?).

In my previous blog I gave hello world code demo of Handlebars. I will continue with Handlebars and this time use data from an external source and also think in responsive design.

All these wonders (freely) available in the Internet available. I Use:

  • WordPress.com for blogging
  • Gist for sharing code samples
  • Codepen.io for making web page prototypes
  • Various Javascript libraries to help me ‘get the job done’


For this example I will use.


 

Demo

Try to resize the screen width and see how the content adapts.


 

Data structure

This is the given data source structure which is to be parsed and rendered on a web page. A list of news with title, date, link, author and categories.


 

Styling

Mobile first approach. Style for smallest device first and gradually adjust the styling for the larger devices. The breakpoint sizes are the same as used in the Bootstrap 3 framework.

Literally make your browser the same width as the smallest device. Start the styling with that size. You will notice there are not much space. Usually that means you use all the width space available and stack the items below each other. You focus on the the essential which is (usually) the content. You hide or minimize navigational items, minimize images, cut part of content or designs which are less important.
For the increasing screen sizes the items can be aligned horizontally and there are more rooms for adding ’empty’ spaces, larger images, bigger menus. That’s the usual approach.

As you go up in screen size override the styling. Here I have added debug information of the target device.
e.g.

#rendered .title::after {
    content: ' - Phone';
}

I start with 100% width (default value). As the devices increases the text size increases and the width percentage reduces.


 

Markup

This is more or less the same as my Helloworld example. The markup is the template.


 

Scripting

Here I fetch the data and parse it to the template and add a couple of Handlebars formatter helpers. In case something goes wrong I use stub data to render the display.

 

Written by kunuk Nykjaer

January 10, 2015 at 10:32 pm

Attach a css file to any webpage dynamically

leave a comment »

Here’s a trick for applying a custom css file to any webpage.
Have a css file available (here i use Github to host my css file).

In the browser console run the following code.
The result should be white text on black background

Try go to http://en.wikipedia.org and run the snippet code.
You should see white text on black background.

Written by kunuk Nykjaer

December 16, 2014 at 1:34 pm

Posted in Css, Javascript

Tagged with