Frontendplace Blog

Sharing Frontend developing ideas

a Blog for frontend Webdevelopers

This frontendplace aims to offer web development and 3D modelling tutorials, tips and tricks. Written by a web-developer and multimedia consultant who is passionate about web standards, webdevelopment and 3D visualisation.

My version of CSSOff 2013

Posted by info on February 3rd, 2014

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.

fadingaway imageCSSOff 2013 contest

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

contestdesign

Posted in Scripting | No Comments »

Media queries mixing

Posted by info on November 16th, 2013

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;
    }
}

Posted in 3D Tutorials | No Comments »

Sass mixin for webfont embedding

Posted by info on November 16th, 2013

// example @include webfont("MyFontname-Regular","fonts","myfontname-regular","italic","300");
@mixin webfont($font-family,$font-url,$font-name,$style: normal, $weight: normal){  
    @font-face {

        font: {
                family: $font-family;
                style: unquote($style);
                weight:  unquote($weight);
            }
        src: url($font-url + '/' + $font-name + '.eot'); //IE9
        src: url($font-url + '/' + $font-name + '.eot?#iefix') format("embedded-opentype"), //IE6-8
             url($font-url + '/' + $font-name + '.woff') format("woff"), // modern browsers
             url($font-url + '/' + $font-name + '.ttf') format("truetype")  // safari android ios
             url($font-url + '/' + $font-name + '.svg#' + $font-name) format("svg"); //legacy ios
    }
}

Posted in Scripting | No Comments »

Hgroup obsolete

Posted by info on November 16th, 2013

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:

Posted in Scripting | No Comments »

Batch generate rules with color codes from a list of colors with SASS

Posted by info on April 18th, 2013

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;
}...

Posted in Scripting | No Comments »

Webrichtlijnen van de overheid

Posted by info on February 9th, 2013

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

webrichtlijnen.xlsx

Posted in Scripting | No Comments »

IBAN – SEPA validation

Posted by info on November 22nd, 2012

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:

Landcode Controle Bank ID Rekeningnummer
XX XX XXXX XXXXXXXXXX
NL 45 ABNA 0123456789

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 use javascript to validate the number you have to consider the following: Javascript cannot handle 30 characters mod calculation and therefore the Mod97 test is done in parts (see http://www.tbg5-finance.org/?ibandocs.shtml and http://en.wikipedia.org/wiki/International_Bank_Account_Number#Example_of_IBAN_check_digit_test)).
See: Stappenplan-De-Europese-Overschrijving for dutch migration information.
SEPA (de Single Euro Payments Area) isan organisation that controls the migration for EURO payment countries. Also Non-EU countries and EU-members are organized in SEPA.
Country Countrycode Length BBAN Format BBAN test Sepa
Austria AT 20 16n \d{16}  Euro
Belgium BE 16 12n \d{12}  Euro
Cyprus CY 28 8n,16c \d{8}[a-zA-Z0-9]{16}  Euro
Estonia EE 20 16n \d{16}  Euro
Finland FI 18 14n \d{14}  Euro
France FR 27 10n,11c,2n \d{10}[a-zA-Z0-9]{11}\d{2}  Euro
Germany DE 22 18n \d{18}  Euro
Greece GR 27 7n,16c \d{7}[a-zA-Z0-9]{16}  Euro
Ireland IE 22 4c,14n [a-zA-Z0-9]{4}\d{14}  Euro
Italy IT 27 1a,10n,12c [A-Z]{1}\d{10}[a-zA-Z0-9]{12}  Euro
Luxembourg LU 20 3n,13c \d{3}[a-zA-Z0-9]{13}  Euro
Malta MT 31 4a,5n,18c [A-Z]{4}\d{5}[a-zA-Z0-9]{18}  Euro
Netherlands NL 18 4a,10n [A-Z]{4}\d{10}  Euro
Portugal PT 25 21n \d{21}  Euro
Slovakia SK 24 20n \d{20}  Euro
Slovenia SI 19 15n \d{15}  Euro
Spain ES 24 20n \d{20}  Euro
Bulgaria BG 22 4a,6n,8c [A-Z]{4}\d{6}[a-zA-Z0-9]{16}  Member
Czech Republic CZ 24 20n \d{20}  Member
Denmark DK 18 14n \d{14}  Member
Hungary HU 28 24n \d{24}  Member
Latvia LV 21 4a,13c [A-Z]{4}[a-zA-Z0-9]{13}  Member
Lithuania LT 20 16n \d{16}  Member
Poland PL 28 24n \d{24}  Member
Romania RO 24 4a,16c [A-Z]{4}[a-zA-Z0-9]{16}  Member
Sweden SE 24 20n \d{20}  Member
United Kingdom GB 22 4a,14n [A-Z]{4}\d{14}  Member
Iceland IS 26 22n \d{22}  Non-Eu
Liechtenstein LI 21 5n,12c \d{5}[a-zA-Z0-9]{12}  Non-Eu
Monaco MC 27 10n,11c,2n \d{10}[a-zA-Z0-9]{11}\d{2}  Non-Eu
Norway NO 15 11n \d{11}  Non-Eu
Switzerland CH 21 5n,12c \d{5}[a-zA-Z0-9]{12}  Non-Eu
Albania AL 28 8n, 16c \d{8}[a-zA-Z0-9]{16}
Andorra AD 24 8n,12c \d{8}[a-zA-Z0-9]{12}
Azerbaijan AZ 28 4c,20n [a-zA-Z0-9]{4}\d{20}
Bahrain BH 22 4a,14c [A-Z]{4}[a-zA-Z0-9]{14}
Bosnia and Herzegovina BA 20 16n \d{16}
Costa Rica CR 21 17n \d{17}
Croatia HR 21 17n \d{17}
Dominican Republic DO 28 4a,20n [A-Z]{4}\d{20}
Faroe Islands FO 18 14n \d{14}
Georgia GE 22 2c,16n [a-zA-Z0-9]{2}\d{16}
Gibraltar GI 23 4a,15c [A-Z]{4}[a-zA-Z0-9]{15}
Greenland GL 18 14n \d{14}
Guatemala GT 28 4c,20c [a-zA-Z0-9]{4}[a-zA-Z0-9]{20}
Israel IL 23 19n \d{19}
Kazakhstan KZ 20 3n,13c \d{3}[a-zA-Z0-9]{13}
Kuwait KW 30 4a, 22c [A-Z]{4}[a-zA-Z0-9]{22}
Lebanon LB 28 4n,20c \d{4}[a-zA-Z0-9]{20}
Macedonia MK 19 3n,10c,2n \d{3}[a-zA-Z0-9]{10}\d{2}
Mauritania MR 27 23n \d{23}
Mauritius MU 30 4a,19n,3a [A-Z]{4}\d{19}[A-Z]{3}
Moldova MD 24 2c,18n [a-zA-Z0-9]{2}\d{18}
Montenegro ME 22 18n \d{18}
Pakistan PK 24 4c,16n [a-zA-Z0-9]{4}\d{16}
Palestinian Territory, Occupied PS 29 4c,21n [a-zA-Z0-9]{4}\d{21}
San Marino SM 27 1a,10n,12c [A-Z]{1}\d{10}[a-zA-Z0-9]{12}
Saudi Arabia SA 24 2n,18c \d{2}[a-zA-Z0-9]{18}
Serbia RS 22 18n \d{18}
Tunisia TN 24 20n \d{20}
Turkey TR 26 5n,17c \d{5}[a-zA-Z0-9]{17}
United Arab Emirates AE 23 3n,16n \d{3}\d{16}
Virgin Islands, British VG 24 4c,16n [a-zA-Z0-9]{4}\d{16}

Posted in Scripting | No Comments »

Sass clearfix version

Posted by info on September 12th, 2012

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;
}

Posted in Scripting | No Comments »

Sass Mixin for inline images

Posted by info on September 12th, 2012

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;
}

Posted in Scripting | No Comments »

Sass Mixin for background image with retina support

Posted by info on September 12th, 2012

Here is an example for a sass stylesheet. to support Retina display images. This example only support .png images where the basename of the image is passed to the mixin as variable.

@mixin retina {
  @media (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 1.5dppx) {
    @content;
  }
}

@mixin generic-background-image($image) {
	background: image-url("#{$image}.png");
	  @include retina {
	    background: image-url("#{$image}@2X.png");
	}
}

h1 {
	@include generic-background-image("content");
}

This will generate:

h1 {
  background: url('../images/content.png');
}
@media (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3 / 2), (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 1.5dppx) {
  h1 {
    background: url('../images/content@2X.png');
  }
}

Posted in Scripting | No Comments »