About HTML semantics and front-end architecture

A collection of thoughts, experiences, ideas that I like, and ideas that I have been experimenting with over the last year. It covers HTML semantics, components and approaches to front-end architecture, class naming patterns, and HTTP compression. We shall not cease from exploration And the end of all our exploring Will be to arrive where we started And know the place for the first time. T.S. Eliot – “Little Gidding” About semantics Semantics is the study of the relationships between signs and symbols and what they represent. Distinguishing between different types of HTML semantics The principle of writing “semantic HTML” is one of the foundations of modern, professional front-end development. However, not all semantics need to be content-derived. Despite the HTML5 specification section on classes repeating the assumed “best practice” that… …there is no inherent reason to do this. Take this very simple example: <div class="news"><h2>News</h2> [news content] </div> Front-end architecture

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

wout/svg.js mattberridge/Proportional-Grids Automattic/_s Spritebox - Create CSS from Sprite Images dafont.com Grunt: The JavaScript Task Runner