Yahoo Pure.CSS Framework

Florian's picture

Pure.THEME is a sub-theme presenting the features of Pure.CSS framework.

Yahoo Pure.CSS framework is a responsive, mobile-first, HTML5, base-theme, with layout and style configuration options built in that you can easily control through Drupal's UI. The framework includes two fine-tuned, fully featured, end-user themes. It uses Yahoo Pure.css, a powerful responsive CSS framework and also fully supports right to left languages. Pure is ridiculously tiny, being the fastest framework around.

The theme validates HTML5, it is cross-browser compatible (including IE6), it passes WAVE and FAE, and it was designed with mobile and SEO in mind: compatible, light and fast.

Framework's features

  • CSS with a minimal footprint. Pure is ridiculously tiny. The entire set of modules clocks in at 4.0KB* minified and gzipped.
  • A responsive grid that can be customized to your needs: 1, 2, or 3 column layout with customizable widths. Pure is responsive out of the box, so elements look great on all screen sizes.
  • The Pure Grid system comes in two flavors: Standard and Responsive.
  • Pure has several prebuilt common elements as grids, forms, buttons, tables, paginators and CSS Dropdown menu.
  • All modules in Pure build on top of Normalize.css, a well-known open source project that renders elements more consistently and in line with modern standards and also works in older browsers.
  • Advanced SEO optimization;
  • 16 block regions;
  • Duplicate the Main Menu at the bottom of the page;
  • Helpful body classes (unique classes for each page, term, website section, theme settings, etc.);
  • Possibility to change "Submitted by" display on all nodes;
  • Bi-directional right to left (RTL) theming;
  • All the theme settings are multilingual variables.

Advanced theme settings

Pure grid settings

  • Responsive CSS files served from Yahoo CDN or locally;
  • Layout with fluid or custom fixed width;
  • Customizable width for First and Second sidebars;
  • Responsive or Non-responsive layout;
  • Feature to choose the blocks visibility on mobile devices.

Layout settings

  • Main Drop-down menu and secondary menu can be positioned (center, left, right);
  • Duplicate the Main Menu at the bottom of the page;
  • No-followed login/register links;
  • Full breadcrumb;
  • Round corners for page elements and menus;
  • Page icons;
  • Possibility to change "Submitted by" display;

Theme development settings

  • Rebuild theme registry on every page, during theme development;
  • Adjust layout's top margin;
  • Site ID body class - useful in a multisite environment.

Pure.CSS sub-themes

Pure.MOBI

Being light and fast this theme is ideal to be used on high traffic websites or as a separate mobile theme together with the mobile theme module.

Pure.THEME

Pure.THEME is a fully featured advanced theme that can be used in every web project. The layout is responsive and do not require JavaScript (except for certain menu interactions). It reproduces some of the features presented in Yahoo's Pure.CSS layout section.

Resources: