Skeleton: Beautiful Boilerplate for Responsive, Mobile-Friendly Development 20 Awesome Resources for Twitter Bootstrap Lovers Generators Bootstrap Custom Build Before diving into great third party Bootstrap resources, it’s worth pointing out a great little tool right from Twitter that allows you to completely customize an impressive range of Boostrap features so that you can create a custom build that’s perfect for your project. If you haven’t checked out Bootstrap in a while, you should give this a look because it’s new with Twitter Bootstrap 2.0. Not only can you use it to take an overweight download and transform it into something lean, you can also save yourself a lot of CSS work by customizing colors, fonts etc. before you even initiate the download. StyleBootstrap.info As with Twitter’s own tool above, this tool allows you to use a simple interface to customize various aspects of Bootstrap. The app itself is also more visual than Twitter’s generator and allows you to see what your styles will look like before you hit that download button. Beautiful Buttons for Twitter Bootstrappers Theming BootstrapStyler
20+ Sites/Resources to Learn Web Design & Development (For Free) The web design & development education industry has exploded from a small niche to a powerful, continually expanding force. Countless people around the globe are interested in learning about how to design and develop websites, and tons of companies are cropping up promising the ultimate solution. The competition in this field is a great thing for customers. For those, who wants to learn web design and development, we are sharing following high quality sites and resources. If you would like to receive our new plugins, responsive templates, free PSDs and keep up to date with the latest and greatest articles and resources from the design/developer community, you can subscribe to our Full RSS Feed, follow us on Twitter and Facebook. Dev.Opera Google Developers University Consortium World’s Best Courses, Online, For Free – Coursera jQuery for Designers Online Web Tutorials – W3Schools Free Web Design, Development & Programming Tutorials – Net Magazine Build, Explore and Teach the Web – CodePen
Sky CSS Tool: Create CSS Classes 15 sites web developers and designers should know Creating a good website isn't an easy task, but there's a few tools that can definitely make your developer or designer life easier. In this article, I have compiled 15 extremely useful website that any web developer or web designer should have bookmarked. ColorCombos When designing a website, one of the firsts (and most important) steps of the process is to choose a color scheme. Color Combos allow you to browse thousand of different colors combinations for getting inspired for your upcomming design. Color schemes can be browsed by colors.Visit colorcombos.com LIpsum Who doesn’t know the extremely popular Lorem Ipsum text? What the font? You just saw a logo or website using a particular font and you enjoyed it. ConvertIcon Favicons are a must have for any website, mostly because on modern browsers as such as Firefox, it is displayed along with the site name in tabs. BgPatterns background Patterns is definitely one of the current webdesign trends. HTML Encoder Test Everything Sprite Generator
Pure CSS Buttons with Hover effect and Active Pseudo-element | Web Tutorial Plus You may remember the days when we used to lookout for custom image buttons. And for getting the hover and active states, we used to deploy JavaScript codes to change the image on hover and click. But there were issues of loading of three images for each state. Unless the images are loaded, the image used to disappear on mouse hover and click. Well, the days are gone with CSS3 introduction. Most of the websites coming out these days are using the cool buttons created purely with CSS. Today, we will learn to create some cool CSS buttons with hover effect and active pseudo elements. So, before we get into the details and know how, just have a look what we will create in this tutorial. CSS Buttons Demo And as per the practice, you will find all the files available for download at the end of this tutorial. HTML Codes The HTML codes for the buttons are pretty simple and straight-forward. In all these buttons, you will find one common class i.e. Common CSS Code Simple Button Push Me Button
Best Slideshow (Content Slider) Plugins for WordPress UPDATE Feb 2012: We’ve reviewed all the newest sliders for this year, you can now check out our review of best slideshow (content sliders) plugins for WordPress in 2012. UPDATE Jan 2012: Check out the Sugar Slider, it’s the most awesome slider for WordPress at the moment, the management interface is just amazing! uBillboard is another hot one, more in depth reviews coming soon. Content sliders, slideshows, rotating images, call them what you want, these effects are here to stay. They are excellent at showcasing your portfolio, or to highlight some of the best content on your site/blog. 1. CU3ER is a 3D image slider that is easy to set up, fully customizable, tailored to provide a unique look and feel, inspiring, and fun to use. CU3ER brings creativity to your web design process, makes your slideshows visually and interactively stunning, and delivers a unique 3D user experience. Want to give CU3ER a shot? Get Cub3r 2. Get Piecemaker 2 3. Get Slide Deck 4. Get Wow Slider 5. Get Nivo Slider 6.
15 jQuery Plugins for Creating Dynamic Layouts Over the last couple of years, with the advancements in web technologies, we have seen a rapid rise in the number of sites that have broken away from using typical and boring layouts. No longer is choosing the number of columns your only option. Nowadays you can easily have a dynamic layout that cleverly and seamlessly arranges content into a grid (masonry), or a parallax scrolling layout, or even a layout that allows you to define a custom path for users as they scroll through pages. At first glance a site with fancy animation effects may seem tricky to build. jQuery Plugins for Dynamic Layouts jQuery Scroll Path jQuery Scroll Path is a plugin that, as its name states, lets you define your own custom scroll path. Scrolling with Scroll Path can be done with either the mouse-wheel, up & down arrow keys or the spacebar. jQuery Scroll PathGitHub SuperScrollorama SuperScrolloramaGitHub fullContent.js fullContent.jsGitHub PageSlide PageSlideGitHub Stellar.js Stellar.jsGitHub scrolldeck.js Packery
MakeTemplate.com: CSS Tools The 1Kb CSS Grid, Part 2 Tyler builds websites and web apps for Vyre in London. In Part 1 we covered how to setup a lightweight CSS grid. I promised that this same grid could streamline the way page templates are used in content management. Well, here we go! One is better than two Every content management system is driven by templates. But imagine a website that has two distinct layouts: one layout for the homepage, a second layout for all the other pages of the site. Now, two templates are manageable. The solution Fortunately, the tidy rows of our CSS grid can be used to reduce the number of page templates required. First, lets add an ID to the body tag to indicate the current page. body id="home" body id="subpage" Second, lets add an additional class to each row of our grid that describes the columns within. Now for the important bit. Fresh out of the oven We now have all the necessary ingredients to facilitate different layouts on different pages from a single template. The disclaimer Tune in next time for...
25 Tutorials of User Interface CSS3 Effects (Advanced) Design and Development Agency based in Palma de Mallorca - Ma-No Web Design and Development We want to present a series of 25 well-explained tutorials of User Interface CSS3 Effects . These CSS effects give developers a quick and easy solution when it comes to enhancing impressive ui styling, and will work on most modern browsers. 1. Interactive Infographic with SVG and CSS Animations Learn how to build an interactive animated infographic using SVG, CSS and JavaScript. 2. A tutorial on how to create an animated 3d bar chart using CSS only. 3. Learn about the underused and often misunderstood CSS clip property and understand how to apply it for some nifty effects. 4. A tutorial about how to create an overlay effect to show some more details of an item or image. 5. In this tutorial we are going to implement some simple CSS3 content tabs using radio buttons together with the :checked pseudo-class and sibling combinators. 6. Enhance required fields in a form with this little effect. 7. 8. A tutorial about how to create an experimental CSS-only timeline with a 3D effect. 9. 10. 11. 12.
Free Zocial Button Set: Social CSS3 Buttons Advertisement The idea behind this project was to produce a consistent set of buttons that could be used for the range of social actions frequently taken in Web applications. These actions are often important goals for users, such as connecting third-party accounts or sharing content to third-party platforms, so their appearance has to be attractive and clear. The standard buttons provided by third parties (such as Facebook, Twitter and SoundCloud) vary in size, style and interactivity. The button set was designed from the beginning to require no extra markup, and the elements used are entirely the choice of the (semantically considerate) designer. No raster images or sprites were used. Download The Button Set For Free This button set is free to use and extend, personally or commercially. Features Preview Screenshots of each set are below. Usage The button set was designed with simplicity and semantics in mind. <button class="zocial facebook">Sign in with Facebook</button> (al) Footnotes
22 JavaScript/jQuery Tutorials for New Web Developers Frontend web development is the hottest area for modern user interactivity. You can build practically any type of user interaction when you understand the concepts behind JavaScript. DOM manipulation is a hugely popular technique which, coupled with Ajax requests, can build one incredible user experience. In this showcase I have collected 22 exciting jQuery & JavaScript tutorials for newer web developers. These are perfect for somebody who has a very basic understand of what a “scripting language” does, but still has no real world applications. Smooth Page Scroll Area Charts with D3.js Swatch Book with CSS3/jQuery Fullscreen Slider with jQuery and CSS3 3D Flipping Circles Slideshow with jmpress.js Lateral On-Scroll Sliding Thumbnail Proximity Effects Item Blur with CSS3/jQuery Portfolio Image Navigation Scrollbar Visibility jQuery Overlay Thumbnails Preview Slider Fullscreen Slideshow with HTML5 Audio Animated Form Switching Custom Banner Animations Compact News Preview Photo Stack Gallery
SelectORacle: CSS Selector Tool English & Spanish translations of CSS2 and CSS3 selectors Ever wondered what a particularly complex CSS selector really means? Here's your chance to find out! Current notes and limitations Explainer direct input box accepts a series of semi-colon delimited selectors or a series of rulesets extracts all selectors, pretty-prints them, and performs a source-to-source transformation to fairly-gramatically correct and understandable English or Spanish generates warnings for misplaced pseudo-elements (e.g., DIV::before P will generate a warning) even though these are really errors prints pseudo-elements with the double-colon notation introduced in CSS3 (e.g., P::before) current version does not always print escaped characters properly does not take into account default namespace when printing explanations Parser Potential expansion more internationalization of the translation text (help us out!) Comments, suggestions, critiques, or other feedback?