Less is More!
Well, I’ve made up my mind that less.js is pretty sweet. While, I still have to figure out my way around getting specific things to work with other browsers as well as learn more about CSS Positioning, this is simply the easiest way to organize CSS. Here’s a couple of cheesy layouts I made using different color schemes and fonts using @font-face.
Click pic to view fullscreen.
Click pic to view fullscreen.
My CSS
@design_color1: #414F7F; /* BLUE */
@design_color2: #686D7F; /* GREY */
@design_color3: #839EFF; /* LIGHT BLUE */
@design_color4: #CFDAFF; /* LIGHT GREY */
@design_color5: #A6AECC; /* GREYISH BLUE */@font1: Arista EF; /* Arista Extra Filled */
@font2: Bobble; /* Bobble Body */
@font3: Disko; /* Disko */
@font4: Husky Stash; /* Husky Stash */
@font5: Chocolate Box; /* Chocolate Box */
@font6: Star Avenue; /* Star Avenue */@font-face {
font-family: @font1;
src: url(/fonts/Bobbleboddy.ttf) format(‘woff’);
}@font-face {
font-family: @font2;
src: url(/fonts/Disko.ttf) format(‘woff’);
}@font-face {
font-family: @font3;
src: url(/fonts/%5bz%5d%20Arista%20ExtraFilled.ttf) format(‘woff’);
}Now for an example:
p {
font-family: @font1;
color: @design_color4;
text-align: justify;
margin-left: 300px;
margin-right: 300px;
padding-top: 1.5em;
}
