background preloader

Starter Themes & Skeletons

Facebook Twitter

Fuse Basic. Fluid Baseline Grid. The Fluid Baseline Grid System is an HTML5 & CSS3 development kit that provides a solid foundation to quickly design websites with ease.

Fluid Baseline Grid

I found this responsive grid system and thought it was a great building block for a Drupal theme in my initial proof of concept. The Fluid Baseline Grid System is released under an Unlicense license and therefore is considered in the public domain. Feel free to modify the default template layout based on the usage example below to fit your individual website's needs. Fluid Baseline Grid - A sensible HTML5 and CSS3 development kit. Based on 960 Grid system. NineSixty (960 Grid System) This theme is based on the 960 Grid System by Nathan Smith.

NineSixty (960 Grid System)

Details on its background can be found in a journal entry. NineSixty is a base theme with all the files provided by the 960 Grid System. From the sketch sheets to all the styles from the framework are included. There are a few modifications so it better fits into Drupal. All the details are inside the README.txt file. Terrain. 960 Robots. 960 Robots is a theme created by Lullabot for its Drupal theming videos.

960 Robots

This theme, based on the 960 grid system, features two columns on the right side of the page, a two-column footer, and calendar-page dates for posts. The theme also uses Twitter's search API to display a random message based on a configurable search string as the site's slogan (PHP5 required). Recycled. Tej. Tej is a colorable subtheme of Omega, the responsive and highly configurable HTML5/960 grid base theme.

Tej

Tej also supports right to left (RTL) languages (ex: Arabic). Features RTL supportHighly colorable Features inherited from Omega. Clean. A base theme with a focus on minimal implementation.

Clean

Clean theme provides a solid foundation for creating bespoke themes in the shortest possible time. Features Collapsible layoutLarge default base font sizeRelative em font sizesThorough use of CSS inheritanceDefault layout based around 960px grid6.x version includes liquid, 960gs, 1kb grid, and light on dark sub themes.7.x version includes ability to specify framework and conditional stylesheets in the info file. Usage. Wrapped Sites. Plain Grail. This theme is based on Holy Grail and controlled by Grid and developed as a subtheme of Zen.

Plain Grail

Other Holy Grail themes in series: Another theme in the spirit of OTS (off the shelf) themes by the same author is zenLand, an attempted marriage of Zen and Garland, the core theme :) Features: 1, 2, or 3 column nice, clean, white fixed layout Equal height columns without javascript, great start for grid lovers Both sidebars are placed on the right, believed to be good for SEO Supports forms, lists, comments, quotes, codefilter, tables and Drupal maintenance page Supports external link popups, inactive by default. Activate it on script.js Custom feed icon Compact and beautiful search block Stylesheets files are commented for easy customization Plays nice in the administration area.

This theme is designed for bloggers, lazy coders and all end users who may have less need to modify, save for the logo. Hydrogen. A configurable base theme with influences from 960.gs and the Drupal ninesixty theme.

Hydrogen

This theme implements the 960.gs grid system using similar conventions to ninesixty. This is then extended providing some additional features such as configurable layout, column grid-widths for sidebars, and additional regions to provide more flexibility in design. Meant for use as a base theme, the Hydrogen theme can be extended easily through sub themes. The grid system it's based on allows for fast prototyping and design implementation. Further, the resources available through 960.gs provide a great foundation to bridge design work and theme work, making it much easier for design to be translated to the web. Other similar themes include: Hydrogen seeks to strike a balance between flexible configuration options and ease of use.

OpenG. OpenG (Open Grid) is a Drupal base or starter theme that serves as Lego for your creativity.

OpenG

The grid based theme, loads content first and allows designers to easily configure a layout based on either a fixed 960px or liquid grid divided into 12, 16 or 24 columns. Easily manipulate the layout via the browser to match the design and configure the grid through the theme settings page without touching code. Update Status: OpenG aims to serve: Nifty 50. Fusion. Wire960. Plainscape. FadeThingee. Zen nineSixty (960 Grid system) This is the NineSixty theme ( developed as a Zen sub theme for use with Zen theme ( for Drupal 6. Note: a version for Drupal 7 has recently been started. A big thanks to Nathan Smith for creating 960 CSS framework and Dvessel for the NineSixty theme. Without them this Zen sub theme would not have been possible. -------------------------------------------------------------------------------- What's different in this theme compare to the original NineSixty theme: -------------------------------------------------------------------------------- - It inherits all the theme settings from the Zen theme (like inline block editing). - Added Debug mode (showing grid on the page) as a theme setting so you can enable/disable it in the theme settings page (/admin/build/themes/settings/zen_ninesixty) - Additional region added: 'content top' and 'content bottom' so blocks can be assigned to the top or bottom of the main content area.

A Sync Template. 14/01/2012 - Version 7.x-1.x is available for download!

A Sync Template

13/01/2012 - Version 7.x-1.x: now A Sync Template is available on Drupal 7 with new features! A Sync Template 2.0 is an HTML5 theme for Drupal 7. Main features Drupal 7 theme960 grid (24 columns)Support for up to three columns layoutEasily customizable16 flexible regionsHTML 5 (with shiv, some boilerplate CSS and formalize)Basic SEO good practices like content precedenceCSS resetSimple Quicktabs and Block Class support. BlueTrip. A beautiful and full-featured CSS framework. Themes for Developers. Runvsc. Runvsc is a tight, mean pre-processing base theme; all of the logic / markup is built from within the template.php.

runvsc

I created this base theme system because I wanted create a lightweight, powerful and modular Theming System for professional Front End and Back End Developers. runvsc wants you to create your own library of reliable, reusable code snippets ;) runvsc themes features include: Native 960 grid system -> configurable with simple integer variables in the template.phpUseful functions -> runvsc_markup is the workhorse of this theme -> you can use this simple function to generate any html element you can think of :) Preprocessing makes your theme 3 times faster -> the tpl files are simply print $variable statement. No pesky if - colon statements! Genesis. Genesis is an standards compliant, accessible and semantically rich starter theme for Drupal. Genesis is designed to be simple, yet powerful, flexible and easy to get started with. New! HTML5 & CSS3. OM 2 HTML5. "OM" (AUM) - the source of everything. BigDaddy (HTML5 theme) Roots. Roots theme takes you back to the roots.

It is a modern HTML5 + CSS3 theme blueprint inspired by the HTML5 boilerplate (Paul Irish and Divya Manian) and drupal theme tao (Frank Febbraro). The main features are: Plink. Plink is a starter theme for developers looking for modern browser advantages while still supporting legacy browsers. Plink will offer a number of configuration options that will allow developers to rapidly develop responsive HTML5 themes and mobile counterparts.

Plink is your theme if you need a solid starter theme for modern desktop browsers, if you need responsive layouts for multiple screen resolutions and mobile devices, and if you need a quick mobile optimized theme for smartphones. Plink would like to be as accessible as possible. Framework. Responsive themes for tablet and mobile. Omega - Responsive HTML5 Base Theme. Omega 4. AdaptiveTheme. Detamo - Responsive fluid grids for Desktop, Tablet and Mobile. Based on YUI grid system. YUI Grid. Clean, pure CSS tableless starter theme based upon YUI base, fonts, grids, and reset, with ARIA Landmark Roles. YUI Framework. Custom theme with CSS only. In Drupal 6 and Drupal 7, there are many improvements in core that make it easy for CSS web designers to create themes without having to deal with any PHP code.

The Stark theme was created to help designers see the pure xhtml code output by Drupal, and is included in Drupal 7's core. Skinr. Skinr's main purpose is to allow the theme to define a set of reusable and modular CSS styles, and to make those styles available in Drupal's UI. Skinr was developed for themers to allow them to tap into the power of Drupal's modularity and apply those same principals to theme development. It does not provide any styles of its own. These styles are defined in the .info file of the theme (or subtheme), by the themer and end up in various places in Drupal's UI, such as: