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.
a Blog for frontend Webdevelopers
Expanding header and footer
Posted by info on August 9th, 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
Posted in Scripting | Comments Off on Expanding header and footer
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.
This was the design that had to be converted to a real webpage.
Posted in Scripting | Comments Off on My version of CSSOff 2013
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 | Comments Off on Media queries mixing
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 | Comments Off on Sass mixin for webfont embedding
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 | Comments Off on Hgroup obsolete
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 | Comments Off on Batch generate rules with color codes from a list of colors with SASS
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.
Posted in Scripting | Comments Off on Webrichtlijnen van de overheid
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.
See:Â Stappenplan-De-Europese-Overschrijving for dutch migration information.
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
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 | Comments Off on Sass clearfix version
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 | Comments Off on Sass Mixin for inline images