Today's Question:  What does your personal desk look like?        GIVE A SHOUT

 ALL


  LESS/SASS/Stylus development tools summary

LESS,SASS and Stylus are more and more popular among developers. More and more people are using these three tools now. Here we introduce some development and testing tools which can make our development process simpler.SublimeTextMany front-end developers are now using Sublime Text 2 as their main text editor, there are many plugins in Sublime Text as well. We can use Ctrl+Shift+P –> install package to search relative plugins.Less SublimeLess build SublimeLess2cssLess snippetsSublime text haml sassSASS-Build-SublimeText2StylusEmmet--Integrated with less、sass、scss etc,...

3,771 0       CSS SASS LESS STYLUS


  CSS DIV position analysis

When using CSS to set the position of DIV, we may often get confused with the 4 position properties : static, relative, absolute and fixed. If we don't understand them correctly, we may often get unexpected result. Here we make some analysis to them.The definitions of these 4 properties:static : The default position property. It has no position actually. The element will appear where it should be (top, bottom, left, right or z-index has no use here)relative : This one will position relative its normal position. We can use top, bottom, left and right to position relative to its normal position....

10,548 0       CSS DIV POSITION RELATIVE ABSOLUTE


  Let 's write some front end codes

I've seen a lot of arguments that there is no much technical value writing web portal, I think that the vast majority of good programmers will try many different things. The low level development and machine learning are not the only technologies which are  full of wisdom and challenges, I wrote web site for a few years, it is difficult to say that this is my initial interest, although I touched on other technologies as well, I still feel building website is challenging.Front end development is an important aspect of the many technologies we should touch on. Those who put much effort on f...

2,927 0       CSS JAVASCRIPT FRONT END DEVELOPMENT


  Guide to use Compass

Sass is one kind of CSS Preprocessor, it can make CSS development simple and maintainable. But to show its real power we may need to have Compass.This article is to introduce Compass. Once you learn Compass, your CSS development efficiency will be largely improved.Here we assume you have mastered the major uses of CSS, if you know Sass, then it's better. It's still ok if you don't know Sass.1. What is Compass?In simple, Compass it the toolkit of Sass.Sass itself is only a compiler, Compass encapsulates some templates and modules based on Sass. The relationship between Sass and Compass is simil...

6,449 0       TUTORIAL CSS SASS COMPASS


  Ways to make elements in HTML center aligned horizontally

In our daily HTML design,  it is an easy job to horizontally center align an element with known width.<div class="element">I am<a href="http://www.aiubug.com" target="_blank" rel="external" title=""> bug </a>!</div>  .element{width:960px;margin:0 auto;}  The above codes set the width of the div block and horizontally center align it. It's very easy to implement. However, if we have some elements we don;t know their width and we still want to center align them. What should we do? The above code is not useful if we don't know the width before we center...

5,233 0       HTML CSS CENTER ALIGN UNKNOWN WIDTH


  Short SASS tutorial

If you learned CSS before, you should know that CSS is not a programming language. You can use it to design webpage style, but you cannot use it for programming, i.e, CSS is what designer uses, not what programmer uses. Programmer may think that CSS is very troublesome, it has no variables, no conditional statements, it just allows line-by-line description of HTML elementsLuckily, CSS preprocessor appear which makes CSS programmable. The general idea of CSS preprocessor is using a programming language to design the website style, and then convert it to CSS files.Among different CSS preprocesso...

9,205 0       CONDITION CSS COMMENT VARIABLE SASS PROGRAMMABLE


  Responsive Web Design

With the popularity of 3G, more and more people are surfing the Internet using mobile phones. Mobile devices are becoming common devices for accessing internet. So web design faces a big challenge which is how to display the same webpage on different devices with different screen  resolutions.Screen resolution of mobile device are usually not very large, the width is below 600px, while PC usually has a resolution over 1000px. It is not an easy task to display the same content with satisfying effect on different screens with different resolution.One common solution is to provide different ...

10,581 0       WEB DESIGN CSS LAYOUT RESPONSE WEB DESIGN


  CSS filter effects in action

CSS filter effects in action Ever since CSS filter effects landed in WebKit, I thought about theirs practical implementation. How will they fit with the current web design trends? At this time, my initial impressions are that the best way to showcase the power of CSS filters is something like an image gallery.With so many CSS filters to choose from, it will be fun to create image galleries in the future. Further in this article we’ll create a simple image gallery using CSS filters and the CSS3 :not selector.View demoWhilst at the beginning we had just WebKit nightlies sup...

3,671 1       CSS FILTER EFFECT