Material Design Lite

Setelah sekian lama menanti akhirnya muncul juga sebuah boilerplate yang bebas jQuery. Material Design Lite ini baru saja dikeluarkan oleh Team Google. Saya mendapat tahu pun dari salah seorang penggiat javascript terkemuka, Encik Addy Osmani yang menyiarkannya di halaman Facebook peribadinya. Komponen yang terdapat dalam pustaka ini tidaklah sebanyak Twitter Bootstrap tetapi ternyata banyak komponennya adalah yang paling kritikal digunakan ketika membangun sebuah aplikasi. 

Saya berkesempatan mengujinya bersama Laravel (Sekadar suka-suka :) ). Saya mula memuat turun menggunakan NPM dan mengurus fail-failnya menggunakan Laravel elixir, yakni Gulp. Mudah dan kemas. Alhasil, saya sempat membuat landing page menggunakan template yang dibekalkan dan sedikit sahaja kerja-kerja pengubahsuaian perlu dilakukan. Harap anda semua boleh berkongsi pengalaman kalau kira ada menggunakan boilerplate ini ya.

Teknik pembilang dalam TABLE menggunakan CSS

Teknik ini biasa digunakan untuk menempatkan nombor pada setiap list item pada tag ORDERED LIST. Kegunaannya adalah bagi memudahkan pembacaan dan menyenangkan pembaca untuk mengenal pasti poin-poin penting pada sebuah artikel atau senarai panjang.

Sumber: http://caniuse.com/css-counters

Styling your web for print usage

There are many different media types that you can apply to CSS, some of which are more useful than others, and they let you specify the look, feel, or sound of the web page that is linked to the CSS files.

The Useful Media Types
This list includes the media types that you will truly find a use for on regular occasions:

• screen—For color computer screens
• print—For printed versions of the document
• projection—For presentation or kiosk versions of the document (where toolbars are removed, and the display renders completely full screen)
• all—For styles that are suitable for all devices

Specifying the Media Type

<link href="css/mainstylesheet.css" rel="stylesheet" media="screen" />
<style type="text/css"> @import url("css/printstylesheet.css") print;</style>

Here the detail of this technique

Display data as Gmail does

I was referring to this site for getting output as gmail does. It's not too difficult to do that. But I used table to organize the layout. Check the in-line style attach to the tag below

<table style="table-layout: fixed;" width="300">
<tr>
<td style="overflow: hidden; empty-cells: show; white-space: nowrap;">
Write something longerr here
</td>
</tr>
</table>




The code above will restrict the table from expand if you have longer text or image in a '<td style="overflow: hidden; empty-cells: show; white-space: nowrap;">'...