DevChimp » Web Development

Responsive Web Design Templates and Frameworks

Kyle Reddoch — Mon, 26 Dec 2011 17:51:34 +0000

Responsive Web Design, ahh, what the hot topic these days in the web design world. Before we get to the templates and frameworks, you might want to know what responsive web design even is.

When designers talk about a responsive design, they mean web designs that cater to all devices and just not those of the desktop. From mobile browsers to netbooks and tablets, users are visiting your sites from an increasing array of devices and browsers. So in all reality, your design have to be ready. Here are some of the great templates and frameworks to get you ready.

Responsive Web Design Frameworks

Blueprint

Tiny Fluid Grid

Seamless Responsive Photo Grid

Less Framework 4

Mobile Boilerplate

Golden Grid System

The 1140px CSS Grid System

Skeleton

Responsive HTML Templates

Cadena – A Responsive Creative Template

Muse – Professional, Responsive, Unlimited Colors

AdminPro – Premium Responsive Admin Template

Agility – Responsive / Minimal / HTML5

Website – responsive template

Super Skeleton: Responsive, Minimal, Beautiful

Good Minimal – A Responsive HTML5 Template

Rising – Fully Responsive HTML5 & CSS3 Theme

Hero – A Responsive Single Page Template

Metro – Responsive Portfolio HTML Theme

Responsify – A Responsive E-Commerce Template

Sapientia – Responsive HTML/CSS Template

[Source: DesignModo]

Responsive Web Design: A New Dimension in Web Design and Development Arena (pixelcrayons.com)
Web design predictions for 2012 (devchimp.com)
The Future of Web Design (thenextweb.com)

Filed under: Mobile, Web Design, Web Development Tagged: Cascading Style Sheets, Web design, Web Design and Development

HTML5 Page Structure

Kyle Reddoch — Fri, 23 Dec 2011 13:34:57 +0000

Image via Wikipedia

HTML5 is the newest version of HTML. It brings a great deal of new features. The previous version of HTML (4.01) came out in 1999 and the internet has change a BUNCH since then.

Today, some elements in HTML 4.01 are obsolete, never used, or not used the way they were intended to. These elements are deleted or re-written in HTML5.

To better handle today’s internet use, HTML5 also includes new elements for better structure, drawing, media content, and better form handling.

To get you started in HTML5, here is a basic page structure every HTML5 website should start with.








Your Website







Your menu








Article title
Posted on September 4th 2009 by Writer - 6 comments

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

Article title

Posted on September 4th 2009 by Writer - 6 comments

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

About section

Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

Using this will give you a great jump start in creating your first HTML5 compatible website!

If you enjoyed this article, would you care sharing it?

Book Excerpt: Introducing HTML5 (java.sys-con.com)
Render HTML5 in Old Versions of Internet Explorer (itrockx.wordpress.com)
The web in 2011: HTML5 dominates Flash, trouble for data capped mobile surfers (extremetech.com)
HTML 5 Developer’s Dilemma – Which Video File Format to Convert and Support (devcurry.com)
HTML5 and SEO (searchengineoptimizationjournal.com)
Explained: HTML 5: what is it? (techradar.com)

Filed under: HTML, Snippets, Tutorials, Web Development Tagged: HTML, HTML5

Create a “Stitched” Look in CSS

Kyle Reddoch — Fri, 23 Dec 2011 13:23:58 +0000

Okay let’s say you are creating a web site for a fabric company. They come to you and say they want their web site to represent who they, and they have a right to.

As you go through your process of getting information on how the cusotmer wants the web site to look and all the gritty details, they say, “I want it looked like I stitched things on there.”

Now if you are like me, you probably would say to yourself, “WTH? How am I going to pull this one off.” Well don’t fret, here is the solution.

CSS to the rescue

If you don’t know if already, CSS (Cascading Style Sheets) is a very powerful tool to any web developer.

For your ease, here is a code snippet that will allow you to create your “stitched” effect. Enjoy!


.stitched {
padding: 5px 10px;
margin: 10px;
background: #ff0030;
color: #fff;
font-size: 21px;
font-weight: bold;
line-height: 1.3em;
border: 2px dashed #fff;
border-top-left-radius: 3px;
-moz-border-radius-topleft: 3px;
-webkit-border-top-left-radius: 3px;
border-bottom-right-radius: 3px;
-moz-border-radius-bottomright: 3px;
-webkit-border-bottom-right-radius: 3px;
border-top-right-radius: 3px;
-moz-border-radius-topright: 3px;
-webkit-border-top-right-radius: 3px;
-moz-box-shadow: 0 0 0 4px #ff0030, 2px 1px 4px 4px rgba(10,10,0,.5);
-webkit-box-shadow: 0 0 0 4px #ff0030, 2px 1px 4px 4px rgba(10,10,0,.5);
box-shadow: 0 0 0 4px #ff0030, 2px 1px 6px 4px rgba(10,10,0,.5);
text-shadow: -1px -1px #aa3030;
font-weight: normal;
}

If you enjoyed this article, would you care sharing?

25 Most Attractive CSS Web Designs (machoarts.com)
Code is Poetry, CSS is Art (davidrke.wordpress.com)
Lynda.com – CSS Web Design (netwidz.com)
30 Amazingly Great CSS Menu Tutorials (smashingapps.com)
CSS Fundamentals Training (webcareerjourney.wordpress.com)
What is Website Design and style, What Can Website design Do To enhance Your Company (bigsexymedia.com)

Filed under: CSS, Snippets, Tutorials, Web Design, Web Development Tagged: Cascading Style Sheets, code snippet, CSS, Style Sheets

41 Useful jQuery Examples

Kyle Reddoch — Fri, 23 Dec 2011 12:55:03 +0000

jQuery is vastly becoming one of the most used JavaScript libraries on the web. Mainly due to its high customization factor. There are many sites out on the web that have great example and even source code for you to reference. I recently found a good one.

I have started using jQuery as my go to JavaScript library and have had great experience with it.

Here are 38 great jQuery resources that I would suggest using:

1. “Outside the Box” Navigation with jQuery

This tutorial will cover a few ways to do just that with OS X style docks and stacks navigation.

DevChimp » Web Development

Responsive Web Design Templates and Frameworks

Responsive Web Design Frameworks

Blueprint

Tiny Fluid Grid

Seamless Responsive Photo Grid

Less Framework 4

Mobile Boilerplate

Golden Grid System

The 1140px CSS Grid System

Skeleton

Responsive HTML Templates

Cadena – A Responsive Creative Template

Muse – Professional, Responsive, Unlimited Colors

AdminPro – Premium Responsive Admin Template

Agility – Responsive / Minimal / HTML5

Website – responsive template

Super Skeleton: Responsive, Minimal, Beautiful

Good Minimal – A Responsive HTML5 Template

Rising – Fully Responsive HTML5 & CSS3 Theme

Hero – A Responsive Single Page Template

Metro – Responsive Portfolio HTML Theme

Responsify – A Responsive E-Commerce Template

Sapientia – Responsive HTML/CSS Template

Related articles

HTML5 Page Structure

Related articles

Create a “Stitched” Look in CSS

CSS to the rescue

Related articles

41 Useful jQuery Examples

1. “Outside the Box” Navigation with jQuery

2. Sexy Drop Down Menu w/ jQuery & CSS

3. Designing the Digg Header: How To & Download

4. Create The Fanciest Dropdown Menu You Ever Saw

5. A circular menu with sub menus

6.CSS3 Mega Drop Down Menu

7. Perfect signin dropdown box likes Twitter with jQuery

8. Sliding Jquery Menu Tutorial

9.Fancy Sliding Menu for Mootools

10. Create Vimeo-like top navigation

11. Dynamic PHP/CSS menu

12. Creating an Outlook Navigation Bar using the ListView and Accordion Controls

13. Animated Drop Down Menu with jQuery

14. Drop Menu

15. Make a Mega Drop-Down Menu with jQuery

16. A cross-browser drop-down cascading validating menu

17. Drop-Down Menus, Horizontal Style

18. Superfish v1.4.8 – jQuery menu plugin by Joel Birch

19. JavaScript Dropdown Menu with Multi Levels

20. jQuery (mb)Menu 2.7

21. Menumatic

22. Smooth Navigational Menu (v1.31)

23. Super menu pack (10 menus)

24. Longed-For Multi-Level Drop-Down Menu Script

25. jQuery & CSS Example – Dropdown Menu

26. Reinventing a Drop Down with CSS and jQuery

27. Simple jQuery Dropdowns

28. Styling Drop Down Boxes with jQuery

30. jQuery Menu: Dropdown, iPod Drilldown, and Flyout styles with ARIA Support and ThemeRoller Ready

31. mcDropdown jQuery Plug-in v1.2.07

32. CSS Ultimate Menus

32. jQuery Drop Line Tabs

33. Cut & Paste jQuery Mega Menu

34. Professional dropdown #2

35. Drop down menu with nested submenus

36. jdMenu Hierarchical Menu Plugin

37. Dynamic Drive – Multiple Level Menus

38. IzzyMenu – Menu Builder – Build your pro CSS/DHTML Menu

39. A Different Top Navigation

40. jQuery UI Potato Menu

41. jQuery File Tree

Related articles

Creating an ASP .NET Web Form

The form page

The VB code

The web.config file

To wrap things up

Related articles