Posted by info on 9th August 2014
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/
Posted in Scripting | Comments Off on Expanding header and footer
Posted by info on 3rd February 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.
CSSOff 2013 contest
This was the design that had to be converted to a real webpage.

Posted in Scripting | Comments Off on My version of CSSOff 2013
Posted by info on 16th November 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 | Comments Off on Sass mixin for webfont embedding
Posted by info on 16th November 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 | Comments Off on Hgroup obsolete
Posted by info on 18th April 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 | Comments Off on Batch generate rules with color codes from a list of colors with SASS
Posted by info on 9th February 2013
Here is an excel sheet you can use to check your site with the dutch webrules.
webrichtlijnen.xlsx
Posted in Scripting | Comments Off on Webrichtlijnen van de overheid
Posted by info on 22nd November 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.
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 | Comments Off on IBAN – SEPA validation
Posted by info on 12th September 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 | Comments Off on Sass clearfix version
Posted by info on 12th September 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 | Comments Off on Sass Mixin for inline images
Posted by info on 12th September 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 | Comments Off on Sass Mixin for background image with retina support