• Current fun project : WP Starter Template

    Posted on

    I quit Mindvalley in middle of January. I then move back to Slashes and Dots, after they sold JomSocial. We are creating a new startup, creating templates and maybe launch before March ends. It’s fun to do templates because you can try all sorts of design styles and website type from web application templates to landing pages. I might have a chance to learn more here.

    Also, I’m trying to revive back my old startup – KreativeThemes. I’m trying to do a starter WP Template, based from Twitter Bootstrap, _Underscore and Options Framework and currently tested on this site. Yeah it’s still half baked and I just need around 30 minutes to create a WP Theme from the starter template. Might be available on Github if you guys want it

    Twitter Bootstrap : Admin Template Suggestion

    Posted on

    Forms/Input

    Media

    • Bootstrap Image Gallery
      https://github.com/blueimp/Bootstrap-Image-Gallery
      Bootstrap Image Gallery is an extension to the Modal dialog of Twitter’s Bootstrap toolkit, to ease navigation between a set of gallery images. It features mouse and keyboard navigation, transition effects, fullscreen mode and slideshow functionality.

    p/s: this post is being updated time by time

    Responsive image with fixed height

    Posted on

    When I’m doing a responsive web design, I try to work on 1200px wide first. Find the max size of image needed and then work on different size from there.

    I recently encountered the problem where I need to have the same image height but different width using only 1 image. I need to center the image properly so that it still looks like being cropped properly.

    HTML :

    CSS :

    Update : Flisterz have nice suggestion (using js) http://jsfiddle.net/flisterz/FxTwN/4/

    Responsive Video by CSS

    Posted on

    HTML :

    CSS :

    20 Principles of User Interface Design

    Posted on

    1. Interfaces exist to enable interaction
    2. Clarity is job #1
    3. Conserve attention at all costs
    4. Keep users in control
    5. Direct manipulation is best
    6. One primary action per screen
    7. Keep secondary actions secondary
    8. Provide a natural next step
    9. Appearance follows behavior (aka form follows function)
    10. Consistency matters