Pre-Built Paragraphs

In addition to W3CSS, structures can be build in Drupal in short paragraph styles.  Intuitively,

  • A page can be considered as a series paragraphs, or blocks
  • Each block can have different styles and layout, for example
    • 1 column structure
    • 2 column structure
    • image + text
    • text + image
    • stack or bricks structure by combining above

 

Diff types of Titles
Text Paragraph
Dual Column Text Paragraph
2 Columns of Images
Standalone titles in diff styles allow flexible insertion into diff part of content
Full width text area
2 50/50 columns for text areas
2 50/50 columns for images, with built-in popup colorbox feature
2 Columns Image + Text
2 Columns Text + Image
2 Column 33/66 Image + Text
2 Columns 66/33 Text + Image
2 50/50 Columns Image & Text.  Image built-in popup colorbox feature
2 20/50 Columns Text & Image.  Image built-in popup colorbox feature
2 33/66 Columns Image & Text
2 66/33 Columns Text & Image
3 Columns Text
4 Columns Text
   
3 33/33/33 Columns Text
4 25/25/25/25 Columns Text
    

 

With these pre-built structures, no coding will be necessary, and will dramatically improve the productivity for content creation.

 

 

Following are some examples

This is a paragraph with built-in div container.

Do not be scared by the term div container.  Basically it is a concept of having all the text included in a container.  Because of this, it will occupy a little space around the text.  If you look at the two sides of the text, the space between the text and the edge is wider, and that is because of this spacing, technically called padding.

With padding, it actually appears even better, isn't it?

This is a normal bare paragraph, without any styling.  It looks like part of the original text except starting a new paragraph.

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

2 Columns 50/50 Text

What is Lorem Ipsum?

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Why do we use it?

It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).

2 Columns 50/50 Image + Text

Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32

2 Columns 50/50 Text + Image

There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.

2 Columns 33/66 Image + Text

Diam phasellus vestibulum lorem sed risus. Enim eu turpis egestas pretium aenean pharetra, magna ac. Justo, nec ultrices dui sapien. Nunc sed velit dignissim sodales ut eu sem. Erat pellentesque adipiscing commodo elit, at. Blandit massa enim nec dui nunc mattis enim. Egestas fringilla phasellus faucibus scelerisque. Urna et pharetra pharetra, massa massa ultricies mi, quis. Etiam dignissim diam quis enim. Tempus quam pellentesque nec nam aliquam sem et tortor. In est ante in nibh mauris, cursus. Sagittis, purus sit amet volutpat consequat. Blandit cursus risus, at ultrices mi tempus. Malesuada pellentesque elit eget gravida cum sociis natoque. Eu ultrices vitae, auctor eu augue. Eleifend donec pretium vulputate sapien nec.

Neque, vitae tempus quam pellentesque nec nam aliquam. Dignissim convallis aenean et tortor at. Sed viverra tellus in hac habitasse platea dictumst vestibulum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mi eget mauris pharetra et ultrices neque ornare aenean. Eu, facilisis sed odio morbi. Enim, sit amet venenatis urna cursus eget nunc scelerisque. Ornare lectus sit amet est. Ultricies mi eget mauris pharetra et ultrices neque ornare. Dignissim convallis aenean et tortor at. Fringilla urna, porttitor rhoncus dolor purus non. Placerat duis ultricies lacus sed turpis tincidunt id. Consequat interdum varius sit amet. Id diam maecenas ultricies mi eget.

2 Columns 66/33 Text + Image

Natoque penatibus et magnis dis parturient. Id nibh tortor, id aliquet lectus proin nibh nisl. Eget arcu dictum varius duis at consectetur lorem. Blandit turpis cursus in hac habitasse platea dictumst quisque. Ipsum nunc aliquet bibendum enim, facilisis. Ornare quam viverra orci sagittis eu volutpat odio facilisis. Duis tristique sollicitudin nibh sit amet commodo nulla facilisi. Felis donec et odio pellentesque diam. Eget nulla facilisi etiam dignissim. Ut enim blandit volutpat maecenas volutpat blandit aliquam etiam. Gravida arcu ac tortor dignissim. Massa ultricies mi, quis hendrerit dolor magna. Duis convallis convallis tellus, id interdum velit. Faucibus scelerisque eleifend donec pretium vulputate sapien. Quam lacus suspendisse faucibus interdum posuere lorem. Purus viverra accumsan in nisl nisi. Nascetur ridiculus mus mauris vitae ultricies leo integer malesuada. Vel elit scelerisque mauris pellentesque pulvinar.

Tempor orci dapibus ultrices in iaculis. Lacus, viverra vitae congue eu, consequat ac. Iaculis eu non diam phasellus. Tempus iaculis urna, id volutpat lacus laoreet. Nulla pharetra diam sit amet. Mauris rhoncus aenean vel elit. Malesuada proin libero nunc, consequat. Sed risus pretium quam vulputate. Enim tortor, at auctor urna nunc id cursus. A diam maecenas sed enim.

2 Columns 50/50 Images
Lotus
Marguerite
2 Columns 50/50 Text

Tincidunt id aliquet risus feugiat in ante metus, dictum. Commodo sed egestas egestas fringilla phasellus faucibus. Volutpat consequat, mauris nunc congue nisi, vitae suscipit. Donec enim diam, vulputate ut pharetra sit. Eget velit aliquet sagittis id consectetur purus. Pretium fusce id velit ut. Elit ut aliquam, purus sit amet luctus venenatis, lectus. Habitasse platea dictumst quisque sagittis, purus sit amet volutpat. Posuere morbi leo urna, molestie at elementum. Lobortis mattis aliquam faucibus purus. Mauris a diam maecenas sed enim ut sem. Donec adipiscing tristique risus nec feugiat in fermentum. Amet, porttitor eget dolor morbi non arcu risus. Sed vulputate mi sit amet mauris commodo quis imperdiet. Egestas sed sed risus pretium. Vivamus at augue eget arcu. Magna eget est lorem ipsum dolor sit amet. Vestibulum morbi blandit cursus risus.

Posuere lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed enim ut sem viverra aliquet eget sit amet. Eu augue ut lectus arcu, bibendum at varius. Fames ac turpis egestas integer eget aliquet nibh. Felis, bibendum ut tristique et, egestas quis ipsum. Adipiscing at in tellus integer. Suspendisse in est ante in nibh mauris, cursus. Maecenas accumsan, lacus vel facilisis. Tellus mauris a diam maecenas sed enim. Pharetra, magna ac placerat vestibulum, lectus mauris ultrices. Ac turpis egestas maecenas pharetra convallis posuere morbi leo. Praesent elementum facilisis leo, vel. Integer feugiat scelerisque varius morbi enim. Mattis nunc, sed blandit libero volutpat sed. Massa sapien, faucibus et molestie ac.

3 Columns 33/34/33 Text

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

4 Columns 25/25/25/25 Text

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.