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
yairEO/photobox header-導覽列的變化 | RWD 基本概念 + 流變格局 【手機、平板】從上排到下，收合，按了漢堡按鈕才展開 【電腦】展開，在同一列並置中 很可怕嗎?? 其實不會唷~~ 我們來瞧瞧Bootstrapt可以怎麼套 也可以抓這邊的來改 我們抓"Basic starter"來改吧!! 原始檔 HTML code <div class="navbar navbar-inverse navbar-fixed-top"><div class="container"><div class="navbar-header"><button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button></div><div class="collapse navbar-collapse"><ul class="nav navbar-nav"><li><a href="#">Gallery</a></li><li><a href="#about">Product</a></li><li><a href="#contact">Servives</a></li><li><a href="#contact">About</a></li><li><a href="#contact">Content</a></li></ul></div><! CSS code 刪掉我們不要的，加上我們的按鈕名稱 再來把電腦展開的按鈕置中 利用col-xx-xx 和 col-xx-push-x
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.
wout/svg.js 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?
mattberridge/Proportional-Grids 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
Automattic/_s 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