Please download dana 2.0 font and try it, nothing would like me more. Here I am trying to explain how to use it. I think it has no complication, but I have created it, so I can be very objective. Thanks for using it. I look forward to hearing opinion from you soon.
To get dana 2.0 font you just have to download the files and install them in your website. Is the easiest way to get it done, all you have to do is write in your main page just a single line of code.
Download the current version of the framework for start trying it.
First of all, make sure yourself you have jquery installed in your website. It's included in the framework, but if you start from scratch, there's a posibility you haven't. And if that's the case, you should vinculate the css and js corresponding:
<link rel="stylesheet" href="css/dana_2.0_typography.css">
<script src="js/dana2.0_typography.js"</script>
It's easy to get your first titular done. Just take a look to this code. It seems nothing, but there's a lot behind it. That's what you should write in your html page.
The main characteristic of this font/ framework is the CSS. Everything is written with that. It's the foundation of it.
This is the CSS used to animate the letter "a". I have used SASS, so I'm showing you this code, the CSS is much more longer. This's clearer for present you how it's done.
/*---------- 97 LETTER A ----------*/
.s97_01, .s97_15, .s97_19, .s97_25 {
opacity: 0;
}
g {
&.form {
&.f97 {
&.s97 {
&.s97_02, &.s97_03, &.s97_04, &.s97_05, &.s97_06, &.s97_10, &.s97_11, &.s97_12, &.s97_13, &.s97_14, &.s97_15 {
@include transform(translate(0rem, 4rem)); //UP
}
&.s97_08, &.s97_09, &.s97_16, &.s97_18 {
@include transform(translate(-1rem, 5rem)); //LEFT
}
&.s97_07, &.s97_17 {
@include transform(translate(1rem, 5rem)); //RIGHT
}
}
&.p97 {
&.p97_01, &.p97_04, &.p97_05 {
@include transform(translate(1rem, 4rem)); //RIGHT_UP
}
&.p97_02, &.p97_03, &.p97_06 {
@include transform(translate(-1rem, 4rem)); //LEFT_UP
}
&.p97_07, &.p97_08 {
@include transform(translate(1rem, 5rem)); //RIGHT
}
&.p97_09, &.p97_10 {
@include transform(translate(-1rem, 5rem)); //LEFT
}
}
}
}
}
As you can see, the code is extremely long, so I've used a little script to paint the actual code in the HTML and make it easy to design and custom the website. When you write the code seen previously, the script executes the following function, the code shown below is inserted on the right page on the div previously written. Here it is.
var dana = {};
dana.get_character = function (character, element) {
$(element).append(character);
};
dana_char = [];
This is the skeleton of letter "a", this is how the HTML it should be seen.
Finally, the function is called, to write the code on the indicated page.
dana.get_character(dana_char['d97'], '.d97');