Posts Tagged ‘CSS’

We are pleased to present below all posts tagged with ‘CSS’.

Responsive Menus: Enhancing Navigation On Mobile Websites

Most of us are pretty familiar with responsive Web design by now. Basically, it uses a combination of a fluid layout and media queries to alter the design and layout of a website to fit different screen sizes. There are other considerations, too. For example, a lot of work has been done on responsive images, ensuring not only that images fit in a small-screen layout, but that the files downloaded to mobile devices are smaller, too.

Responsive Menus: Enhancing Navigation On Mobile Websites

But mobile design isn’t just about layout and speed: it’s also about user experience. In this article, we’ll focus on one aspect of the user experience — navigation menus — and detail a few approaches to making them work better on mobile devices.

Read more...

Powerful New CSS- and JavaScript Techniques

Since our last round-up of useful CSS techniques, we've seen a lot of truly remarkable CSS geekery out there. With CSS3, some of the older techniques now have become obsolete, others have established themselves as standards, and many techniques are still in the "crazy experimentation" stage.

CSS3 Dodecahedron

Since the release of the previous post, we've been collecting, sorting, filtering and preparing a compact overview of powerful new CSS techniques. Today we finally present some of these techniques. Please note that many techniques are not only CSS-based, but use HTML5 and JavaScript. Use them right away or save them for future reference. Thanks to all of the featured designers and developers for their fantastic work!

Read more...

Classes? Where We’re Going, We Don’t Need Classes!

Classes, classes, classes everywhere. What if we don’t need CSS classes at all? What if we stopped worrying about how many classes we’re using and what we should be calling them and just finished with them once and for all? It would be no revelation to you to say that HTML elements can be styled without recourse to the class attribute, but have you considered the multitude of benefits that come from forgoing classes altogether.

Classes? Where We're Going, We Don't Need Classes!

In this article, we’ll demonstrate that the class is as antiquated and inappropriate for styling as the table is for layout, and that omitting them can discipline us to create more usable, reusable content. I appreciate that this is a contentious subject; I’ll meet you in the comments.

Read more...

Coding Q&A With Chris Coyier: Box-Sizing and CSS Sprites

Howdy, folks! Welcome to the new incarnation of Smashing Magazine’s Q&A. It’s going to work like this: you send in questions you have about CSS, and at least once a month we’ll pick out the best questions and answer them so that everyone can benefit from the exchange. Your question could be about a very specific problem you are having, or it could be a question about philosophical approach. We’ll take all kinds.

We’ve done a bit of this before with a wider scope, so if you enjoy reading the Q&A, check out my author archive for more of them. Let's start with the question from Brad Frost: "What are your thoughts on Paul Irish’s idea to apply box-sizing: border-box to every element on the page?"

Read more...

Useful jQuery Function Demos For Your Projects

Every aspiring web developer should know about the power of JavaScript and how it can be used effectively to enhance the ways in which see and interact with web pages. Fortunately, to help us be more productive we can use the power of JavaScript Libraries and this article we will take a good look at jQuery in action.

50 jQuery Function Demos for Aspiring Web Developers

In a nutshell, jQuery is a leading JavaScript Library that can perform wonders with your web pages and makes your web development life much easier and more enjoyable. The rise in popularity of jQuery since its arrival in 2006 has seen an estimated over 24 million websites (50% of the 10,000 most visited websites) currently reaping the benefits and as Google Trends suggests it's the popular JavaScript Library of choice.

Read more...

Develop A One-Of-A-Kind CSS / JS-Based Game Portfolio

A portfolio is a must-have for any designer or developer who wants to stake their claim on the Web. It should be as unique as possible, and with a bit of HTML, CSS and JavaScript, you could have a one-of-a-kind portfolio that capably represents you to potential clients.

Develop A One-Of-A-Kind CSS/JS-Based Game Portfolio

Before getting down to business, let’s talk about portfolios. A portfolio is a great tool for Web designers and developers to show off their skills. As with any project, spend some time learning to develop a portfolio and doing a little research on what’s going on in the Web design industry, so that the portfolio presents you as an up to date, innovative and inspiring person. All the while, keep in mind that going with the flow isn’t necessarily the best way to stand out from the crowd.

Read more...

How To Build A Real-Time Commenting System

The Web has become increasingly interactive over the years. This trend is set to continue with the next generation of applications driven by the real-time Web. Adding real-time functionality to an application can result in a more interactive and engaging user experience.

How To Build A Real-Time Commenting System

However, setting up and maintaining the server-side real-time components can be an unwanted distraction. But don't worry, there is a solution.

Read more...

Decoupling HTML From CSS

For years, the Web standards community has talked about the separation of concerns. Separate your CSS from your JavaScript from your HTML. We all do that, right? CSS goes into its own file; JavaScript goes in another; HTML is left by itself, nice and clean.

Decoupling HTML From CSS

CSS Zen Garden proved that we can alter a design into a myriad of permutations simply by changing the CSS. However, we’ve rarely seen the flip side of this — the side that is more likely to occur in a project: the HTML changes. We modify the HTML and then have to go back and revise any CSS that goes with it.

Read more...

A New Front-End Methodology: BEM

This article is the sixth in our new series that introduces the latest, useful and freely available tools and techniques, developed and released by active members of the Web design community. The first article covered PrefixFree; the second introduced Foundation, a responsive framework; the third presented Sisyphus.js, a library for Gmail-like client-side drafts, the fourth covered a free plugin called GuideGuide and the fifth presented Erskine Design's responsive grid generator Gridpak. Today, we are happy to feature a toolkit devised by Yandex: BEM.

A New Front-End Methodology: BEM

BEM stands for "Block", "Element", "Modifier". It is a front-end methodology: a new way of thinking when developing Web interfaces. This article will elaborate on the theory as well as the practice of building websites at Yandex—one of the leading internet companies in Russia.

Read more...

CSS Sprites Revisited

I’m pretty confident that I won’t surprise anyone here by saying that CSS sprites have been around for quite a while now, rearing their somewhat controversial heads in the Web development sphere as early as 2003.

CSS Sprites Anno 2012

Still, the CSS sprite hasn’t truly found its way into the everyday toolkit of the common Web developer. While the theory behind CSS sprites is easy enough and its advantages are clear, they still prove to be too bothersome to implement, especially when time is short and deadlines are looming. Barriers exist to be breached, though, and we’re not going to let a couple of tiny bumps in the road spoil the greater perks of the CSS sprite.

Read more...

↑ Back to top