Rapid Prototyping For Any Device With Foundation - Smashing Coding Advertisement This article is the second piece in our new series introducing new, useful and freely available tools and techniques presented and released by active members of the Web design community (the first article covered PrefixFree, a new tool be Lea Verou). ZURB are well-known for their wireframing and prototyping tools and in this post they present their recent tool, Foundation, a framework to help you build prototypes and production code that’s truly responsive. You’ve probably already heard about responsive design, which is website design that responds to the device constraints of the person viewing it. All of this is forcing a convergence on what Jeremy Keith calls the “one Web”: a single Web that doesn’t care what device you’re on, how you’re viewing content or how you’re interacting with it. What we found at ZURB was that while the concept of one Web is strong and the need for responsive websites great, the tools to help us quickly build that way just didn’t exist. The Grid
Resolution Independence With SVG - Smashing Coding An Introduction To Object Oriented CSS (OOCSS) - Smashing Coding Create An HTML/CSS Mobile Web App Using Sencha Touch - Smashing Coding Advertisement The world of mobile app development is quickly becoming a crowded and complicated space, especially for those outside of the development niche. “Which development platform should I use?” “Do I go native or Web-based?” “Which devices should I plan for?” As a designer, my job is to help my clients answer these questions. What Is A Mobile Web App? A mobile Web app is an app that you access via a mobile browser (such as iPhone’s Safari). Why Create a Mobile Web App Instead of a Native App? Deciding whether a native or Web-based app is best for your client comes down to the audience they are trying to reach. Your audience is searching for you primarily from a mobile Web browser;Users are on a multitude of devices (iPhone, Android, BlackBerry, etc.) How To Design A Mobile Web App Those of you who have designed iOS native apps are used to fixed-width and -height images that are positioned and aligned in the Interface Builder (or using code). What does this mean? Embedding Regular CSS
CSS Reset | CSS Reset – All the most common CSS Resets in one place with one-click copy/paste, documentation and tutorials 7 Useful CSS3 Code Generators | Coding, Tools To write CSS manually is not tough, if you know the properties you can easily write CSS. But what if you are too lazy to write your own code then there are lots of CSS code generator available on net, as in CSS3 lots of new porperties introduced which are very helpful, we focused mainly on CSS3 code generators. CSS code generators make it easier to create the wanted code instantly; therefore anyone can do it without having any experience of CSS coding. CSS code generator can help you to learn more about CSS too and you will be able to write it manually too. Below we have listed 7 useful CSS3 code generators and you may also be interested in: 30 Effective CSS3 TutorialsNewest Design Trends with Popular CSS3 TechniquesHow To Develop CSS3 Border Radius ToolEverything You Need to Know about CSS3 Color TechniquesBest Examples of CSS3 Navigations and Menu Tutorials 1. 2. 3. Helps to generate Linear Gradients, Radial Gradients, Text Shadows, Box Shadows, Transforms and Text Stroke. 4. 5. 6. 7.
Pixels to Ems Conversion Table for CSS A companion reference to the article, The Incredible Em and Elastic Layouts With CSS. The em values in the table assume that the generic browser default setting of 16px font size has not being changed. It also assumes that the <body> has font size set to 1em or 100%. Formula to calculate em equivalent for any pixel value required 1 ÷ parent font size (px) × required pixels = em equivalent Example: 770px wide, centred elastic layout using CSS and ems N.B. 1 ÷ 16 × 770 = 48.125em <html><body><div> … </div></body></html> *I deliberately hooked the formula for the tutorial around 1px, as a value that designers can easily relate to. Required element pixel value ÷ parent font size in pixels = em value So, our required width of 770px in ems can be calculated like this:
Choose a basic leading that suits the typeface, text and measure “Vertical space is metered in a different way [to horizontal space]. You must choose not only the overall measure – the depth of the column or page – but also a basic rhythmical unit. This unit is the leading, which is the distance from one baseline to the next.” Leading (pronounced “ledding”) is so called because, in mechanical presses, strips of lead are placed between lines of type to space the lines apart. Leading is achieved in CSS through the line-height property. For example 12 point text can be given 3 points of lead in the following manner: However that example is bad as line-height should never be applied using absolute units such as points or pixels. A better approach is to make use of a unique characteristic of the line-height property: it is the only CSS property for which non-zero numeric values are allowed without units. In this example the value of line-height is a multiplier: 1.25 x 12 = 15 pt. line-height spacing is added equally above and below the text
Add and delete vertical space in measured intervals “Headings, subheads, block quotations, footnotes, illustrations, captions and other intrusions into the text create syncopations and variations against the base rhythm of regularly leaded lines. These variations can and should add life to the page, but the main text should also return after each variation precisely on beat and in phase.” The most common addition of vertical space on a webpage is that inserted between paragraphs. It should be noted that the default treatment by web browsers of paragraphs (and other block level elements such as blockquotes and lists) is to insert a top- and bottom-margin of 1 em. Variations in text size When there is a change in text size, perhaps with a heading or sidenotes, the differing text should take up a multiple of the basic leading. Headings The subheadings on this page are set to 14 px. One can also set asymmetrical margins for headings, provided the margins combine to be multiples of the basic line height. Sidenotes Images
«Резиновая вёрстка»: используем отрицательные поля - Вёрстка - Webmascon Я недавно столкнулся с задачей, в которой надо было создать двухколоночный макет страницы с "шапкой" и "подвалом", причём в коде страницы контент должен был быть расположен перед блоком боковой колонки. Я решил воспользоваться возможностью продемонстрировать малоизвестный приём CSS-вёрстки: отрицательные поля (negative margins). Отрицательные поля позволяют нам сместить область контента за границы окна браузера, освободив место для боковой колонки. Постановка задачи Итак, чтобы показать, как полезны могут быть отрицательные поля для создании резиновой вёрстки, давайте-ка сделаем резиновый двухколоночный макет с "шапкой" и "подвалом". Зная, как работают "плавающие" блоки, проще всего было бы разместить боковую панель перед блоком контента, позволив ей обтекать (float) контент с правой стороны. Исходный код Давайте-ка взглянем на код двухколоночной страницы с "шапкой" и "подвалом", с которым мы будем работать: Необходимые стили Теперь примемся за CSS. Наводим лоск И снова псевдо-колонки Вуаля!
Резиновая по ширине и высоте верстка (заготовка) « Блог о верстке В современной практике верстки веб страниц используется два варианта. Резиновая верстка и фиксированная. Вариант резиновой верстки мы с вами и рассмотрим поподробнее. Начать стоит со стуктуры макета. <div class="wrap"><div class="header"> Шапка </div><div class="sidebar-left"> Левая колонка </div><div class="sidebar-right"> Правая колонка </div><div class="content"> Центральная колонка </div><div class="clear"></div><div class="empty"></div></div><div class="footer"> Футер </div> В файле стилей зададим странице и основному контейнеру высоту в 100% Теперь зададим слою empty высоту 100 пикселей (равна высоте подвала). Все вместе это дает нам прижатый к низу футер, вне зависимости от высоты страницы (если конечно контента не больше) Далее зададим остальные стили. Результат работы можно посмотреть по ссылке: тыц
Резиновая верстка - Блочный подход - Верстка на div-ах - Прижатие футера к нижней части окна браузера Уважаемый читатель, устраивайтесь поудобнее и я познакомлю вас с принципами резиновой блочной верстки сайта. Ранее рассмотренная нами фиксированная модель превращается в резиновую всего-на-всего заменой пикселной ширины блока <div id=»wrapper»> на процентную. Таким образом, ширина сверстанного сайта будет изменяться в зависимости от размера окна браузера. В видеоуроке я установил ширину блока <div id=»wrapper»> в 100% от ширины окна браузера. Без определенных стилей выравнивания блока сайт съедит в левую часть окна. Первое, что приходит в голову — это указать у элемента body свойство text-align:center. Правильным будет указать равные левый и правый внешние отступы для элемента <div id=»wrapper»> и значение их — auto. CSS-инструкция для блока wrapper будет иметь такой вид: Или в сокращенной форме: Именно таким принципом необходимо руководствоваться при необходимости выровнять блок по центру родителя. В этом случае вы будите четко видеть границы верстаемого блока. Видео с сервиса RuTube:
Уроки CSS Выучить таблицы стилей css не так уж сложно, ведь их не так много, как тегов html или функций php. К тому же и учить понадобится не все. Главное - вы должны понять, как связать html и css. Для этого пройдите наши уроки css. ! Если этот сайт оказался вам полезен, вы можете помочь в его развитии, поставив одну из этих ссылок на свой сайт. Код кнопки: Скачайте одним архивом видеоуроки по верстке сайта! Теперь нажмите кнопку, что бы не забыть адрес и вернуться к нам снова.