background preloader

Css

Facebook Twitter

Sass - Syntactically Awesome Stylesheets. Introducing csswizardry-grids. 6 February, 2013 Yesterday I wrote Responsive grid systems; a solution? , all about the principles behind creating the fluid grid system in inuit.css. That post deals with the thoughts, reasonings and theory behind how such a grid system works. This post is csswizardry-grids’ elevator pitch: csswizardry-grids is a simple, fluid, nestable, flexible, Sass-based, responsive grid system. It allows you to rapidly construct fully responsive websites whilst abstracting all the layout information away from your components, as all good grid systems should. N.B. Csswizardry-grids allows you to configure your gutters and your own breakpoints to cater to layouts for palm-based, lap-based, portable and stationary devices.

The grids are also fully (infinitely) nestable, meaning you can apply sizing to your sub-components as well as to your page-level layout. To use ‘solid’ classes which are basically just traditional CSS classes like .one-half. And your CSS: Did you enjoy this? Building grid systems with inuit.css – inuit.css – a powerful, scalable, Sass-based, BEM, OOCSS framework. WOW Slider : jQuery Image Slider & Gallery.

Sliders

LESS « The Dynamic Stylesheet language. Border-radius: create rounded corners with CSS! Home / CSS3 Previews / Border-radius: create rounded corners with CSS! The CSS3 border-radius property allows web developers to easily utilise rounder corners in their design elements, without the need for corner images or the use of multiple div tags, and is perhaps one of the most talked about aspects of CSS3.

Since first being announced in 2005 the boder-radius property has come to enjoy widespread browser support (although with some discrepancies) and, with relative ease of use, web developers have been quick to make the most of this emerging technology. Here’s a basic example: This box should have a rounded corners for Firefox, Safari/Chrome, Opera and IE9. The code for this example is, in theory, quite simple: However, for the moment, you’ll also need to use the -moz- prefix to support Firefox (see the browser support section of this article for further details): How it Works border-bottom-left-radius, border-bottom-right-radius, border-top-left-radius, border-top-right-radius The Syntax:

Filters

Creating Stylish Responsive Form With CSS3 and HTML5. #buttons #submitbtn { display: block; float: left; height: 3em; padding: 0 1em; border: 1px solid; outline: 0; font-weight: bold; font-size: 1.3em; color: #fff; text-shadow: 0px 1px 0px #222; white-space: nowrap; word-wrap: normal; vertical-align: middle; cursor: pointer; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; border-color: #5e890a #5e890a #000; -moz-box-shadow: inset 0 1px 0 rgba(256,256,256, .35); -ms-box-shadow: inset 0 1px 0 rgba(256,256,256, .35); -webkit-box-shadow: inset 0 1px 0 rgba(256,256,256, .35); box-shadow: inset 0 1px 0 rgba(256,256,256, .35); background-color: rgb(226,238,175); background-image: -moz-linear-gradient(top, rgb(226,238,175) 3%, rgb(188,216,77) 3%, rgb(144,176,38) 100%); background-image: -webkit-gradient(linear, left top, left bottom, color-stop(3%,rgb(226,238,175)), color-stop(3%,rgb(188,216,77)), color-stop(100%,rgb(144,176,38))); background-image: -webkit-linear-gradient(top, rgb(226,238,175) 3%,rgb(188,216,77) 3%,rgb(144,176,38) 100%);

Technical Web Typography: Guidelines and Techniques. Advertisement The Web is 95% typography1, or so they say. I think this is a pretty accurate statement: we visit websites largely with the intention of reading. That’s what you’re doing now — reading. With this in mind, does it not stand to reason that your typography should be one of the most considered aspects of your designs? Unfortunately, for every person who is obsessed with even the tiniest details of typography, a dozen or so people seem to be indifferent. It’s a shame; if you’re going to spend time writing something, don’t you want it to look great and be easy to read? Creative and Technical Typography I’m not sure these two categories are recognized in the industry but, in my mind, the two main types of typography are creative and technical. Technical typography is like type theory; certain rules and practices apply to party invitations just as well as they do to obituaries.

We’ll focus on technical type in this article. We’ll learn about: Fair warning: this is an in-depth article.

UI

The relevance of the baseline grid. Posted on 24 August 2011 • 17 comments In the talk I’ve been giving at conferences this year, With Great Power Comes Great Responsibility, there’s a section where I mention baseline grids; specifically, what I’ve learned from doing a large-scale print project like 8 Faces. However, until now, I haven’t really covered the subject on this blog. This morning I was interviewed about typography for an upcoming issue of Computer Arts and I prepared some screenshots for them. In doing so, I realised that one example was even more thorough than the one I’ve been showing in the talk, and that the example deserved a blog post. So here we are. Some context I’d never really done print projects that were that big prior to 8 Faces, so I was — shamefully — a little lazy when it came to setting up and following baseline grids.

Because of that, one of the original aims of 8 Faces was to give myself a much-needed kick up the bum, and I’m happy to say that it served that purpose remarkably well. The example. Setting Type on the Web to a Baseline Grid. We web designers get excited about the littlest things. Our friends in the print world must get a kick out of watching us talk about finally being able to achieve layouts on the web that they’ve taken for granted for years. Let’s face it: it’s easier these days to embed a video on the web than it is to set type consistently or align elements to a universal grid.

But we’re scrappy folks, web designers. We don’t give up easy. In the long slow battle with browser support and platform inconsistencies, we’ve been able to bring more and more sophisticated print techniques onto the web—sometimes kicking and screaming. We have the technology#section1 Over the last year or so, there’s been a lot of talk about grid systems and using column grids for website layouts. We can apply the same principles of proportion and balance to the type within those columns by borrowing another technique from our print brethren: the baseline grid.

In print, it’s not that hard. Firing up the grid#section2. CSS Baseline: The Good, The Bad And The Ugly. Advertisement Vertical rhythm is clearly an important part of Web design, yet on the subject of baseline, our community seems divided and there is no consensus as to how it fits in — if at all — with our growing and evolving toolkit for designing online. This may be due to a lack of understanding and appreciation of the benefits that follow from a baseline grid, but it is more likely because baseline is notoriously difficult to get right, and no one yet holds the blueprint to its successful implementation.

Some even argue baseline is redundant online, as typographic terminology and behavior on the Web follow different rules than those used in print, the frustrating discrepancy between line-height and leading being the most obvious example. For now, however, let’s assume baseline is, to some degree at least, a useful tool for Web designers. What exactly is it, what tools do we have at our disposal in order to execute it, and, crucially, is it worth the hassle? The Trouble With line-height. CSS Lint.