Frontendplace Blog

Created a fiddle to display a navbar or header when scrolling down. And disapear on scrolling up. when reaching the top it appears again. The footer grows when reached the end of the page

see: http://jsfiddle.net/frontendplace/arnfnv4e/

See my version of the CSSoff 2013 contest. The submission is closed and no information can be found right this moment of creation of this post at (http://www.unmatchedstyle.com/cssoff/). Unfortunately I could not upload this to my codepen account to submit my version to the contest.

CSSOff 2013 contest

This was the design that had to be converted to a real webpage.

Here are some examples of media query mixins i use to generate the media queries needed for different viewport sizes:

@mixin respond-min($width) {
    // If we're outputting for a fixed media query set...
    @if $fixViewport {
        // ...and if we should apply these rules...
        @if $fixViewport >= $width {
            // ...output the content the user gave us.
            @content;
        }
    }
    @else {
        // Otherwise, output it using a regular media query
        @media screen and (min-width: $width) {
            @content;
        }
    }
}

@mixin respond-max($width) {
    // If we're outputting for a fixed media query set...
    @if $fixViewport {
        // ...and if we should apply these rules...
        @if $fixViewport < $width {
            // ...output the content the user gave us.
            @content;
        }
    }
    @else {
        // Otherwise, output it using a regular media query
        @media screen and (max-width: $width) {
            @content;
        }
    }
}

// mixins Styles for Old IE:

$oldIE: false !default;

@mixin oldIE {
    // Only use this content if we're dealing with old IE
    @if $oldIE {
        @content;
    }
}

// Only use this content if we're NOT dealing with old IE
@mixin modern{
    @if $oldIE == false{
        @content;
    }
}

For those that have not yet seen the update for obsolete elements for the HTML5 specs. The hgroup we just starting to use is already obsolete. see:

Sometimes you need a list of selectors based under different environments and every environment has its own body class. If you need to make a lot of selectors with different colors for every environment it is best to set the list of colors and a list of environments in variables and let sass generate the color rules for every environment.

example:
// first we set the variables:
$darkcolor-df :#E17000; // rgb(225, 112, 0) portaal Defensie bar oranje
$lightcolor-df :#F6D4B2; //Defensie border licht oranje

$darkcolor-km: #0E61AA; //KM bar/border Blauw
$lightcolor-km: #E1EBF4; //.. KM lichtblauw

$darkcolor-kl: #00423C; // KLandmacht bar groen
$lightcolor-kl: #DFE7E7; // KLandmacht border lichtblauw
…

calling mixin
@include envcolor(background-color, ‘dark’, ‘#navigation .selected a,#navigation .selected a:visited’);

Mixin:

/* -----------------------------------
    mixin for setting the light or dark color per environment
    input param selector 	type:list of strings 	selector string(s) after the environment class
				prop 		type:style property
				clr 		type:string 	dark | light | #000000 colorcode
   ----------------------------------*/
@mixin envcolor($prop, $clr, $selector) {
	$env:  kl, klu, kmar, cmc, dmo;
	$darkcolors: $darkcolor-kl,$darkcolor-klu,$darkcolor-kmar,$darkcolor-cmc,$darkcolor-dmo;
	$lightcolors: $lightcolor-kl,$lightcolor-klu,$lightcolor-kmar,$lightcolor-cmc,$lightcolor-dmo;
	/* #{$clr} */
	@for $i from 1 through length($env) {
        $portal: nth($env, $i);
        $color: #{$clr}  !default;
		
        @if ('#{$clr}'=='dark') {
        	/* #{$portal} dark */
        	$color: nth($darkcolors, $i);
        }
        @else if ('#{$clr}'=='light'){
        	/* #{$portal} light */
            $color: nth($lightcolors, $i);
        } @else {
        	 $color: #{$clr};
        }
		.#{$portal} {
			#{$selector} {
			  	#{$prop} :#{$color};
			}
		}
    }
}

Generates:


/* dark */
/* df dark */
.df #navigation .selected a, .df #navigation .selected a:visited {
background-color: #e17000;
}

/* km dark */
.km #navigation .selected a, .km #navigation .selected a:visited {
background-color: #0e61aa;
}

/* kl dark */
.kl #navigation .selected a, .kl #navigation .selected a:visited {
background-color: #00423c;
}

/* klu dark */
.klu #navigation .selected a, .klu #navigation .selected a:visited {
background-color: #005187;
}...

Here is an excel sheet you can use to check your site with the dutch webrules.

webrichtlijnen.xlsx

In Februari 2014 all incasso payments must be done with the IBAN bank account numbers and all the webshops should consider the impact of these changes. All the banks and insurance companies already are migrating now.

So I would like to give some information here about some technical information for programmers that need to validate the numbers when updating payment software.

IBAN (International Bank Account Number) is an international standard for bankaccount numbers.(ISO13616) . The number consist of the following parts:

• ISO countrycode;
• Checksum number;
• Bankidentity;
• Bankaccountnumber at the local bank;

The IBAN starts with two country characters and two checksum digits
The IBAN is maximum 34 characters in length. The Bank identity and Bank accountnumber together is the BBAN. Each country has its own pattern of BBAN.

The Dutch IBAN is 18 character long and looks like this:

The Dutch bankidentity consists of 4 letters of the BIC code of the bank where the account is held.

Examples:

NL05 INGB 0661 0950 88
NL91 ABNA 0417 1643 00
NL54 RABO 0387 7819 00

So how do you need to check  the IBAN

The IBAN check is done by converting the number first by placing the country code and checksum at the end of the string value, replacing all characters with numbers (A=10, B=11 etc) and performing a BBAN test and Mod97 test. The resulting remainer should be 1.

Before the validation starts all spaces need to be removed and the characters are capitalized.
The following checks can be done:

• The code is not longer than 34 characters
• The IBAN contains only a-z, A-Z, 9-0
• The first characters must be: letter letter digit digit
• The check digits of IBAN cannot be 00,01 or 99.
• The length of IBAN is checked according to the country BBAN.
• The country structure of IBAN is checked according to the country BBAN.
• A Mod97 test (ISO7064) is performed on a ISO13616 prepared IBAN digitstring.

If you want sass to generate the classes to be generated to support “clearfix”  (clearing all the floats of previous content to be sure the element is always rendered at a new clear line). With the newest sass compiler you can use placeholders that are not generated until they are used  and can be extended.

%clearfix {
	zoom: 1;
	&:before,
	&:after {
	  content: '\0020';
	  display: block;
	  overflow: hidden;
	  visibility: hidden;
	  width: 0;
	  height: 0;
	}
	&:after {
	  clear: both;
	}
}
.container {
  @extend %clearfix;
  text-align: left;
}
.footer {
  @extend %clearfix;
  text-align: center;
}

This will generate:

.container, .footer {
  zoom: 1;
}
.container:before, .footer:before, .container:after, .footer:after {
  content: '\0020';
  display: block;
  overflow: hidden;
  visibility: hidden;
  width: 0;
  height: 0;
}
.container:after, .footer:after {
  clear: both;
}
.container {
  text-align: left;
}
.footer {
  text-align: center;
}

An inline image is an image that is generated as base64 string inside the stylesheet. But this is not supported by IE6 if you want to support both you can use the * hack for IE6 like this:

@import "compass";
@mixin inline-image($url, $repeat:repeat){
  background: inline-image($url) $repeat;
  *background: image-url($url) $repeat;
}
.facebook {
  width: 34px;
  height: 34px;
  @include inline-image("icons/facebook.png",no-repeat);
}

And generates:
.facebook {
width: 34px;
height: 34px;
background: url(‘data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAAAiCAYAAAA6RwvCAAAFbUlEQVR4XrWXT4hd…’) no-repeat;
*background: url(‘../images/icons/facebook.png?1346742026’) no-repeat;
}