This series is supported by Rackspace, the better way to do hosting. Learn more about Rackspaces hosting solutions here.This is not your fathers world wide web. Thanks to soaring smartphone sales, new tablet devices like the iPad, and the burgeoning trend of connected devices, individuals are accessing and experiencing the web in a very different way than they were even five years ago.The desktop browsing experience is also undergoing radical change, thanks to the evolution of JavaScript frameworks and the push for standards successors such as CSS3 and HTML5. Its an exciting time to be developing or designing for the web.Even for the seasoned developer, it can be difficult to know where to start if you want to embrace the new technologies of HTML5 and support new devices like the iPhone, Android-based smartphones or the iPad without neglecting users on older browsers. Fortunately, the collaborative nature of the web means that lots of developers and designers are working out best practices and solutions toward these problems together.One of the most interesting new projects aimed at giving designers and developers a starting template for integrating HTML5 and other modern features into their sites is HTML5 Boilerplate.Created by Paul Irish and Divya Manian, HTML5 Boilerplate is the product of more than two and a half years in iterative development, and its chock-full of best practices and techniques for creating cross-browser compatible websites that will work with legacy browsers (which means IE 6) while also being HTML5-ready.To be clear, HTML5 Boilerplate is not a framework. Its a template that can be modified and used for your own projects. You can use as much or as little as you want and make your own additions and subtractions. Still, its one of the most robust and well-commented starting points weve seen for setting up a solid HTML5 base for your projects.One of the best things about HTML5 Boilerplate is that the source is openly available under a public domain license; you can use it and integrate it into your own projects in any way you want.As a result, a ton of awesome projects have already used HTML5 Boilerplate alongside other techniques. Just check out this page on GitHub to see a sampling of some of the HTML5 Boilerplate-infused spin-offs.Check out these additional tools, projects and resources to get the most out of HTML5 Boilerplate:The Source Itself Available on GitHub for your watching/forking/commenting pleasure, this is the source for HTML5 Boilerplate. You can keep up with the latest changes, ask questions and make suggestions. You can also check out the various forks from around the community.Paul Irishs Official HTML5 Boilerplate Screencast Nettuts+ published this awesome 40-minute screencast that Paul Irish created to walk you through HTML5 Boilerplate. It shows off all the features and offers some awesome tips. Definitely check this out.Add 960 Grid System to Boilerplate One of our favorite CSS frameworks is Nathan Smiths 960.gs. Its easy to add 960.gs to Boilerplate to create the best of both worlds.Use it with WordPress Sam Sherlock created a really great WordPress theme that combines HTML5 Boilerplate with the Thematic WordPress theme framework. He has also infused many elements from the new default WordPress 3.0 theme TwentyTen.Some Tips To Keep in Mind This collection of tips from Brian Blakely are good points of reference.Were really excited to see how HTML5 Boilerplate evolves and how other projects choose to integrate the template. Its a terrific starting point for many designers and developers who just dont have the time to pull all the little bits and information together when getting started with HTML5.Are you using HTML5 in your designs? What tools are you using to ease the process? Let us know in the comments.Series supported by RackspaceRackspace is the better way to do hosting. No more worrying about web hosting uptime. No more spending your time, energy and resources trying to stay on top of things like patching, updating, monitoring, backing up data and the like. Learn why.More Dev & Design Resources from Mashable: – 5 Cross-Platform Mobile Development Tools You Should Try – 15 Developer/Hacker Women to Follow on Twitter – 10 Tools for Distributed Developer Teams – 11 Delicious TextMate Themes for Designers and Developers – 7 Awesome CSS3 Techniques You Can Start Using Right NowImages courtesy of HTML Boilerplate.More About: 960.gs, divya manian, HTML5, html5 boilerplate, paul irish, Web Development, web development seriesFor more Dev&Design coverage:Follow Mashable Dev&Design on TwitterBecome a Fan on FacebookSubscribe to the Dev&Design channelDownload our free apps for iPhone and iPad
What is the use of CSS frameworks? Do they encourage less code? Clearer code? Is their implementation and deployment smooth and can the training cost of them be justified? To answer all of the above, We’re going to look at the big three metaframeworks that exist right now.
What is the use of CSS frameworks? Do they encourage less code? Clearer code? Is their implementation and deployment smooth and can the training cost of them be justified? To answer all of the above, We’re going to look at the big three metaframeworks that exist right now.
Using iFrame or “inline Frame” provides a convenient way of embedding pages from other websites to your own. It is preferred by most websites to use because of its ease in implementation unlike “Frame”. You can insert it anywhere on your website without worrying it might mess up with other elements. Just like other HTML elements, iFrames has its own simple tags. To place an iFrame to your site, the simple code below is good to go which consists of basic iFrame tag attributes:
You can add other attributes such as frameborder, name, scrolling, and more.
One simple issue in iFrame is the scrolling. Some might have had problem setting the vertical and horizontal scrolling of their iFrames. You can set the scrolling attribute of iFrame to either yes or no. The no simply disables the scrollbars while yes enables BOTH which is usually the issue. Of course it is much likely that we would want to enable the horizontal scroll bar and just disable the vertical or vice-versa.
We can make this feature possible using CSS. The following simple CSS codes below is all we need to solve the problem:
Round-edged or rounded-corner rectangles are used in many websites, whether or not it is a static or a dynamic website. How to create rectangles or content boxes with round edges or corners is very easy in CSS. All we need are four simple graphics similar below, which you can easily create using Photoshop or any graphic editing program you feel comfortable using, and a few lines of CSS codes.
These four graphics will actually serve as the four corners that will make our rectangle rounded:
Below are the CSS and HTML codes you need to create the rounded corners rectangle:
You can change the size of width and height if you need to. Please note that this look good in areas with white background. You can easily create 4 similar images above and change its background to any color you want.
CSS has always been a hell of a big deal to me (I guess every user’s) for it’s long-been-known cross browser incompatibility tendency. I can still remember how I have to be as patient as I could to keep up on the first few months of disalienating myself to it. Because of my need to design freely without compromising any of Firefox and IE (as these 2 browsers are the ones with a higher percentages of users), I always had to search the web for easiest (or at least one that wouldn’t take up too much time to do) ways on how to eradicate design flaws. I don’t really have that much problem with Firefox though–I guess it’s the most tolerant browser ever. Internet Explorer is quite a dud when it comes to CSS.
Part of what I learned was this simple CSS hack for IE (particularly IE6) which eliminates differences with Firefox. It’s the “* html” thing which really works so far fine for me. I use it in positioning div’s as sometimes what appears on Firefox doesn’t appear similar to IE.
For example, if you have this CSS code for a certain div,
the 5px top position may not be enough or too much on IE as to how it is on Firefox. So I always use similar to the following code to save my design,
* html #header { top:8px; }
I always knew this hack would sooner or later have changes and it turned out right when I started using IE7. I was back again on a great deal with IE’s CSS glitch in version 7. But fortunately didn’t took me too long to find the new hack. I found out it is now “* + html”. * + html #header{ top:8px; } That is the equivalent code for IE7 of the above code (which is for IE6). There are instances though to which this hack (or any CSS hack at all) is not that necessary like those designs that don’t need tight-knit positioning of elements. But for some instances, including having a knit-picky boss, I bet it is that much.;)
