Modular Layouts

Modular Layout Useful Links:

Modular Layout Explained:

This modular layout example deals with the styling of images. Rather than styling each image separately, one by one, or having a very rigid set of requirements, a modular system establishes a flexible framework with options to vary the layout depending on the content. This type of layout is useful when there are frequent content changes as in news/events formats. It also makes it easier when more than one person is maintaining the website. The following points illustrate this concept as an example:

Modular Layout Example:

1. The example uses a uniform 7-column grid, consisting of seven 100px-wide columns and 10px of space between each column. You can use any measurements you want as long as they remain constant.

2. All of the images will have a width that references the grid column widths. For this example 100px, 210px, 320px, 430px, 540px, 650px, 760px, but the height can be as large as needed.

View the CSS class structure.

4. Below are various examples using images of my cat.

Examples With Cat:

Images go in a div with the classes "pic size direction". "Size" can be "one, two, three, four, five, six, or seven", direction can be "right" or "left". Captions go in a "p". This one is "pic two left"

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio. Donec et ipsum et sapien vehicula nonummy. Suspendisse potenti. Fusce varius urna id quam. Sed neque mi, varius eget, tincidunt nec, suscipit id, libero. In eget purus. Vestibulum ut nisl. Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque eget, cursus et, fermentum ut, sapien. Fusce metus mi, eleifend sollicitudin, molestie id, varius et, nibh. Donec nec libero.

Right outset image. This is "pic one right"

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio.

For inset images, add the class "inset" to the pic div. This is "pic two left inset"

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio.

For images without captions, or captions set apart, add "solo" to the pic div and move the caption p directly outside it using similar styles (e.g., "caption three left")

This caption is set apart in a p using "caption two left frame". The image is stretched in an img with class of "pic four left frame solo". Notice the seven cats above are 7 images in a div.