Book - Scalable and Modular Architecture for CSS I have long lost count of how many web sites I’ve built. You would think after having built a few hundred of them I would have discovered the “one true way” of doing it. I don’t think there is one true way. What I have discovered are techniques that can keep CSS more organized and more structured, leading to code that is easier to build and easier to maintain. I have been analyzing my process (and the process of those around me) and figuring out how best to structure code for projects on a larger scale. The concepts were vaguely there with the smaller sites that I had worked on but have become more concrete as a result of working on increasingly complex projects. SMACSS (pronounced “smacks”) is more style guide than rigid framework. Inspiration In trying to learn more about what does and doesn't work in maintaining larger projects, I looked at how others were trying to solve similar problems. What’s in here? Now get started and dive in!
What is BEM? This article describes the theory and practice of building web sites at Yandex , a large Internet company. There are plenty of sites under development here, thousands in fact. The approaches we use for HTML/CSS markup and other front-end technologies are in constant evolution. Developing for a big portal has a range of specifics and the process should be able to accommodate them: Fast-to-develop, long-lived projects It should be possible to develop and launch the first version quickly with an architecture that helps maintain it in the long run. Numerous people working on a project We should be able to organize work efficiently in teams of 2 or more developers. Team scalability Adding new people to a product team should improve its productivity. Code should be well-structured for a project to remain maintainable over time and team changes. Code reuse To maintain UI consistency and minimize development effort on typical interface components, those components have to be easily reusable. Block Element
Learn Web Development with the Ruby on Rails Tutorial border-radius and -moz-border-radius < CSS One of the most keenly-anticipated CSS3 properties is border-radius. Web designers will no longer have to resort to complex table structures using custom-made corner graphics or including arcane JavaScript files in order to produce designs with rounded corners. While Internet Explorer before IE9 doesn't support many (or any) advanced CSS properties, the Mozilla (Firefox and related browsers) and WebKit (Apple's web browser engine used in Safari and Chrome) and Opera have supported them for many years. The vendor prefixes (-moz, -webkit) are now no longer necessary for the latest browser releases as they have all adopted the official CSS3 syntax. 1. As with many CSS properties relating to margins, padding and borders, there are four individual properties - one for each corner of a box element - and one shorthand property. Here are the CSS and browser-specific attributes in question: Prior to IE9 these CSS3 properties do not work in Internet Explorer. 2. Example 1 -moz-border-radius: 1em; 3.
WebZap - Photoshop panel plugin for web developers What Does “width: 100%” Do in CSS? It seems like this should be one of the easiest things to understand in CSS. If you want a block-level element to fill any remaining space inside of its parent, then it’s simple — just add width: 100% in your CSS declaration for that element, and your problem is solved. Not so fast. It’s not quite that easy. First Things First: Blocks Don’t Need 100% Width When we understand the difference between block-level elements and inline elements, we’ll know that a block element (such as a <div>, <p>, or <ul>, to name a few) will, by default expand to fit the width of its containing, or parent, element (minus any margins it has or padding its parent has). Most CSS developers understand this concept pretty well, but I thought it would be useful to point it out here as an introduction to explaining how percentages work when used on the width property. What it Really Means And of course, the exact same rule would apply to any percentage value. Should it Ever Be Used? What do you think?
Template Tags Languages: English • Español • Français • Italiano • 日本語 • 한국어 • Português do Brasil • Русский • ไทย • Türkçe • 中文(简体) • 中文(繁體) • (Add your language) Template tags are used within your blog's Templates to display information dynamically or otherwise customize your blog, providing the tools to make it as individual and interesting as you are. Below is a list of the general user tags available in WordPress, sorted by function-specific category. For further information on template tags and templates in general, see the following: Stepping Into Template Tags - an introduction to Template Tags. Note: If you have an interesting twist on the implementation of a template tag, you're encouraged to add to its documentation for the benefit of other WordPress users. Files Template tags files are stored in the wp-includes directory. Tags General tags wp-includes/general-template.php Author tags wp-includes/author-template.php Bookmark tags wp-includes/bookmark-template.php and wp-includes/bookmark.php
Son of Suckerfish Dropdowns Single-level Dropdowns Right. Let's not beat around the bush. The initial HTML we're dealing with will look something like this: <ul id="nav"><li><a href="#">Percoidei</a><ul><li><a href="#">Remoras</a></li><li><a href="#">Tilefishes</a></li><li><a href="#">Bluefishes</a></li><li><a href="#">Tigerfishes</a></li></ul></li><li><a href="#">Anabantoidei</a><ul><li><a href="#">Climbing perches</a></li><li><a href="#">Labyrinthfishes</a></li><li><a href="#">Kissing gouramis</a></li><li><a href="#">Pike-heads</a></li><li><a href="#">Giant gouramis</a></li></ul></li></ul> A good wholesome structured unordered list. To set things up we need some basic styling: Note that you need to specify a width in the #nav li selector or else Opera will chuck a wobbly. The CSS specs say that top, right, bottom and left values should offset an absolutely positioned box from its containing block. And there you go. Multi-level Dropdowns There are a few things we need to add to the single-level method. Examples
The CSS Overflow Property Every single element on a page is a rectangular box. The sizing, positioning, and behavior of these boxes can all be controlled via CSS. By behavior, I mean how the box handles it when the content inside and around it changes. For example, if you don't set the height of a box, the height of that box will grow as large as it needs to be to accommodate the content. There are four values for the overflow property: visible (default), hidden, scroll, and auto. Let's take a look at each and then discuss some common uses and quirks. Visible If you don't set the overflow property at all, the default is visible. The important thing to remember here is that even though the content is visible outside of the box, that content does not affect the flow of the page. Generally, you shouldn't be setting static heights on boxes with web text in them anyway, so it shouldn't come up. Hidden The opposite of the default visible is hidden. Scroll Auto Float Clearing Cross Browser Concerns IE 8 expanding box bug Demo
Equal Height Columns with Cross-Browser CSS and No Hacks by Matthew James Taylor on 17 October 2008 Creating equal height columns with CSS is not as easy as it may first seem. This tutorial highlights the display problems that occur with multiple column layouts, and then shows a simple solution that works in all common web browsers. The method shown here is 100% CSS hack-free, image-free and JavaScript-free so it can even be used on the most strictly coded websites. For those who want some action immediately check out my demo pages: 2 column, 3 column, 4 column and 5 column. The problem with equal height columns In the example above we have three columns each with a different amount of content. Separating the column content from it's background colour The first step to solving the equal height problem is to break it into smaller pieces that can be solved separately. A floated container div will always be the height of it's floated contents This is the central principle behind this equal column height method. Three column HTML div structure
CSS Floats 101 The float property is a valuable and powerful asset to any web designer/developer working with HTML and CSS. Tragically, it can also cause frustration and confusion if you don’t fully understand how it works. Article Continues Below Also, in the past, it’s been linked to some pretty nasty browser bugs so it’s normal to get nervous about using the float property in your CSS rule sets. Let’s calm those nerves and ease that frustration. I’ll show you exactly what the float property does to your elements and how incredibly useful it can be once you master it. We see floats in the print world every time we pick up a magazine article with an image on the left or right with text flowing nicely around it. The definition#section2 Let’s start with the definition of a float. A float is a box that is shifted to the left or right on the current line. The float property has four values that we can apply to it: left, right, inherit, and none. How floats behave#section3 Let’s look at a few more examples.
CSS Positioning 101 If you’re a front end developer or a designer who likes to code, CSS-based layouts are at the very core of your work. In what might be a refresher for some, or even an “a-ha!” for others, let’s look at the CSS position property to see how we can use it to create standards-compliant, table-free CSS layouts. Article Continues Below CSS positioning is often misunderstood. Sometimes, in a bug-fixing fury, we apply different position values to a given selector until we get one that works. The CSS specification offers us five position properties: static, relative, absolute, fixed, and inherit. Get with the flow#section1 First, let’s take a step back to recognize the world we’re working in. Boxes in the normal flow belong to a formatting context, which may be block or inline, but not both simultaneously. Think of a “box,” as described by the spec as a wooden block—not unlike the ones you played with as a young whippersnapper. Static and relative—nothing new here#section2 In action#section6
Understanding CSS Floats Using css floats effectively can be confusing and it’s probably one of the things that trips up most people when they’re first learning css. However once you learn to control floated elements it opens up a whole new world of possibilities in your design and makes developing layouts much simpler. And best of all floats really aren’t that hard to work with once you understand a few key points. What is a Float? A float is a box that is shifted to the left or right on the current line. The most interesting characteristic of a float (or “floated” or “floating” box) is that content may flow along its side (or be prohibited from doing so by the ‘clear’ property).— w3.org The float property has 3 values; none, which is the default, left, and right. Floats sit as far left or as far right as possible within the immediate containing div. The Difference Between Floats and Positioning In css there are 3 types of positioning schemes. How to Effectively Use Floats There are two main ways floats are used.
2 Column CSS Layout: Fixed Width And Centered One of the more common css layout patterns you’ll come across is the fixed width 2 column layout. It’s relatively easy to code and understand, though it sometimes trips up developers new to css layouts. A few weeks ago I promised to offer boilerplate code for some common css layout patterns. This is the first of that boilerplate code and I’ll continue to offer more in the coming weeks. If you prefer to skip the explanation and get right to the code you can view the source of the demo. The HTML The html for this layout is rather simple as you can see below. We have a single div for each of the 4 main areas of the layout — header, content, sidebar, and footer. One thing to note is the structure of the html above follows the structure of the page itself. Later in this post I’ll offer two ways to change the layout above so the sidebar is to the left of the content. The CSS If you’ve already viewed the source code of the demo you’ll note the css like the html is rather simple. Floated Elements