Category Archives: HTML and CSS

Foundation 6 Block Grid Media list is here

I was looking for this for a while and then finally found it here after having some trouble with search. Posting it here hoping for a someone to land up here before they could find the actual page in organic search. ;)

Needless to say foundation people need to do some ground work in order to make documentation more user friendly and easily available. I am really enjoying it with CakePHP 3. :)

<div class=”row small-up-2 medium-up-3 large-up-4″>

<div class="column column-block">
<img src="//placehold.it/600x600" class="thumbnail" alt="">
</div>
<div class="column column-block">
<img src="//placehold.it/600x600" class="thumbnail" alt="">
</div>
<div class="column column-block">
<img src="//placehold.it/600x600" class="thumbnail" alt="">
</div>
<div class="column column-block">
<img src="//placehold.it/600x600" class="thumbnail" alt="">
</div>
<div class="column column-block">
<img src="//placehold.it/600x600" class="thumbnail" alt="">
</div>
<div class="column column-block">
<img src="//placehold.it/600x600" class="thumbnail" alt="">
</div>
</div>

Easy and smart way to add “required” css class to form field labels

Easy and smart way to add “required” css class to form field labels

Easy and smart way to add “required” css class to form field labels

Undoubtedly, this is the easiest way to add a red asterisk (*) sign to a required field label in a form.

Here’s HTML part of the form.

<div class="required"><label for="FirstName">First Name</label>
<input name="first_name" maxlength="50" type="text" id="FirstName"></div>

<div class="required"><label for="LastName">Last Name</label>
<input name="last_name" maxlength="50" type="text" id="LastName"></div>

Continue reading

How to add HTML tag keyboard and toolbar shortcuts to Notepad++

(skip to implementation) Like most computer users i do prefer to use keyboard shortcuts and while working with web pages in particular, keyboard shortcuts and visual shortcuts in editor toolbars speed up development work considerably. There are HTML editors like Adobe Dreamweaver which do almost everything automatically for you, but you need to purchase a license to permanently use them and also they seem to consume large amount of computer RAM. Continue reading