Thursday, May 23, 2013

Skeleton CSS

A Beautiful Boilerplate for Responsive, Mobile-Friendly Development

What Is It?

Skeleton is a small collection of CSS files that can help you rapidly develop sites that look beautiful at any size, be it a 17" laptop screen or an iPhone. Skeleton is built on three core principles:

Responsive Grid Down To Mobile

Skeleton has a familiar, lightweight 960 grid as its base, but elegantly scales down to downsized browser windows, tablets, mobile phones (in landscape and portrait). Go ahead, resize this page!

Fast to Start

Skeleton is a tool for rapid development. Get started fast with CSS best practices, a well-structured grid that makes mobile consideration easy, an organized file structure and super basic UI elements like lightly styled forms, buttons, tabs and more.

Style Agnostic

Skeleton is not a UI framework. It's a development kit that provides the most basic styles as a foundation, but is ready to adopt whatever your design or style is.

Downloads

The Skeleton download is a zip file (~25kb) containing all the CSS groundwork to get started on any web project.

Download Skeleton 1.2 from Github

or View Source on Github

Download Skeleton PSD Template

(A la 960.gs PSD template)

The file structure for Skeleton is:

index.html: The base html page that includes the necessary initial markup
stylesheets (folder)
- base.css: Basic styles of Skeleton
- skeleton.css: The glorious Skeleton grid
- layout.css: File with no specific styles, but a variety of useful media queries
images (folder):

favicon.ico: Standard 16x16 favicon
apple-touch-icon (x3): All three sizes of Apple touch icons for iPhone 3, iPad and iPhone 4 with retina.

For more Visit Skeleton Offical

Monday, May 20, 2013

Bootstrap Twitter Framework

Bootstrap

Sleek, intuitive, and powerful front-end framework for faster and easier web development.

Twitter Bootstrap is a free collection of tools for creating websites and web applications. It contains HTML and CSS-based design templates for typography, forms, buttons, charts, navigation and other interface components, as well as optional JavaScript extensions.

It is the most popular project in GitHub^[2] and is used by NASA and MSNBC among others.^[3]^[4]

Download Bootstrap

Some Code Example

<!DOCTYPE html>
<html>
  <head>
    <title>Example of Twitter Bootstrap</title>
    <!-- Include the bootstrap stylesheets -->
    <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.no-icons.min.css" rel="stylesheet">
  </head>
 
  <body>
    <div class="container">
      <h1>Search</h1>
      <label>Example for a simple search form.</label>
 
      <!-- Search form with input field and button -->
      <form class="well form-search">
        <input type="text" class="input-medium search-query">
        <button type="submit" class="btn btn-primary">Search</button>
      </form>
 
      <h2>Results</h2>
 
      <!-- Table with alternating cell background color and outer frame -->
      <table class="table table-striped table-bordered">
        <thead>
          <tr>
            <th>#</th>
            <th>Title</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>1</td>
            <td>Lorem ipsum dolor ...</td>
          </tr>
          <tr>
            <td>2</td>
            <td>Ut enim ad minim veniam, ...</td>
          <tr>
            <td>3</td>
            <td>Duis aute irure dolor ...</td>
          </tr>
        </tbody>
      </table>
    </div>
    <!-- JavaScript placed at the end of the document so the pages load faster -->
    <!-- Optional: Include the jQuery library -->
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
 
    <!-- Optional: Incorporate the Bootstrap Javascript plugins -->
    <script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
  </body>
</html>

You can use above Code For Demo

Demo and Download