www.archive-de-2012.com » DE » Y » YAML

Choose link from "Titles, links and description words view":

Or switch to "Titles and links view".

    Archived pages: 10 . Archive date: 2012-07.

  • Title: YAML CSS Framework — for truly flexible, accessible and responsive websites
    Descriptive info: .. Skip to navigation (Press Enter).. Skip to main content (Press Enter).. Yet Another Multicolumn Layout - continuously developed since 2005.. Home.. Docs Demos.. Layout Demos and Documentation.. License.. License Modells License Conditions.. Resources.. Download Archive, Developer Tools CMS Integration.. Development Blog.. Latest news, release notes and tipps tricks (on Google+).. YAML.. 4.. CSS Framework.. A modular CSS framework for truly.. flexible.. ,.. accessible.. and.. responsive.. websites.. Features.. Bulletproof flexible grid system.. Flexible forms toolkit with theme-support.. Focussed on web standards accessibility.. Optimized typography for all standard elements.. Matched building blocks for rapid prototyping.. Namespacing avoids conflicts.. Well prepared for HTML5 and CSS3.. Very slim framework core (4.. 6 kB).. Browser Support.. YAML is tested and supported in major modern browsers like Chrome, Firefox, Opera, Safari and Internet Explorer.. Latest Google Chrome.. Mozilla Firefox 3.. 6+.. Opera 10+.. Apple Safari 4+.. Internet Explorer 6+.. Download.. Latest Release:.. v4.. 0.. 1, (Build: 120306).. Released under Creative Commons License CC-BY 2.. Please read the.. license conditions.. Documentation Quick Start Demos.. are included.. Older versions, including YAML v3.. x, are available in the.. download archive.. Tweet.. Where it comes from.. A  ...   to be stable under real-world conditions on thousands of websites.. Over the years, YAML-based websites won several awards at the German annual accessibility competition Biene Award.. What makes it different?.. Modular Concept.. YAML provides a complete set of matched building blocks to create complex websites.. Grids, navigation, forms, typography module and all provided add-ons work seamlessly together.. HTML5 CSS3.. All layout modules are well prepared for HTML5 and CSS3 and make use of them to benefit from the latest web technologies.. Device Independence.. YAML is focussed on device indepentent screen design and provides bullet-proof modules for flexible layouts.. This is a perfect starting point and the key to truly responsive design.. Developer Support.. YAML has matured into a stable and versatile layout framework, and is regularly updated.. Third party developers have created integration tutorials and templates for a long list of Content Management Systems.. nxtbgthng.. com.. live since 2011.. YAML 3.. 3.. wien.. at.. live since 2010.. highresolution.. info.. live since 2008.. 6.. © 2005 2012 by Dirk Jesse,.. Highresolution.. Code and Documentation licensed under.. CC BY 2.. Imprint.. |.. YAML-Shop.. by.. Itratos.. Follow @yamlcss.. Layout based on..

    Original link path: /
    Open archive

  • Title: Documentation & Demos – YAML CSS Framework
    Descriptive info: Latest news, release notes and tipps & tricks (on Google+).. Quick Start.. Introduction.. Layouts.. Grids.. Columns.. Forms.. Floats.. Accessibility.. Navigation.. Typography.. Add-ons.. Quick Start Demos.. Here are some examples that show the YAML CSS framework in full flight.. Flexible Grid.. A flexible and responsive grid layout showing the basic usage of YAMLs grid elements.. View Example.. Columns Grids.. A responsive layout with a flexible content column, some nested grid elements and a fixed width sidebar.. Custom Grid (960px).. A fixed grid layout, based on 960 Grid System.. It shows the use of custom grid configurations.. RTL Support.. A demo for YAMLs support of Hebrew or Arabic languages, that have right to left text flow.. Framework Core.. Framework Base: "base.. css".. yaml/core/base.. css.. The stylesheet.. base.. in the folder.. yaml/core/.. is the first and most important core-file of the YAML framework.. It lays the foundation (browser normalisation, layout-modules eg.. grids, forms etc.. ).. This stylesheet is required for every YAML-based layout and should not be changed!.. Module.. Classes.. Short Description.. Normalisation.. -.. This module provides a reliable foundation for development by crossbrowser-normalizing the visual style for the most important elements.. YAML offers an optional typography module containing default styles for all typical semantic HTML elements with an em-based (proportional to base font-size) vertical rhythm.. Layout.. parent class.. ym-wrapper.. optional class.. ym-wbox.. The layout module defines a layout-wrapper and default values for minimum and maximum width.. Grid.. ym-grid.. child classes.. ym-gl.. ym-gr.. ym-g[xx].. optional classes.. ym-equalize.. ym-gbox.. ym-gbox-left.. ym-gbox-right.. The grid module provides flexible, nestable grids.. Standard column widths are based on percentages.. Optionally, all columns within a grid row can have equal height.. Grid sizes can be extended/customized with user-defined CSS classes.. Column.. ym-column.. ym-col[1|2|3].. ym-cbox.. ym-cbox-left.. ym-cbox-right.. The column module divides a content area horizontally into a set of 2 or 3 columns whose widths can be defined in arbitrary units [px, em, %].. Column order can be defined via CSS by the user.. Form.. ym-form.. ym-fbox-text.. ym-fbox-select.. ym-fbox-check.. ym-fbox-button.. ym-full.. ym-columnar.. ym-required.. ym-error.. ym-message.. ym-label.. The form module provides the standard building blocks for designing robust flexible forms and offers three positioning options for arrangement of labels and form elements.. YAML strictly separates structural form design (base.. css) from visual styling of the form, to enable easy theming.. Float Handling.. float clearing.. ym-clearfix.. float containing.. ym-contain-dt.. ym-contain-oh.. ym-contain-fl.. This module offers several classes to handle floated objects within the layout.. The.. class enables markup-free clearing of floats.. The other predefined classes can be used to contain floated elements (or to handle unknown content in general, e.. g.. user generated content).. ym-skiplinks.. child class.. ym-skip.. ym-hideme.. ym-print.. ym-noprint.. The accessibility module provides a robust, layout-independent implementation for skip links.. Furthermore it contains CSS classes to make content accessible for screen readers but hide them in visual media or make them visible only in the printed output.. Support for old Internet Explorer versions "iehacks.. yaml/core/iehacks.. iehacks.. from the.. folder is the second core component of the YAML framework.. It contains all the structure- and layout-independent bugfixes for Internet Explorer (versions 5.. x/Win - 7.. 0/Win).. This bugfix-collection is essential for the robust and error-free presentation of YAML-based layouts in old Internet Explorer.. This stylesheet is optional but required for legacy support of old Internet Exlorer versions prior IE 8 and should remain unchanged! Many bugfixes exploit IE's numerous parser bugs - particularly those in older IE versions.. The resulting CSS code is therefore not always valid and should thus only be made accessible to IE.. This is possible with the use of.. Conditional Comments.. in the.. head.. of the document.. The Conditional Comment has to be included below all regular stylesheets.. List of CSS bugsfixes provided by.. :.. fixes italics bug.. fixes disappearing list-background bug.. fixes list-numbering bug.. fixes guillotine bug (IE6, in most cases).. fixes doubled float-margin bug (for YAML's structural elements).. workaround for expanding box problem.. removes additional paddings in buttons.. triggers hasLayout for HTML5 elements and YAML's structural elements.. activates bicubic interpolation for image scaling.. several stability fixes.. Basic Framework Integration.. Here's a template of an empty HTML5 file containing the integration of YAML's core stylesheets:.. !doctype html html lang= en head meta charset="utf-8"/ title /title.. meta name= description content= /.. meta name= author content= / !-- mobile viewport optimisation -- meta name="viewport" content="width=device-width, initial-scale=1.. 0".. !-- stylesheets --.. link rel= stylesheet href= yaml/core/base.. min.. css type= text/css / link rel= stylesheet href= css/styles.. css type= text/css / !--[if lte IE 7].. link rel= stylesheet href= yaml/core/iehacks.. css type= text/css /.. ![endif]-- /head body.. /body /html.. For both core-files, minified file versions are provided.. weights only 4.. 6 kB and.. has a filesize of 2.. 1 kB.. Use them for your production code.. For development and a deeper understanding of the framework use the non-minified, commented file versions.. Of course, you can build your layouts on XHTML 1.. 0 or HTML 4 Strict.. YAML only requires the browser to be in Standard Mode.. In Quirks Mode, YAML can't provide IE6 and 7 support.. Central Stylesheets for Improved Development Workflow.. For prototyping and working with several, reusable stylesheets, YAML uses central stylesheets that import all other stylesheets.. This reduces HTML changes (think of Content Management Systems) to a minimum during development.. link rel= stylesheet href= css/central.. ![endif]-- /head.. Here's an example for how such a central stylesheet could look like:.. /* Google Font API */ @import url( http://fonts.. googleapis.. com/css?family=Droid+Serif ); @import url( http://fonts.. com/css?family=Droid+Sans:700 ); /* import framework core */ @import url(.. /yaml/core/base.. css ); /* import screen layout */ @import url(.. /yaml/navigation/hlist.. css ); @import url(.. /yaml/forms/gray-theme.. css ); @import url( screen.. css ); @import url( typography.. css ); /* import print layout */ @import url( print.. css );.. For production use, all stylesheets should ideally be concatenated and minified to reduce HTML requests and bandwidth of course.. HTML5 Support.. Visit the.. html5shim.. project on Google Code.. The recent version 3.. 0 of.. has some.. issues.. I recommend watching the discussion and/or try one of these alternatives:.. html5 innershiv.. IEPP.. HTML5 is supported by all modern browsers.. To enable Internet Explorer 6-8 to render HTML5 elements correctly, JavaScript is mandatory to register the new elements so that the browser allows them to be styled with CSS.. !--[if lt IE 9] script src="http://html5shim.. googlecode.. com/svn/trunk/html5.. js" /script ![endif]-- /head.. On the.. htm5shim.. project page this code-snippet is presented without the leading http: in the script URL.. This is no problem as long as you're running on a webserver.. It fails, if you're testing an HTML file from the file system on your local machine that's why we included it here.. Layout Module.. Flexible Layouts.. The CSS2 Box Model is best suited for fixed measurements (i.. e.. pixels).. The total width of a container is determined by adding the individual properties of the box:.. width.. padding.. , and.. border.. If there are mixed units of measurement within a container (e.. width: 25%; padding: 0 10px;.. ), it is no longer possible to calculate the total width of the container in advance.. YAML solves this problem by using nested elements to separate values for width (.. ) and.. paddings.. borders.. (.. ).. elements are.. optional.. and can be removed when using CSS3 Box Modell (.. box-sizing:border-box.. PAGE Layout.. Header.. Main.. Footer.. The layout looks like a single sheet of paper on top of.. body.. All content sections are wrapped by a single width-defining element.. Default Markup.. body div class= ym-wrapper div class= ym-wbox header.. /header.. /div /div /body.. FULLPAGE Layout.. Header.. Main.. Footer.. The layout is subdivided into several vertical aligned sections, covering the full width of the viewport.. The content area is aligned or centered within these sections.. body header div class= ym-wrapper div class= ym-wbox.. /div /div /header.. /body.. Layout Configuration.. Values for.. min-width.. max-width.. are defined for the.. element, as the outmost layout element.. Any white space to the boundaries of the layout can be defined for.. , using.. margin.. or.. ym-wrapper { min-width: 760px; max-width: 80em; }.. ym-wbox { padding: 10px; }.. The value for.. should be defined for the outmost layout element (here:.. header.. All other width values (.. ) have to be defined for the.. element.. White space surrounding the layout can be defined for.. body header { min-width: 760px; }.. ym-wrapper { max-width: 80em; }.. ym-wbox { padding: 10px; }.. Grids Module.. Grids are wrapped by an element with the.. class.. To allow independent control of grid-column widths and gutters (remember the CSS2 Box Modell), YAML uses a nested structure were.. classes hold.. values and.. class holds.. values.. Default Grid Configuration.. 20 %.. 25 %.. 33.. 333 %.. 333 %.. 50 %.. Full Width.. Predefined Split-Values.. Grid Classes.. CSS class.. Column Width.. ym-g20.. ym-g25.. ym-g33.. 3333 %.. ym-g38.. 38.. 2 % (Golden Ratio).. ym-g40.. 40 %.. ym-g50.. ym-g60.. 60 %.. ym-g62.. 62.. 8 % (Golden Ratio).. ym-g66.. 66.. 6666 %.. ym-g75.. 75 %.. ym-g80.. 80 %.. Grid Visualisation.. 20 %.. 80 %.. 25 %.. 75 %.. 666 %.. Golden Ratio (1 : 1.. 618) 38.. 2%.. 618) 61.. 8%.. 40 %.. 60 %.. 50 %.. Golden Ratio (1.. 618 : 1) 61.. 618 : 1) 38.. The grid module is based on floats.. Standard float direction is left, using CSS class.. At the end of each row, rounding errors will be corrected by changing the float direction for the last column to right (.. To allow independent control of column- and gutter-widths, YAML uses a nested structure were.. class holds gutter values as.. div class= ym-grid div class= ym-g50 ym-gl div class= ym-gbox !-- content --.. /div /div div class= ym-g50 ym-gr div class= ym-gbox !-- content --.. /div /div /div.. Nested Grids.. Grids can be nested in any variation to achieve your design.. You can also combine or nest grid modules and column modules within your layouts.. div class= ym-grid div class= ym-g50 ym-gl div class= ym-gbox !-- content: grid-column -- /div div class= ym-grid div class= ym-g50 ym-gl !-- content: nested grid-column -- /div div class= ym-g50 ym-gr !-- content: nested grid-column -- /div /div /div div class= ym-g50 ym-gr.. /div /div.. Advanced Grid Features.. Custom Grids.. yaml/screen/grid-960-12.. yaml/screen/grid-960-16.. YAMLs grid module provides a logical subdivision of widths (1/2, 1/3, 1/4, 1/5 and Golden Ratio) but it can easily be extended.. Custom grid configurations, e.. a fixed grid, can be created with only a few lines of CSS.. Here is an example for a simple.. 960.. gs.. port (without pull and push classes):.. Custom Grid Configuration.. /* Simple 960.. gs port for YAML 4 */.. ym-g960-1 { width: 80px; }.. ym-g960-2 { width: 160px; }.. ym-g960-3 { width: 240px; }.. ym-g960-4 { width: 320px; }.. ym-g960-5 { width: 400px; }.. ym-g960-6 { width: 480px; }.. ym-g960-7 { width: 560px; }.. ym-g960-8 { width: 640px; }.. ym-g960-9 { width: 720px; }.. ym-g960-10 { width: 800px; }.. ym-g960-11 { width: 880px; }.. ym-g960-12 { width: 960px; }.. ym-gbox { padding: 0; margin-right: 20px; }.. Custom Grid Markup.. div class= ym-grid div class= ym-g960-6 ym-gl div class= ym-gbox !-- content: left -- /div /div div class= ym-g960-6 ym-gl div class= ym-gbox !-- content: right --.. Predefined stylesheets for a 12- and 16-columns port of 960.. gs can be found in folder.. /yaml/screen/.. In the same way, it is possible to create robust custom grids based on em-unit or to extend YAMLs percentage-based grids with other ratios and you're still able to define.. properties independently.. This way the most complex flexible grids are still very easy to handle.. Equal Heights Grids.. Have you ever dreamed of flexible content boxes with complete graphical styling ability? Do you wish them to feature.. equal heights.. via pure CSS? Do you need them to be.. crossbrowser.. with full support for.. older.. IEs?.. Here they are.. Left Grid Column.. List Item 1.. List Item 2.. List Item 3.. Right Grid Column.. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.. At vero eos et accusam et justo duo dolores et ea rebum.. Stet clita kasd gubergren.. To enable equalized column heights within a grid row, simply add.. to the grid container.. div class= ym-grid ym-equalize.. /div.. Technical Information.. This.. flexible equal heights.. solution is based on YAMLs grid module and combines three layout techniques.. The equal height boxes are based on CSS tables (in all modern browsers) and floats (in Internet Explorer 6.. x – 7.. 0).. Additionally it uses Alex Robinson's.. Equal Height.. technique for.. containers in all browsers and therefore inherits one of its limits.. Limits of this "equal heights" approach.. As Alex Robinson writes in.. Appendix J.. of his «one true layout» article, some browsers have issues when.. linking to anchors in elements within the containing block.. (e.. anchors of skip links).. This problem is fixed in recent versions of Firefox, Opera and Safari and there is a workaround for IE5.. x IE6 – but this can't be fixed in Internet Explorer 7.. 0 with CSS.. Therefore keep that issue in mind (avoid linking into equalized containers) when using equal heights subcolumns.. Responsive Grids.. Flexible layouts work best when their responsive behavior is based on the boundary conditions of the individual screen designs.. That's why YAML doesn't provide a pre-baked plan for linearization of grid elements.. As a frontend developer, you are completely free to define, how many levels of linearization your design needs and when they should be applied.. Progressive Linearization.. Here's a code-snippet to a linearization level for the grid module at a viewport size, lower then 760px.. To create additional levels, copy this media block, set the viewport size, when the new level is triggerd (.. ) and count up the number in the class name.. @media screen and ( max-width: 760px ) {.. /* linearization for grid module */.. linearize-level-1,.. linearize-level-1 > [class*="ym-g"] { display: block; float: none; padding: 0; margin: 0; width: 100% !important; } /* reset defined gutter values */.. linearize-level-1 > [class*="ym-g"] > [class*="ym-gbox"] { overflow: hidden; /* optional for containing floats */ padding: 0; margin: 0; } }.. Add the class.. linearize-level-1.. to any grid module, you want to be linearized:.. div class= ym-grid linearize-level-1.. Column Module.. Creating a Column-Set.. Columns are wrapped by  ...   as wall as any other element can be styled as buttons with optional icons.. Icons are generated from UTF-8 Dingbats characters (U+2700.. U+27BF), so they are scalable and no images are needed.. !-- simple buttons -- button class="ym-button" text /button a href="#" class="ym-button" text /a !-- buttons with icons -- button class="ym-button ym-add" text /button a href="#" class="ym-button ym-add" text /a.. add.. delete.. edit.. email.. like.. next.. play.. save.. spark.. star.. Float Handling.. YAML provides several different standard methods for clearing and containing float objects.. Clearing Floats.. To clear floats without extra markup, YAML provides the class.. Use it to clear floats without extra markup or avoid margin collapsing problems in static containers.. The Clearfix hack provided by YAML is a combination of.. Clearfix Reloaded.. from.. Thierry Koblentz.. and the.. Micro Clearfix Hack.. Nicolas Gallagher.. The reason for this is, that the reloaded version causes problems when there are several float objects within the same block formatting context (e.. in YAMLs column module).. ym-clearfix:before { content: ; display:table; }.. ym-clearfix:after { clear:both; content:.. ; display:block; font-size:0; height:0; visibility:hidden; }.. ym-clearfix {zoom: 1;} /* IE 8 */.. Containing Floats.. To contain float-objects within a parent element, YAML provides the following methods:.. Containing floats is achieved via.. display:table; width: 100%;.. This should be used, if oversized child-elements should be allowed to slide into neighbor elements or if they have effects attached (e.. box-shadow) that shouldn't be clipped by the parent element.. Note: In Firefox you can't combine properties.. display:table.. position:relative.. If you need to, use.. instead.. Note 2: As part of the table characteristics.. causes the element to be enlarged to fit all child elements, even if they are oversized.. CSS properties.. overflow.. doesn't have an effect in this case.. overflow:hidden; width: 100%;.. This should be used, if oversized child-elements should be clipped by the parent element without scrollbars.. Avoid this method if you use e.. CSS3 box-shadows on child elements, as these shadows will be clipped as well.. Containing floats is done via.. float:left; width: 100%;.. This is an alternative to.. , when relative positioning is needed for the attached element.. Accessibility.. yaml/core/js/yaml-focusfix.. Skip Links.. Skip links are created as an unordered list and styled with the class.. This class is defined in.. and controls the visual properties of the list.. Furthermore, each link in the list is marked up with the class.. body !-- skip link navigation -- ul class= ym-skiplinks li a class= ym-skip href= #nav Skip to navigation (Press Enter) /a /li li a class= ym-skip href= #main Skip to main content (Press Enter) /a /li /ul.. Fixing IE Webkits Focus Problems.. Although there are no problems with the visual presentation of skip links, Internet Explorer 8 on Windows 7 as well as Webkit-based browsers such as.. Safari.. Chrome.. require a focus bugfix as these browsers do not automatically set the skip to the link target.. YAML provides a script (.. yaml-focusfix.. js.. ), which finds all the skip links in a document, analyzes their targets, and automatically sets the focus to the target if one of the links is clicked.. !-- full skip link functionality in ie8 webkit browsers -- script src=".. /yaml/core/js/yaml-focusfix.. js" type="text/javascript" / /body.. Hidden Content.. The use of the unordered list.. (see above) is optional, but the preferred solution.. Alternatively, you can integrate the skip links directly into the layout.. To ensure the functionality, the CSS class.. is required for skip anchors.. Elements with the CSS class.. are visually hidden in browsers, but still accessible for screen readers.. are visually hidden in media.. screen.. , but still accessible for screen readers.. and.. visible on media print.. will not be printent, but are.. visible on any other media type (e.. screen).. Navigation Module.. yaml/navigation/hlist.. yaml/navigation/vlist.. In the left column you’ll find an example for a vertical navigation, in the right column one for a horizontal navigation.. The tabbed box shows the default markup for both examples.. Vertical Navigation.. Optional Title.. Entry 1.. Entry 2.. Open Entry 3.. Entry 3.. 1.. Active Entry 3.. 2.. Entry 4.. Entry 5.. Horizontal Navigation.. Active.. Link.. nav class="ym-hlist" ul li class="active" strong Active /strong /li li a href="#" Link /a /li li a href="#" Link /a /li li a href="#" Link /a /li li a href="#" Link /a /li /ul !-- optional search form -- form class= ym-searchform input class= ym-searchfield type= search placeholder= Search.. / input class= ym-searchbutton type= submit value= Search / /form /nav.. nav class="ym-vlist".. h6 class="ym-vtitle" Optional Title /h6 ul li a href="#" Link 1 /a /li li a href="#" Link 2 /a /li li span Link 3 /span ul li a href="#" Link 3.. 1 /a /li li class="active" strong Link 3.. 2 /strong /li li a href="#" Link 3.. 3 /a /li /ul /li li a href="#" Link 4 /a /li li a href="#" Link 5 /a /li /ul.. /nav.. Typography.. yaml/screen/typography.. Headings & Paragraphs.. Heading Levels.. H1 Heading.. H2 Heading.. H3 Heading.. H4 Heading.. H5 Heading.. H6 Heading.. Paragraphs.. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.. Special Paragraphs.. This is a paragraph text with class= highlight.. This is a paragraph text with class= dimmed.. This is a paragraph text with class= box info.. This is a paragraph text with class= box success.. This is a paragraph text with class= box warning.. This is a paragraph text with class= box error.. Misc.. Elements.. Blockquotes.. This is a paragraph text within a blockquote element.. Preformatted Text.. This is preformatted text, wrapped in a pre element.. Inline Semantic Text Decoration.. an.. anchor.. tag (.. a.. ) example.. italics.. emphasize.. i.. ,.. em.. ) example.. big.. small.. big.. small.. bold.. strong.. b.. strong.. acronym.. abbreviation.. acronym.. abbr.. cite.. quote.. cite.. q.. code.. definition.. code.. dfn.. teletype.. keyboard.. tt.. kbd.. variable.. sample.. var.. samp.. inserted.. deleted.. ins.. del.. subscript.. superscript.. sub.. sup.. mark.. tag (HTML5) (.. mark.. Media.. Handling images and videos in flexible environments.. Flexible Media.. flexible {.. max-width: 100%; } /* IE6 support - 2% space for borders */ * html.. flexible { width: 100%; }.. By adding the CSS class.. flexible.. to an image or video, you can allow the browser to downscale this element to fit the size of its parent element.. It will not be upscaled in modern browsers (in old IE6 & 7 it will as part of the provided work-around.. Media Borders.. bordered {.. border: 2px #eee solid; border: 2px rgba(255,255,255,1) solid; box-shadow: 0 0 3px rgba(0,0,0,.. 25); }.. You can add a border to your images or videos by adding the CSS class.. bordered.. Lists.. Unordered List.. ut enim ad minim veniam.. occaecat cupidatat non proident.. facilisis semper.. quis ac wisi augue.. risus nec pretium.. fames scelerisque.. nostrud exercitation ullamco.. labore et dolore magna aliqua.. aute irure dolor in reprehenderit in voluptate velit esse cillum dolore.. Ordered List.. ut enim ad minim veniam.. occaecat cupidatat non proident.. Definition List.. A definition list this is dt.. A definition list this is dd element.. Horizontal Arrangement.. Floating Left.. float-left { float:left; display:inline; margin: 1.. 5em 1em 0 0; }.. Centered.. center { display:block; text-align:center; margin: 1.. 5em auto 0 auto; }.. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.. Floating Right.. float-right { float:right; display:inline; margin: 1.. 5em 0 0 1em; }.. Tables.. Default Table Style.. The default style for tables has left aligned cells and a minimal set of borders.. Vertical alignment of table cells is set to.. top.. Id.. Product Name.. Value.. 1.. Pencil.. cheap.. 2.. Car.. expensive.. table thead tr th.. /th.. /tr /thead tbody tr td.. /td.. /tr /tbody /table.. A classic table style can be achieved with CSS class.. bordertable.. table class= bordertable.. /table.. Both table styles can be combined with CSS class.. narrow.. to achieve smaller table rows (especially useful for big tables).. table class= bordertable narrow.. Accessible Tabs.. yaml/add-ons/accessible-tabs/.. is a jQuery plugin by Dirk Ginader, that generates accessible tabbing environments from standard HTML markup, and therefore provides a perfect fallback solution when JavaScript is disabled.. Get the latest version of this plugin on.. Github.. Live Example.. Topic A.. Lorem ipsum.. Nullam malesuada suscipit pede.. Nullam ipsum lacus, varius vel, nonummy in, consequat ut, neque.. Vivamus viverra.. Duis dolor arcu, lacinia sit amet, sollicitudin sed, aliquet vel, quam.. Pellentesque molestie laoreet tortor.. Aenean quam.. Pellentesque magna metus, venenatis sit amet, congue nec, dictum in, est.. Aliquam nibh.. Topic B.. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.. Topic C.. Your content could be here.. div class= jquery_tabs h4 Topic A /h4 p class= tabbody.. /p h4 Topic B /h4 p class= tabbody.. /p h4 Topic C /h4 p class= tabbody.. /p /div.. transforms a predefined content area, wrapped with.. jquery_tabs.. into a tabbing environment, where specific elements (default:.. h4.. ) become tab headings and class.. tabbody.. defines the content (or its wrapper).. Implementation.. link rel="stylesheet" href="yaml/add-ons/accessible-tabs/tabs.. css" type="text/css"/.. /head body.. script src="lib/jquery-1.. 7.. js" type="text/javascript" / script src="yaml/add-ons/accessible-tabs/jquery.. tabs.. $(document).. ready(function(){ $('.. jquery_tabs').. accessibleTabs(); });.. Synchronize Heights.. Tabbing environments can have synchronized tab heights.. This is realized by combining the Accessible Tabs Plugin with the syncHeight Plugin.. js" type="text/javascript" / script src="yaml/add-ons/syncheight/jquery.. syncheight.. accessibleTabs({ syncheight: true }); });.. SyncHeight.. yaml/add-ons/syncheight/.. SyncHeight jQuery Plugin Implementation.. Plugin for.. jQuery.. allows you to sync heights between all element, defined by the given jQuery selector.. To enable resyncing elements after browser resizing, enable.. updateOnResize.. option.. container-a,.. container-b').. syncHeight({ updateOnResize: true }); });.. yaml/add-ons/rtl-support/.. Handling Hebrew or Arabic languages.. This add-on provides all the relevant components for working with YAML in Hebrew or Arabic languages whose text flows from right to left.. The plugin's files are in the folder.. Within that folder are the subfolders.. core/.. with the adjustments of the core file of the framework:.. base-rtl.. The folder.. screen/.. contains typograhpy adjustments in.. typography-rtl.. and in folder.. navigation/.. you will find appropriate ajdustments-files for YAML navigations.. Basic Principles.. The support of.. right-to-left.. languages comes from special stylesheets which overwrite existing CSS rules to control text direction and content positioning.. These stylesheets thus only contain incremental changes and include the suffix.. -rtl.. in the filename: the adjustments necessary for the file.. are found in the file.. The activation of the changed text flow from right to left takes two steps.. The first step is to change the text direction with the dir attribute of the.. element of the page:.. head dir="rtl".. The second step is to merely link the RTL stylesheets into your layout.. Within the.. , the CSS property.. direction: rtl;.. is assigned again to the.. html lang= {language-code} dir= rtl.. /hmtl.. Along with the text direction, many other CSS properties must be changed -- margins, indentations, etc.. , to present the text correctly.. The corresopnding central stylesheet always links the normal YAML components first and then the RTL variation to overwrite them.. /* import core styles | Basis-Stylesheets einbinden */ @import url(.. css);.. @import url(.. /yaml/add-ons/rtl-support/core/base-rtl.. css);.. This is the best and most simple way for rapid prototyping.. For production environments we recommend to combine both stylesheets to reduce the amount of HTTP requests.. Microformats.. yaml/add-ons/microformats/.. Microformats are small bits of HTML that represent things like people, events, tags, etc.. in web pages.. Microformats enable the publishing of higher fidelity information on the Web, providing the fastest and simplest way to support feeds and APIs for your website.. See more explanations of.. what microformats are.. what you can do with them.. Microformats Generators.. hCard creator.. hCalendar creator.. hReview creator.. XFN creator.. Read more on.. microformats.. org.. Most Common Microformats.. Contact example (hCard).. Draft Preview.. CommerceNet.. Work.. :.. 169 University Avenue.. Palo Alto.. CA.. 94301.. USA.. Tel (work):.. +1-650-289-4040.. Fax:.. +1-650-289-4041.. E-Mail:.. info@commerce.. net.. div class= vcard a class= fn org url href= http://www.. commerce.. net/ CommerceNet /a div class= adr span class= type Work /span : div class= street-address 169 University Avenue /div span class= locality Palo Alto /span , abbr class= region title= California CA /abbr span class= postal-code 94301 /span div class= country-name USA /div /div div class= tel span class= type Tel (work): /span +1-650-289-4040 /div div class= tel span class= type Fax: /span +1-650-289-4041 /div div E-Mail: span class= email info@commerce.. net /span /div /div.. Event examples (hCalendar).. http://www.. web2con.. com/.. Web 2.. 0 Conference.. October 5.. -.. 19.. , at the.. Argent Hotel, San Francisco, CA.. div class= vevent a class= url href= http://www.. com/ http://www.. com/ /a span class= summary Web 2.. 0 Conference /span abbr class= dtstart title= 2007-10-05 October 5 /abbr - abbr class= dtend title= 2007-10-20 19 /abbr , at the span class= location Argent Hotel, San Francisco, CA /span /div.. XYZ Project Review.. Project XYZ Review Meeting.. To be held on.. 12 March 1998 from 8:30am EST.. until.. 9:30am EST.. Location:.. 1CP Conference Room 4350.. Booked by:.. guid-1.. host1.. on.. 9 Mar 1998 6:00pm.. 0 Conference /span abbr class= dtstart title= 2007-10-05 October 5 /abbr - abbr class= dtend title= 2007-10-20 19 /abbr , at the span class= location Argent Hotel, San Francisco, CA /span /div div class= vevent h3 class= summary XYZ Project Review /h3 p class= description Project XYZ Review Meeting /p p To be held on abbr class= dtstart title= 1998-03-12T08:30:00-05:00 12 March 1998 from 8:30am EST /abbr until abbr class= dtend title= 1998-03-12T09:30:00-05:00 9:30am EST /abbr /p p Location: span class= location 1CP Conference Room 4350 /span /p small Booked by: span class= uid guid-1.. com /span on abbr class= dtstamp title= 19980309T231000Z 9 Mar 1998 6:00pm /abbr /small /div.. rel-Tag.. Tags.. Best Practice.. Webstandards.. p class= tags.. span lang= en xml:lang= en Tags /span :.. a href= http://www.. mister-wong.. de/tags/best-practise/ rel= tag Best Practice /a , a href= http://www.. de/tags/webdesign/ rel= tag Webstandards /a /p.. XFN.. Me.. Jane.. Dave.. Darryl.. James Expert.. ul li a href= http://www.. metafilter.. com/ class= xfnRelationship rel= me Me /a /li li a href= http://jane-blog.. example.. org/ class= xfnRelationship rel= sweetheart date met Jane /a /li li a href= http://dave-blog.. org/ class= xfnRelationship rel= friend met Dave /a /li li a href= http://darryl-blog.. org/ class= xfnRelationship rel= friend met Darryl /a /li li a href= http://james-blog.. com/ class= xfnRelationship rel= met James Expert /a /li /ul.. Geo.. Photo taken at.. North Bondi.. p Photo taken at abbr title= -33.. 890937;151.. 281985 class= geo North Bondi /abbr.. /p.. administrated by..

    Original link path: /docs/index.html
    Open archive

  • Title: License Conditions – YAML CSS Framework
    Descriptive info: License Conditions.. Information.. Freelancers and web agencies cannot always conform to the terms of use of the Creative Commons license, as customers seldom desire copyright notices of third party projects on their sites.. In order to make the use of YAML possible in these cases, license models for commercial use have been developed, alternative to the Creative Commons license.. YAML under Creative Commons License.. The YAML framework is published under the.. Creative Commons Attribution 2.. 0 License.. (CC-BY 2.. 0), which permits both private and commercial use.. Condition:.. For the free use of the YAML framework, a backlink to the YAML homepage (.. yaml.. de.. ) in a suitable place (e.. : footer of the website or in the imprint) is required.. In general it would be nice to get a short note when new YAML-based projects are released.. If you are highly pleased with YAML, perhaps you would like to take a look at my.. Amazon.. wish list.. ?.. YAML under Commercial Distribution License.. If you are a commercial software developer and you want to release your software under a different license than CC-BY 2.. 0, you may purchase commercial licenses.. By purchasing commercial licenses, we offer you the freedom to choose between the following license models.. License.. Pricing.. Project Licence.. 59.. 50 EUR (incl.. 19% Taxes).. Purchase a License.. General Licence.. 119.. 00 EUR (incl.. OEM Licence.. Contact us for pricing information!.. General License.. General License YAML COMMERCIAL DISTRIBUTION LICENSE (CDL).. Definitions, Subject Matter of Agreement.. a).. Yet Another Multicolumn Layout.. (hereinafter referred to as YAML) is a CSS software library that uses float environments to create modern, flexible, multi-column layouts.. YAML offers a high degree of flexibility to web designers as well as excellent accessibility for website users.. YAML is strictly delivered with a visible as well as a non-visible copyright notice.. b).. The subject matter of this agreement.. is the granting of usage rights to the software library.. (hereinafter referred to as the.. Software Library.. ) in accordance with the following terms of license.. All other usage and intellectual property rights shall remain with the Licensor.. The Licensor shall not be obligated to provide other services, particularly customer service.. c) The Licensor is Dirk Jesse, the developer and creator of the YAML CSS Framework (hereinafter referred to as the.. Licensor.. The licensee may be any natural or legal person (hereinafter referred to as the.. Licensee.. d) The term.. Product.. shall mean all work products that the Licensee has created within the scope of this license using the YAML software library, including but not limited to templates or webpages under one or multiple domains.. Usage Rights, Scope of License.. a) The Licensor hereby grants the Licensee a non-exclusive, worldwide right of usage (license) for the use, duplication, and modification of the software library as well as for the distribution of the Products (as defined under Section 1d) that are created with the library.. The Licensee is granted a general right of use to the software library.. without the requirement that the Licensor be mentioned.. without the requirement that a link be provided to the YAML homepage.. (URL:.. The license is.. not bound to a specific project.. , is.. not time-limited.. and includes the usage of future versions of the software library.. b) The YAML software library may only be placed in an online download archive – regardless of its nature – with the prior written approval of the Licensor.. c) The Licensee is entitled to grant a non-exclusive, time-unlimited sublicense for the use of the Products created with this license.. The rights conferred by the Licensor to the Licensee under this agreement regarding the duplication and modification of the software library.. may not.. be transferred to third parties.. d) All usage rights specified under this section shall be granted irrevocably only once the agreed-upon license fee has been paid in full.. 3.. License Fees.. The prices and terms of payment for the license can be found at the YAML homepage.. The published prices include VAT.. All usage rights to the software library remain with the Licensor until the agreed-upon fees have been paid in full.. Should a license fee payment be past due, the Licensee is not entitled to use the software library.. Guarantee.. A guarantee is solely granted for the version of the software library provided for use by the  ...   agreement, and the amount of liability shall not exceed the license fee paid by the Licensee.. This limitation or exclusion of liability shall not apply to damages that result from injury to life, limb, or health.. 6.. Right of Termination.. In the event that the Licensee is responsible for a severe breach of the software rights granted herein, the Licensor shall be entitled to terminate this license agreement with good cause.. The Licensee may terminate this agreement at any time without the need to furnish a reason.. Following cancellation, all rights of use held by the Licensee shall be void.. Sublicenses granted by the Licensee on the basis of this agreement to third parties shall not be affected by termination.. A refund for payments already rendered shall only be provided if the legal requirements thereto are fulfilled.. 7.. Final Provisions.. Any and all oral arrangements between the parties are void.. Solely the law of the Federal Republic of Germany shall apply, under exclusion of the United Nations Convention on Contracts for the International Sale of Goods.. If any of the provisions of this agreement are found to be invalid, the validity of the remaining provisions shall be unaffected thereby.. If the Licensee is a business, the place of fulfillment and sole legal venue is Berlin.. However, the Licensor is also entitled to file a claim against the Licensee at the latter s court of venue.. Project License.. Project License YAML COMMERCIAL DISTRIBUTION LICENSE (CDL).. Definitions, Subject Matter of Agreement.. >.. a) The Licensor hereby grants the Licensee a non-exclusive, worldwide right of usage (license) for the use, reproduction, and modification of the software library as well as for the distribution of a.. Product.. (as defined under Section 1d) created with the library.. The Licensee is granted a project-specific right of use to the software library.. bound to a specific project.. c) The Licensee is entitled to grant a non-exclusive, time-unlimited sublicense for the use of the Product created with this license.. In the event that the Licensee is responsible for a severe breach of the rights to the YAML software library granted herein, the Licensor shall be entitled to terminate this license agreement with good cause.. OEM License.. OEM License YAML COMMERCIAL DISTRIBUTION LICENSE (CDL).. shall mean all work products that the Licensee has created within the scope of this license using the YAML software library, including but not limited to templates or webpages under one or multiple domains, content management systems (CMS), software for online shops and blogs.. a) The Licensor hereby grants the Licensee a non-exclusive, worldwide right of usage (license) for the use, reproduction, and modification of the software library as well as for the distribution of the.. Products.. (as defined under Section 1d) that are created with the library.. bound to a specific product.. and is granted in one.. year increments.. The license includes the usage of future versions of the software library, provided the annual license fee has been paid.. b) The Licensee shall be entitled to integrate the software library into an independent Product (such as a Content Management System) and to commercially distribute this Product under an independent name.. The Product may be licensed under any terms of license chosen by the Licensee.. Modifications undertaken by the Licensee to the software library do not need to be licensed.. c) The Licensor authorizes the distribution of licensed Products based on the YAML software library via online download archives, regardless of their nature.. d) With the scope of this agreement, the Licensee shall be entitled to grant non-exclusive, time-unlimited sublicenses for the use and modification of the Products it creates.. Sublicenses granted by the Licensee to third parties shall be unaffected by the termination of this agreement.. e) All usage rights specified under this section shall only be granted for the term specified under Section 2a once the agreed-upon license fee has been paid in full.. Should a license fee payment be past due, the Licensee is not entitled to use the software.. The Licensor shall ensure the delivered YAML software library is free from material or legal defects.. The agreement shall be valid for one year and will automatically be extended by an additional year with the payment of the annual license fee.. With the termination of this agreement all rights to the usage of YAML shall expire..

    Original link path: /license.html
    Open archive

  • Title: Resources – YAML CSS Framework
    Descriptive info: Resources.. Download Archive.. Latest stable YAML v4.. x Release.. YAML v4.. 1 (Build: 120306).. Migration Cheat Sheet YAML 3.. x - YAML 4 (PDF).. Last stable YAML v3.. YAML v3.. 1, Build: 110618, (multilingual).. Documentation:.. Deutsch (PDF).. English (PDF).. Project example v1.. 10 (Build: 110618).. based on YAML 3.. 1 (Build: 110618).. Template for a quick start in YAML and working with the.. YAML-Builder.. Earlier v3.. x versions.. 2, Build: 091027, (multilingual).. 1, Build: 090120, (multilingual).. 6, Build: 080609, (multilingual).. Documentation (v3.. 5):.. Support.. Support forums are hosted and administrated by.. YAML Community Forums.. German YAML Support Forum.. English YAML Support Forum.. Developer Tools.. YAML Builder (compatible with YAML 3.. x only).. YAML Builder.. is a tool for visually creating YAML-based CSS layouts.. It allows for the setting of basic layout characteristics like the number and positioning of the content columns, as well as the dynamic creation of grid-based layouts by dragging and dropping subtemplates.. Not quite WYSIWYG, but close!.. The code generated by the Builder is based on the file structure of the "Simple Project" template, so that the complete result can be copied and pasted directly, without changing a thing.. The required XHTML markup, the screen layout, as well as the layout-specific adjustments for Internet Explorer are all automatically generated.. The current version 1.. 1 is based on the functionality of YAML 3.. 6 and does not support the creation of the full-page layout variations.. The generated code  ...   Contao.. YAML integration for Contao (Tl_Yaml).. Flexible Grids Extension.. YAML-Tools (yamltools).. WorkShop Screencast (german).. CoreMedia CMS.. The Starter Kit of.. contains JSP-templates for a YAML based standard layout.. Contenido.. Online-Tutorial PDF for implementation (german).. DotNetNuke.. YAML-based skin.. Drupal.. YAML for Drupal.. - A highly configurable YAML-based template for Drupal.. Support-Forum [de].. Support-Forum [en].. ExpressionEngine.. eeSiteKit 2.. - A Website Development Framework For ExpressionEngine with YAML support.. Gyro-PHP.. PHP based application framework.. with YAML integration.. ImpressCMS.. Developer-Theme.. for ImpressCMS 1.. 2+.. Joomla.. JYaml- Flexible Joomla! Templates with YAML.. - A highly configurable YAML-based theme for Joomla! 1.. 5+.. MODx.. Online-Tutorial.. OLAT.. OLAT - Open Source LMS.. - Learning Management Software with YAML-based templates.. OpenPublisher.. - PHP5 Content Management System.. OpenText.. Best Practice Project 10.. - a YAML based standard demo project.. papaya CMS.. Template- und Themeset dr-yaml.. Papoo.. CMS with YAML-based standard templates.. phpwcms.. Online-Tutorial examples for implementation (german).. pragmaMx.. Four free YAML-based Themes (.. YAML Simple Project.. Integral.. Isometric.. Stylevantage.. Redaxo.. Example implementations for Redaxo 3.. x and 4.. x.. SilverStripe.. short Online-Tutorial (German).. SYAML Developer-Theme.. x Simple Project Template (german docs).. TYPO3.. Tutorial for YAML Autoparser-Implementation (German).. Templates for TemplaVoila (db_ttv 4.. 4).. if-20 Developer Template.. Website Baker.. Template auf Basis von YAMLs Simple Project.. Wordpress.. Xtreme One Theme-Framework.. considerable tutorial for YAML-based templates.. YAML Green Theme.. (highly configurable).. Simplex Theme.. xt:Commerce.. YAML for xt:Commerce.. YAML for xt:C VEYTON 4.. ZMS.. YAML 2.. 5 templates for ZMS 2.. 9+..

    Original link path: /resources.html
    Open archive

  • Title: Contact and Imprint – YAML CSS Framework
    Descriptive info: Contact Imprint.. Postal Address.. Dirk Jesse.. Nickelswalder Straße 2.. 12589 Berlin.. GERMANY.. Contact.. E-Mail.. office@highresolution.. Telephone.. +49 (171) 219 48 66.. Responsible for content according to Telemediengesetz.. UID according to § 27a Umsatzsteuergesetz.. DE814774164.. Go to the shop.. Responsible Operator.. Coburgerstrasse 43,.. 96052 Bamberg.. info@itratos.. +49 (951) 6010096.. Telefax.. +49 (951) 9686827.. Shareholder.. Sabine Panitz.. DE17589817.. Disclaimer.. Google Analytics.. This website uses Google Analytics, a web analytics service provided by Google, Inc.. ( Google ).. Google Analytics uses cookies , which are text files placed on your computer, to help the website analyze how users use the site.. The information generated by the cookie about your use of the website (including your IP address truncated by the last octet prior to its storage using the _anonymizeIp() method) will be transmitted to  ...   also transfer this information to third parties where required to do so by law, or where such third parties process the information on Google s behalf.. Google will not associate your IP address with any other data held by Google.. You may refuse the use of cookies by selecting the appropriate settings on your browser, however please note that if you do this you may not be able to use the full functionality of this website.. By using this website, you consent to the processing of data about you by Google in the manner and for the purposes set out above.. You can opt-out from being tracked by Google Analytics with effect for the future by downloading and installing Google Analytics Opt-out Browser Addon for your current web browser:.. http://tools.. google.. com/dlpage/gaoptout?hl=en..

    Original link path: /imprint.html
    Open archive

  • Title: Demo: Flexible Grid Layout – YAML CSS Framework
    Descriptive info: Project Name.. Here's a box.. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip.. Read More.. And another box.. This box is aligned with the sidebar.. Lorem ipsum dolor sit amet,.. consectetuer adipiscing elit.. Nunc congue ipsum vestibulum libero.. Aenean vitae justo.. Nam eget tellus.. Etiam convallis, est eu lobortis mattis, lectus tellus tempus felis, a ultricies erat ipsum at metus.. Morbi et risus.. Aliquam nisl.. Nulla facilisi.. Cras accumsan vestibulum ante.. Vestibulum sed tortor.. Praesent SMALL CAPS tempus fringilla elit.. Ut elit diam, sagittis in, nonummy in, gravida non, nunc.. Ut orci.. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos.. Nam egestas, orci eu imperdiet malesuada, nisl purus fringilla odio, quis commodo est orci vitae justo.. Aliquam placerat odio tincidunt nulla.. Cras in libero.. Aenean rutrum, magna non tristique posuere, erat odio eleifend nisl, non convallis est tortor blandit ligula.. Nulla id augue.. Nullam mattis, odio ut tempus facilisis, metus nisl facilisis metus, auctor consectetuer felis ligula nec mauris.. Vestibulum odio erat, fermentum at, commodo vitae, ultrices et, urna.. Mauris vulputate, mi pulvinar sagittis condimentum, sem nulla aliquam velit, sed imperdiet mi purus eu magna.. Nulla varius metus ut eros.. Aenean aliquet magna eget orci.. Class aptent taciti sociosqu ad litora.. Vivamus euismod.. Cum sociis natoque penatibus et  ...   eu, placerat ut, mi.. Nulla nulla.. Maecenas vel metus quis magna pharetra fermentum.. Integer sit amet tortor.. Maecenas porttitor, pede sed gravida auctor, nulla augue aliquet elit, at pretium urna orci ut metus.. Aliquam in dolor.. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed aliquam, tellus id ornare posuere, quam nunc accumsan turpis, at convallis tellus orci et nisl.. Phasellus congue neque a lorem.. This is a nested column.. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.. This is another nested column.. A Simple Sidebar.. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras ornare mattis nunc.. Mauris venenatis, pede sed aliquet vehicula, lectus tellus pulvinar neque, non cursus sem nisi vel augue.. Mauris a lectus.. Aliquam erat volutpat.. Phasellus ultrices mi a sapien.. Nunc rutrum egestas lorem.. Duis ac sem sagittis elit tincidunt gravida.. Incremental leading.. Vestibulum ante ipsum primis in faucibus orci luctus vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras ornare mattis nunc.. sed aliquet vehicula, lectus tellus.. sed aliquet vehicula, lectus tellus pulvinar neque, non cursus sem nisi vel augue.. ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras ornare mattis nunc.. © Company 2012 Layout based on..

    Original link path: /demos/flexible-grid.html
    Open archive

  • Title: Demo: Flexible Column Layout – YAML CSS Framework
    Descriptive info: Main Content.. Heading.. Sidebar.. Advertisement.. Widget.. Item 1.. Item 2.. Item 3.. Item 4.. Item 5..

    Original link path: /demos/flexible-columns.html
    Open archive

  • Title: Demo: Custom Grid Layout – YAML CSS Framework
    Descriptive info: YAML 4 Custom Grids.. YAML 4 provides several custom grid configurations, eg.. a port of the 960 Grid System.. This example is responsive too and linearizes its content on screen widths lower than 760 Pixels.. Of course, you should adjust this to your individual needs.. 12 Column Grid.. 940.. 60.. 860.. 140.. 780.. 220.. 700.. 300.. 620.. 380.. 540.. 460.. Push Pull Classes Available.. 220..

    Original link path: /demos/custom-grid.html
    Open archive

  • Title: Demo: RTL Support – YAML CSS Framework
    Descriptive info: بيتي وو¬ ذب صحة¬ ل يضم ث.. بم¬ لد¬ الصهيل¬ شس¬ ناس ليه الليالي.. تاريخي البوص حي¬ يش¬ تساوي.. ك كن سك¬ شمعي¬ مزلاج كوز¬ القبح شفاف البانجو ف¬ يعايش ال جيرالد¬ س¬ ك ضغط بم.. مسكر النهرين¬ خض ا¬ في ث¬ ل الخربطة حل¬ يسير ك بد والتربية¬ طوي نزاع لم¬ بيز ف.. ا¬ بم¬ لة¬ العوانس¬ غضب.. القسطرة معربد¬ مجاز اي مر تحجيم ك نص متعوب ته بم¬ تخرج لوكهارت¬ دع النجاح سكن حلم¬ جلود و ب الحكمة شوكلي¬ يا ش س.. كالموك¬ ص¬ ن بالهيدروفلورين¬ ش صل¬ ورث المناوشة¬ قد¬ ار.. ل ث¬ صل¬ لحية.. ص¬ اثارة¬ بد نيزش ص.. ديل يك¬ يقر لوز¬ حب طلاب ونش يكح ذو خن¬ النيوديميوم فى.. تنس لويد ك  ...   بحنين الجذل¬ صغ عظم بض¬ هال¬ تطيير.. و فم نص التصق برين بومبانو ن فل حجم جن يش ف صف طريح الولايات زال قف عب للفرس التضييق س ل صك اخر المتكاملة متدافع شحب ي كون فر طف نعم بقصر فلك بوعي مخنوق ف ص ث تشامبرلن ش محاباة دي ف زيبيت نفسك مندل بو او ا صك فقاري ام باخ التعريشة عبري ن جروت ل حر ا ب ن ل ب يتحاضن يزيل مجهد حزما قد بالغ معترض سلب دريكسيل الملحد بك دولور يتر مطالع التناسق اي عش ري رف الملاطفة س در صقل سق يحض ترايبوليفوسفيت شي كش ا لهو السرداب قف زبد حر فطن جو تاج ذي مطيعة ث.. Widget A.. Widget B.. Widget C..

    Original link path: /demos/rtl-support.html
    Open archive

  • Title: Error – YAML CSS Framework
    Descriptive info: Don't Panic!.. Error 404.. The page you are trying to access isn't available..

    Original link path: /error.html
    Open archive

  • Archived pages: 10