Stacks4Stacks

For forward-looking frontend web designers and developers, these are exciting times. CSS Grid finally offers a solution to many of the age-old problems of trying to build complicated webpage layouts, which still work effectively on smaller screens. Intrinsic embraces these new techniques and provides a method towards building complex layouts with comparative ease. Many individuals and smaller design agencies are already embracing CSS Grid and reaping the benefits to be had. Intrinsic is the first addon to bring CSS Grid into RapidWeaver. With some practice, you could be amazed at what Intrinsic can create. There is every chance this grid layout stack will move to the top tray of your pro-designer toolbox!

Key features

Some of the most noteworthy features of Intrinsic include:

• 100% pure HTML and CSS markup; resulting in almost instantaneous rendering of complex grids.
• Degrades gracefully in older web browsers (like Internet Explorer) that lack support for CSS Grid.
• Reliable to use with many other types of stacks, including video embeds, slideshows and accordions.
• Phenomenal choice of style and layout options, which exceed the requirements of what most expert web developers need.
• Merges-in support for numerous background types and special animation effects.
• Print and PDF friendly.
• Compatible with a wide choice of different themes and theme frameworks, including FreeStacks, Foundation, Foundry etc.

CSS Grid layouts are relatively easy to master. You start with an outer container and then you place grid items inside that container. You have to imagine the container is divided-up with grid lines (known as tracks) both horizontally and vertically, much like the borders of a table. For an implicit grid layout, grid items are typically the same size and reflow naturally like a thumbnail grid or masonry. For more complex explicit grids (like the type of grid Intrinsic is also capable of building) you map-out the individual grid items and tell the web browser how wide or high they need to span - similar in concept to a basic floor plan for a building.

Demo project

A demo project file for Intrinsic can be downloaded here using this link. Although it is in RapidWeaver 7 format, it can be opened in RapidWeaver 8 too. The free ThemeFlood Blank theme has been used. Three examples of Intrinsic are shown on different pages. Some of the examples are calling embedded fonts from Google (in the custom header box) and all examples use some custom CSS code (in the custom CSS box) to create custom buttons etc. These Intrinsic examples can be copied and pasted into your own projects, if you want to use them 'as is'.

Example

This is a fairly typical page layout that Intrinsic is capable of building:
 

 
Further examples of Intrinsic can be viewed in the RWSkinz demo site. RWSkinz is a theme framework for RapidWeaver and works superbly well with the types of layout Intrinsic can build. In actual fact, Intrinsic + RWSkinz might be the only addons you require for building complete, free-flow webpages.

Setup

This is quite possibly the most sophisticated stack you have ever used, so be prepared towards spending a couple of hours playing around with it. If you have watched any video's or followed tutorials online about CSS Grid before now, then you will find many of the concepts and terminology used by the stack familiar. It is recommended that you have already put together a quick mockup of how you want your completed page to look on desktop and mobile - this will help you visualise the placement of the grid items. In essence, there are three core components that make-up the Intrinsic stack:

1. Main container

This defines the area of the page where your grid should be built. You have a wide choice of generic style settings that will get applied to every grid item; however these can be easily overridden by individual grid items, if you want to apply custom styling or images to individual grid items later on. User Notes let you write down useful notes as reminders of how you built your grid and the X-Ray Viewing Mode is very useful to get a clear visual of where each grid item is located. An optional class selector name and maximum width for the grid can be set in the Advanced Settings.

Two blue '+' buttons are shown in the main container, in edit mode. One of these adds new grid items and the other adds breakpoints to regulate how the grid should look on different screen sizes.

2. Breakpoints

The breakpoint tells the web browser how to display the grid items, above a screen width you define in the settings. We normally list breakpoints in size order, starting with the smallest. For example, you may opt to organise the grid into fewer columns, on narrower screens like mobile. Or perhaps reduce the size of certain grid tracks or change their order on the page. Grids, by their nature, are already very flexible; so typically you may only need to set two breakpoints (one for mobile and another for desktop). However the option exists to add any number of breakpoints, if specific requirements dictate.

Grid Template Areas
You define the shape and positioning of grid items using the Grid Template method. Double click the letters to edit them. Often it is much easier to paste and edit the grid template in a normal code editor with monospace fonts; then paste the resulting markup back into Stacks again. Each row of the grid starts and ends with a quote mark. The letters are separated with spaces:

'A A A A A A A A B B B B'
'C C C C D D D D E E E E'
'F F F F F F G G G G G G'

Alternatively, short words are permitted too, separated with tabs:

'Title     Title     Title     Title   Social  Social  Social  Social'
'Left      Left      Centre    Centre  Right   Right   Right   Right'
'Contact   Contact   Contact   Footer  Footer  Footer  Footer  Footer'

Each of these letters or words directly corresponds to an individual grid item ID. So this provides a good visual representation of how the completed grid will look at that particular breakpoint. You can see in the above example how the first row is occupied by two items; 'title' on the left and 'social' on the right.

How many letters or words do you include on each line, between the quote marks? The simple answer is that it depends on how many tracks (dividing lines) your grid system is. By default, we use a 12-point grid system. So you would normally have 12 letters or words per-line. But you are completely free to define your grid system in however many tracks you want. A simple grid probably does not need 12 tracks, but a more complex grid might demand more tracks. It's personal preference.

If you want to introduce blank grid items (spaces) into your grid, use . (full stop) characters, again separated with a space or tab.

Grid Template Columns
The web browser will look at your arrangement of letters or words in the Grid Template Areas. With the Template Columns set to 'auto', the web browser will distribute the columns evenly, from left to right. So assuming you had 12 letters on each line (a 12-track grid system), the browser would do 100% / 12, giving a width of 8.333% for each column.

Sometimes a need may arise to set columns to precise widths; whereby some columns are wider or narrower than others. This would be a truly asymmetric grid system, and is something Intrinsic really excels at building. The trick is to double-click the Grid Template Columns box and provide an array of widths like this, with each column width separated with a space:

auto minmax(250px,auto) 10rem 150px

In this example of a simple 4-track grid, the first column has an auto width, the second has a minimum width of 250px and no maximum width (auto), the third is 10rem wide and the final has a fixed width of 150px. You can see that there are various ways of defining column widths. There are different units of measurement available to use. Websites like W3Schools and CSS-Tricks document a lot of examples and provide interactive demo's to play with.

Grid Template Rows
These are almost identical to Grid Template Columns. A web browser looks at each row of items. It finds the tallest item in that row and sets all the others in the row to the same height.

Problems may sometimes arise if all items within a row contain no content (like text). The browser may incorrectly assume there is nothing to create space for - even though you might still have a background image or something else you want displayed. The simple workaround is to again give explicit dimensions, this time for the row heights:

minmax(100px,auto) minmax(100px,auto) minmax(150vw,auto) 10px minmax(100px,auto)

In this example, we'll pretend our grid is 5 rows tall. The first two rows have a minimum height of 100px and no maximum height (auto). The third row has a minimum height of 150 viewport (vw) height, a narrow row for a coloured border bar is specified at 10px tall and the final row again has minimum height of 100px and no maximum height (auto).

3. Grid Items

Grid items themselves are easy to add. These support a wide variety of different content types or stacks. When a grid item is selected in edit mode, you have the ability to override many of the default grid styles. For example, you can apply unique background images behind grid items, customise alignment, borders, spacing and other styling. Custom CSS is perfectly feasible too, if you need to do even more.

Every grid item requires a unique ID. This is the ID that corresponds to the letters or words in the Grid Template Areas. A grid item ID must always start with a number can contain no spaces or other special characters. Numbers, hyphens and underscores are permitted after the first letter.

Typically it is wise to setup grid items with the intention of that content being visible on all screen sizes. It is not good practice to try and omit certain grid areas at particular screen sizes or try to hide them. Most often this can break the grid. The option to Hide On Smaller Screen Widths should only be considered as an absolute last resort.

Content and stacks placed within each grid item will be positioned either top, middle or bottom within that item. If the size of the content exceeds the size of the item (and grid template rows or column sizing permits) then the item will grow in size to accommodate its content. Sometimes it may be desirable to place extra badges, buttons, headings or captions affixed to the edge of these grid items - and this is what you can use the 'extra layers' for. Additionally the whole grid item can be set as a link.

Final remarks

It is recommended that only a single Intrinsic stack is used per-page. Typically you would use Intrinsic to form the base layout for an entire webpage. Otherwise multiple instances of the stack can become very complicated to work with and could break.

CSS Grid is one of the most significant developments to happen in frontend web design for many years and brings a wealth of advantages. By using Intrinsic, you can consider yourself a pioneer of this exciting new technique. CSS Grid is gaining a lot of traction with different design companies and is sure to become a basic fundamental of many websites in the near future. If you do web design for a living, CSS Grid is an absolutely essential skill to have.

Intrinsic is going to be unlike any grid or column stack you have ever used before, but with perseverance and practice, you may be surprised at what you can do with it. Practice by building simple grid layouts first. Mini projects like a thumbnail gallery or simple e-commerce page are a great starting point. Expect things to break - often! If you preview the page and find your grid items are missing, carefully review your template settings, for that particular breakpoint. Editing grid area templates in a code editor is often easier. If you have any questions about Intrinsic or CSS Grid (e.g. optimal settings to use for particular tasks) then feel free to get in contact or ask on the RapidWeaver community forums for help.

The Mozilla Foundation (the organisation behind popular opensource software like Firefox, Pocket and Thunderbird) have been a very strong advocate of CSS grid from the start. Firefox has dedicated tools in the browser developer console to help you inspect and troubleshoot grid layouts. These tools can help you see from the perspective of the web browser how the grid is being calculated and rendered.

Most of all, have fun with Intrinsic and build some brilliant webpage layouts with it!