Posts Tagged ‘Grid’

Baseline is a CSS framework, built with typographic standards in mind, that aims to simplify developing a website with a pleasing grid and good typography.

With the help of reset.css & base.css files, Baseline clears the default behavior of your browser & builds a basic typographic layout to start with.

Baseline CSS

Compared to most other frameworks, Baseline uses the font metrics to line up headlines, paragraphs, form labels and any other major elements rather than regular line-height. And, it is compatible only with the recent web browsers (Safari 3+, FF3+, IE8+..).

The download package includes the full set of CSS files both for development and deployment, a Photoshop base document and a full set of HTML templates and examples.

SharpPieces is a set of open source & free ASP.NET controls for improving the usability of the applications easily.

Free ASP.NET Controls

Currently there are 8 components:

  • ExtendedDropDownList
  • LiveGrid
  • FancyUpload
  • ImageCheckBox
  • Rating
  • DynamicImage
  • CaptchaImage
  • GradientButton

They are all are ready with native support for the latest framework (ASP.NET 3.5) and IDE (Visual Studio 2008).

Cloud IconCloud hosting, storage & content delivery networks (CDNs) are very popular services for the last few years, which is very normal, as they offer a series of advantages in running + serving web applications.

An application hosted in the cloud will:

  • easily scale (with instantly deployable & API controlled instances, unlimited diskspaces, etc..)
  • serve files faster with content delivery network (CDN) support
  • have a better availability (with strong SLAs)

With the increasing number of providers & tools created, cloud hosting is getting simpler & simpler everyday.

Getting in the cloud, in most cases, will save so much time & resources when running a growing web application. You won’t need to think of the hardware, better react to the system resources & bandwidth usage fluctuations, pay exactly for what you use & much more.

Here is a collection of popular options & tools that can help you in hosting your applications in the cloud:

 

Cloud Hosting & Storage Options


Amazon Web Services (AWS)

Amazon Elastic Compute Cloud (Amazon EC2) – (hosting)

Amazon EC2

Amazon EC2 is a web service that provides you the environment to instantly launch (or remove) new servers (instances) with the OS & configuration you need which makes scaling of a web application much easier.

This functionality can be controlled via the web service APIs or tools to be mentioned in this post.

You are charged with the resources consumed like hours your servers (instances) work or the bandwidth used.

Read the rest of this entry »

Flash, Silverlight & JavaScript are already offering quality solutions for creating graphs. On the other hand, it is impressive to see what an be done in visualising data with CSS.

After the pure CSS data chart, Css Globe is presenting a very creative tutorial (with source codes) on creating a pure CSS line graph.

CSS Line Graph

The solution creates a vertical/horizontal grid with dd & dl elements in the background. And, a smartly prepared image is used with CSS sprites technique to display the lines.

Although it looks complicated, the technique is simple yet clever & inspiring.

The grid, which helps designers to organize text & images in a rational way, is hard to get used to, but after that, it makes most design related problems disappear.

Grid Based Design

The Grid System is a resource on grid based designs.

It covers:

  • articles
  • tools
  • books
  • templates & more on grids.

It is a very fresh website but already presents handy InDesign & Photoshop grid templates, interesting tools like Syncotype, Phiculator & more.

Emastic is a CSS grid framework aiming to ease creating elastic layouts.

It is created by the author of Hartija (see WRD post) & Formy (see WRD post) CSS frameworks and powers users with:

  • Personalized width of the page in em,px,%.
  • Use of fixed and fluid columns in the grid.
  • Elastic Layout with "em"

CSS Grid Framework

 From the author:

I analyzed all the Grid CSS frameworks and almost everything connected with the Grid System. But I did not want to reinvent the wheel, just to improve the main defects of the existent CSS Frameworks and to add some new features.

Emastic is lightweight (compressed size is less than 4kb) and several examples can be found in the project page.

Typogridphy is a CSS framework that helps web designers and front-end developers in quickly coding typographically pleasing grid layouts.

Typogridphy uses ems which means that the content is zoomable without creating problems for the design.

CSS Framework

Based on the popular 960 Grid System (see WRD post), Typogridphy makes creating grid layouts which are versatile and great looking much easier. This CSS framework is made of fully validated, semantic and strict XHTML, and validated CSS.

Designing with grids is very common as it helps creating identical, measured layouts.

960 Grid System is an effort to streamline web development (for rapid prototyping and for production environments) workflow by providing commonly used dimensions , based on a width of 960 pixels. There are two variants: 12 and 16 columns, which can be used separately or in tandem.

Grid Design

Why 960 pixels?

All modern monitors support at least 1024 × 768 pixel resolution. 960 is divisible by 2, 3, 4, 5, 6, 8, 10, 12, 15, 16, 20, 24, 30, 32, 40, 48, 60, 64, 80, 96, 120, 160, 192, 240, 320 and 480. This makes it a highly flexible base number to work with.

What is in the package?

In the download package, you can find PDF grid paper, templates for Fireworks, OmniGraffle, Photoshop & Visio, and CSS framework with demo HTML .

Similar to Ext Grid, but built on jQuery, Flexigrid is a feature rich data grid with resizable columns and a scrolling data to match the headers, plus an ability to connect to an xml based data source using AJAX to load the content.

jQuery Data Grid

Features of this jQuery data grid plugin:

  • Resizable columns
  • Resizable height
  • Sortable column headers
  • Cool theme
  • Can convert an ordinary table
  • Ability to connect to an ajax data source (XML only)
  • Paging
  • Show/hide columns
  • Accessible API
  • More..

Ext JS LiveGrid component, a component for the powerful Ext JS Framework, makes it easy to create non-refreshing, live grids.

This EXT JS component is very handy while browsing through a large amount of data as all data doesn’t need to be loaded once & no need for paging.

Ext JS Live Grid Component

feed-holder
FeedBurner
  • PSD to HTML
  • Virtual Private Servers - eTecc Web Hosting
  • EasyImg - Internet Graphics Engine
Manage your clients email marketing with sendcube
RapidxHTML - Converts Your PSD into XHTML Rapidly
  • MailChimp
  • PSD to HTML
  • activeCollab | Project Management

Vivvo CMS - Web Publishing at your Fingertips