background preloader

Gridless - An awesome HTML5 & CSS3 boilerplate for mobile first responsive, cross-browser websites

Gridless - An awesome HTML5 & CSS3 boilerplate for mobile first responsive, cross-browser websites

Golden Grid System GGS was my next step after Less Framework. Instead of a fixed-width grid, it used a fully fluid-width one, without even a maximum width. The resources it was published with are still available on GitHub. The idea was to take a 18-column grid, use the outermost columns as margins, and use the remaining 16 to lay elements out. While the grid's columns were fluid — proportional to the screen's width — the gutters (spaces between the columns) were proportional to the font-size being used. GGS also contained a set of typographic presets, strictly to a baseline grid. Correctly setting all of these measurements is difficult, of course. When published, GGS gained a lot of attention, as the web design community was searching ways to work with fluid-width grids, which have always been troublesome, running counter to many graphic design principles. Many people trying to use GGS were also confused by the lack of predefined code for working with the grid.

HTML KickStart HTML Elements & Documentation - Setup Download HTML KickStart Include jQuery and HTML KickStart <script src=" src="js/kickstart.js"></script><!-- KICKSTART --><link rel="stylesheet" href="css/kickstart.css" media="all" /><!-- KICKSTART --> Copy Elements into your HTML Browsers HTML KickStart Tested and working in IE 8+, Safari, Chrome, Firefox, Opera, Safari IOS, Browser and Chrome Android. Notes Don't forget to use an HTML5 Doctype <! Buttons A.button With Icons Colors .orange Styles .pop Tooltips Tooltips are awesome. Hover over the examples on the right to preview. Use: class="tooltip" + title="my tooltip content" Tooltip Positions .tooltip (default) .tooltip-top .tooltip-right .tooltip-left .tooltip-bottom Tooltips with HTML Content .tooltip + data-content="#ID" HTML Content This is more HTML content. Paragraphs Blockquote lobortis nisl ut aliquip ex ea commodo consequat. Blockquote Small Inline Styles Heading 3 Heading 4 Heading 5 Heading 6 Address col_12

Seven Guidelines For Designing High-Performance Mobile User Experiences - Smashing Magazine Advertisement A positive first impression is essential to relationships. People look for trust and integrity, and they expect subsequent encounters to reflect and reinforce their first impression. The same principles apply to brands and their products. Design plays an important role in building lasting relationships with end users and, thus, in supporting the brand’s promise. Users expect mobile services to be relevant and user-friendly and to perform well. In this article, we’ll discuss performance in relation to design and present seven guidelines that can help shape design decisions related to performance while accounting for the needs of end users and businesses. Performance For Mobile People use their mobiles to enhance productivity, comfort and pleasure, everywhere and at anytime: waiting for the bus, walking on the sidewalk, checking which platform their train leaves from. Performance Supports Brand Differentiation Every product encounter affects the brand perception. 1. 2. 3. 4.

Fluid Baseline Grid - A sensible HTML5 and CSS3 development kit Unquoted CSS font family name validator Wondering if a given character sequence can be used as an unquoted font family name in CSS? Read all about it, or just use this tool. <strong>To use this tool, please <a href= JavaScript</a> and reload the page.</strong> permalink You can use this as an unquoted font family name in CSS: font-family: ; Standard CSS character escape sequences for supplementary Unicode characters aren’t currently supported in WebKit, though. You can use it with quotes: If used unquoted, this font-family name contains a keyword in CSS, and it refers to the keyword value rather than a font family with that name.

Create An HTML/CSS Mobile Web App Using Sencha Touch - Smashing Magazine 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?” 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? Technology Analysis: jQTouch or Sencha Touch? Example Project: The Roookies App (kw)

Columnal | A responsive CSS grid system helping desktop and mobile browsers play nicely together. next generation web design through the browser Buildor Pro has a 50-day free trial. The price will then be USD$10 -- on a [PayPal] monthly subscription, or at half-price for an annual payment of $60 or equivalent local exchange rate. (This is a time-limited introductory offer for both.) The subscription service is now being processed by Paypal, and should be available soon. A developer's API version of Pro for resale to clients is in the pipeline. If, after 50 days, you do not want to subscribe to Pro then your account will be moved automatically to buildorLite - which will always be free unless you want to include it on a commercial site, such as an ISP, where you would need to contact us to agree a fee and terms of use. Pro will remain FREE for students, teachers, genuine Beta testers and serious reviewers. We do not store credit card details and ftp passwords nor do we share customer details with any 3rd parties. If you've got any questions contact: feedback [at] buildor [dot] com

20 Fantastic pseudo-Flash websites A pseudo-Flash website is one that looks, feels and acts like a Flash website but is in fact built on good old-fashioned HTML and CSS. There is usually also a dash of JavaScript to bring things to life and round out the interface. The result is often beyond what we have come to expect of HTML and CSS, which is why we might assume the website is Flash-based. Right-click, though, and you will be pleasantly surprised. I am keenly interested in pseudo-Flash websites, and I talk about the topic frequently. Flash has obviously lost some of its edge (though is by no means gone), and the focus has shifted to the core technologies of the web (HTML, CSS, JavaScript). There are two reasons for this. Secondly, a lot more people know how to develop with these basic languages, and a large community is willing to forgo the benefits of Flash for these familiar tools. With so many reasons to push the envelope and move away from Flash, we are in the midst of a massive shift in web development. 1. 2. 3. 4.

978 Grid System for Web Design