Tag Archive: web design

Write CSS3 with Understandable Variables with LessPHP – Part 2 (Updated)

LessPHP

Update: I updated the code to add more explanation on the Flexible Box Model related properties.

LessPHP provides CSS stylesheet to have variables for reducing repeatable code in order to improve productivity.

In the last part, I talked about how to installing the LessPHP and general folder structure of an one-page web app using LessPHP. This part I will provide you with var.less which includes some CSS3 properties discussed in this post on Nettuts+.

Note that all of the code used LessPHP and CSS3 syntax. If you don’t understand the LessPHP syntax yet, here is its full documentation.

@bg-color(@color:red) {
 background-color: @color;
}

@bg-size(@xWidth:100%;@yWidth:100%) {
 background-size: @xWidth @yWidth;
 -o-background-size: @xWidth @yWidth;
 -webkit-background-size: @xWidth @yWidth;
 -moz-background-size: @xWidth @yWidth;
}

@border-radius(@radius:4px) {
 border-radius: @radius;
 -webkit-border-radius: @radius;
 -moz-border-radius: @radius;
}

 // Accepts start, end, center, baseline, stretch. Default to stretch
@box-align(@align:center) {
 -moz-box-align: @align;
 -webkit-box-align: @align;
 box-align: @align;
}

 // Accepts horizontal, verticle, inherit. Default to horizontal
@box-orient(@orientation:horizontal) {
 -moz-box-orient: @orientation;
 -webkit-box-orient: @orientation;
 box-orient: @orientation;
}

 // Accepts start, end, center, justify. Default to start
@box-pack(@pack:center) {
 -moz-box-pack: @pack;
 -webkit-box-pack: @pack;
 box-pack: @pack;
}

@box-shadow(@x:1px;@y:1px;@blur:3px;@color:#292929) {
 -webkit-box-shadow: @x @y @blur @color;
 -moz-box-shadow: @x @y @blur @color;
 box-shadow: @x @y @blur @color;
}

@box-shadow-multi(@shadows:1px 1px 3px green, -1px -1px 3px blue) {
 -webkit-box-shadow: @shadows;
 -moz-box-shadow: @shadows;
 box-shadow: @shadows;
}

@center {
 display: -moz-box;
 display: -webkit-box;
 display: box;
 @box-orient;
 @box-pack;
 @box-align;
}

@columns {
 display: -moz-box;
 display: -webkit-box;
 display: box;
 @fill(@fill:1) {
 box-flex: @fill; // Accepts either 0 to be as is or an integer to fill the entire area of parent box
 -moz-box-flex: @fill;
 -webkit-box-flex: @fill;
 }
}

 // This is the test/default styles
@defaults {
 @dimension;
 @bg-color;
 @center;
}

@dimension(@width:100px; @height:100px) {
 width: @width;
 height: @height;
}

@resize(@direction:both) {
 resize: @direction; // Value can be both, horizontal, vertical, or none
 -moz-resize: @direction;
 -webkit-resize: @direction;
}

@rotate(@rotateX:rotateX(0deg);@rotateY:rotateY(0deg);@rotateZ:rotateZ(0deg)) {
 transform: @rotateX @rotateY @rotateZ;
 -webkit-transform: @rotateX @rotateY @rotateZ;
 -moz-transform: @rotateX @rotateY @rotateZ;
}

@text-outline(@outterColor:black;@innerColor:white) {
 text-shadow: 0 1px 0 @outterColor, 0 -1px 0 @outterColor, 1px 0 0 @outterColor, -1px 0 0 @outterColor;
 color: @innerColor
}

@text-overflow{
 .on(@type:ellipsis;@width:500px) {
 text-overflow: @type; // text-overflow accepts two values: ellipsis, and clip which didn't seem to work in Chrome
 -o-text-overflow: @type;
 width: @width;
 overflow:hidden;
 white-space:nowrap;
 }
 .off {
 white-space: normal;
 width:100%;
 }
}

@text-shadow(@x:1px;@y:1px;@blur:3px;@color:blue) {
 text-shadow: @x @y @blur @color;
}

@text-stroke(@length:3px;@outterColor:black;@innerColor:white) {
 -webkit-text-stroke: @length @outterColor;
 color: @innerColor;
}

@transition(@property:padding;@duration:0.4s;@easing:ease-in) {
 -webkit-transition: @property @duration @easing;
 -moz-transition: @property @duration @easing;
 -o-transition: @property @duration @easing;
 transition: @property @duration @easing;
}

Some of the above code is commented to give you more information about the acceptable values. One of the code blocks, @defaults, provides you the basic layout for an element. It allows you to add other CSS properties to enhance its layout. As the comment stated, it also provides you with a test layout to test an element.

You also can use the above code as a reference to CSS3 since some people think that CSS3 is harder and more complex than CSS2

You probably noticed that there aren’t multiple background images and @font-face, that’s because I can’t figure out how to integrate them with LessPHP yet.

Do you have any problem using the above stylesheet? Leave a comment below and I will respond to you quickly.

Write CSS3 with Understandable Variables with LessPHP – Part 1

LessPHP

LessPHP is the PHP version of LessCSS, a CSS stylesheet language which is relied on Node.js web server. All LessPHP need is the PHP server.

In this part I walked you through the installation of LessPHP compiler and general folder structure for a one-page web app using LessPHP. In the next part, I will give you some CSS3 properties with parameters which have easy to understand variables.

The installation of LessPHP is easier than you think. After you download its source from GitHub, the only step is to copy lessc.inc.php into your web app folder and included in the page. Here is the basic structure for the folder:

Folder structure for the one-page web app

Folder structure for the one-page web app

Below is the explanation for each file and folder from top to bottom:

web app is the root of the web app.

styles contains lessPHP files and compiled CSS stylesheets.

less contains lessPHP compiler and less source.

main.less relates to main.css which I discussed below. It contains the styles information that will output to main.css.

var.less contains the lessPHP variable definitions which is imported to main.less using @import.

index.php in the styles folder is used to compile the less source to CSS stylesheet. It contains the following code:

<?php
// Convert LESS to CSS styles
include_once 'less/lessc.inc.php';
try { lessc::ccompile('styles/less/main.less', 'styles/main.css'); }
catch (exception $ex) { exit($ex->getMessage()); }
?>

main.css is the compiled stylesheet.

index.php contains the code of your web app but first you need to include the index.php from the styles folder:


<?php
include_once 'styles/index.php'; // Include the LessPHP compiler in the beginning of this file
?>

The above is general folder structure of mine for one-page web app. If you need to create a multi-page web app, you can create a include folder and include the lessPHP compiler to header.php or somewhere similar.

When you edit the stylesheet, you need to only edit the .less files and it will re-generate main.css file once the page is loaded.

In the next part, I will provide you the content of var.less which mentioned above that includes some CSS3 properties for your reference or you can use it as a template.

If you have any question about this part, post them in the comment below.

9 jQuery Plugins to Enhance Web Design Creativity

Note: Some of the links in this post no longer exists. They have been crossed out.

I just read an article (http://blarnee.com/wp/10-new-jquery-plugins-to-inspire/) about 10 jQuery plugins that can help to increase the creativity of web design (noted that there are actually 9 jQuery Plugins instead of 10 jQuery plugins mentioned on the article title) Some of these plugins have cool animation and some have nice styles. And since these plugins are open source, you can study their source code and create your own animations and effects. Here is the list of these plugins:

  1. Coda Bubble (http://www.myjquery.co.uk/docs/x/plugins/coda_bubble/coda_bubble.php)
  2. DivCorners
  3. Facebook Style Wall Post
  4. Create an Interactive, Filterable Portfolio
  5. How to Make a Slideshow with a Transparent PNG Frame
  6. Simple Toggle with CSS & jQuery (http://www.sohtanaka.com/web-design/easy-toggle-jquery-tutorial/)
  7. Captify (http://thirdroute.com/projects/captify/)
  8. Flickr Horizontal Menu (http://www.candesprojects.com/download/flickr-horizontal-menu/)
  9. EncyPlayer – jQuery Fancybox and Flowplayer Intergration

Also noted that in the article, each link to the jQuery plugin web page seems to be directed to jqueryplugins.com, which is a jQuery plugins directory . Right now this website is currently in beta. Therefore, it doesn’t have a RSS feed to track of what are the newest jQuery plugins.

For more information about each plugin, visit the corresponding plugin homepage. Please read the original article (http://blarnee.com/wp/10-new-jquery-plugins-to-inspire/) for an overview for all of the above plugins.

Yahoo Design Pattern Library

Yahoo Design Pattern Library homepage
Click above image to visit its homepage

Yahoo Design Pattern Library is a collection of web page design pattern. According to its website, the main purpose of the library is to solve web design problems through optimal solutions. There are lots of design patterns to choose from, from layout, navigation, selection, rich interaction, to social.

Yahoo YUI Library homepage
Click above image to visit the homepage

Since this is an Yahoo-owned library, it uses YUI library. However, you can use whatever CSS and JavaScript frameworks once you understand these patterns. There are enough patterns in the library to inspire me to have different design layouts for my new homepage. I was very glad to discover this library through watching Doctype Episode 19.