Web Culture: Grid-based Layout Designs The semantic web has brought on a new generation of Internet technology. As designers and developers work together to redefine the rules of the web, the number of open-source projects and third-party APIs continues to grow. The opinions of web scholars differ on the use of grid systems. Many argue that setting grid points limits the creativity of designers. Others contend that a grid provides a scientific basis for a design to be perfected. Remove Styles and Scripts from a WordPress Parent Theme Occasionally, I use a parent-child theme relationship to build sites. Many times, the parent themes come loaded with extras that get in the way, slow down the site, and just don’t need to be there. Here are few tips for cleaning up that extra bloat. The following post provides code examples for adjusting parent theme functionality. We recommend creating a custom functionality plugin to place code rather than the functions.php theme file. If you are a novice, please be careful and always remember to backup.
Front-end editor plugin for WordPress 4.1 The next WordPress release is planned for December 2014 and WP version 4.1 will have some great features. One of them is a so-called feature plugin that will provide us a front-end editor. This feature was already planned for the current version, but the front-editor wasn’t ready before for the release of WordPress 4.0. I really like the idea to edit my existing post right from the front-end. Today I was curious about the editor features and I installed the plugin (on my version 4.0 test site) to do some tests. Fluid Baseline Grid - A sensible HTML5 and CSS3 development kit Fluid Columns The FBG system facilitates creativity by providing a framework for composition. Grid systems create visual rhythm and structural balance to enhance the experience with predictable patterns. FBG is defaulted to a minimal 3-column folding grid, which is easy to work with and divided into equal portions, 31.333% wide with 2% wide gutters between columns.
A better Photoshop grid for responsive web design Posted on 20 January 2012 • 90 comments In making the move to responsive web design, one of the potential hurdles is the rather awkward maths for calculating the percentage-based widths necessary for fluid layouts. If, for example, you’re designing with a 960px grid in Photoshop and you have six columns, each 140px wide, you divide 140 by 960 to get your percentage-based width: 14.583333%. Now, I don’t know about you, but numbers like that look a little scary. It doesn’t matter that there are great calculation tools built into TextMate to do the maths for you; the point is that the final figure looks like an arbitrary number with no immediate relation to either the container’s pixel width (960) or the element’s pixel width (140). Compare that to a container that has a width of 1000px. 1000 is a nice, easy, round number.
Template Tags Languages: English • Español • Français • Italiano • 日本語 • 한국어 • Português do Brasil • Русский • ไทย • Türkçe • 中文(简体) • 中文(繁體) • (Add your language) Template tags are used within your blog's Templates to display information dynamically or otherwise customize your blog, providing the tools to make it as individual and interesting as you are. Below is a list of the general user tags available in WordPress, sorted by function-specific category. For further information on template tags and templates in general, see the following: Stepping Into Template Tags - an introduction to Template Tags. Infinite Scroll Instead of having to click a link to get to the next set of posts, infinite scrolling pulls the next posts automatically into view when the reader approaches the bottom of the page. Unlike many of the modules in Jetpack, Infinite Scroll only works with themes that support it. Since each theme is constructed a bit differently, the Infinite Scroll module needs information about the theme to function properly. Read on for detailed instructions on adding support to your theme and using CSS to customize the look. Adding Support
Golden Grid System GGS was my next step after Less Framework. Instead of a fixed-width grid, it used a fully fluid-width one, without even a maximum width. The resources it was published with are still available on GitHub. The idea was to take a 18-column grid, use the outermost columns as margins, and use the remaining 16 to lay elements out. On smaller screens the 16 columns could be folded into 8, 4 and 2.
Less Framework 4 I called Less Framework "a CSS grid system for designing adaptive websites". It was basically a fixed-width grid that adapted to a couple of then popular screen widths by shedding some of its columns. It also had matching typographic presets to go with it, built with a modular scale based on the golden ratio. The resources it was originally published with are still available on GitHub. Contrary to how most CSS frameworks work, Less Framework simply provided a set of code comments and visual templates, instead of having predefined classes to control the layout with. This is how I still work today and definitely a method I advocate.