Skip to content
Grav 2.0 is officially stable. Read the announcement →
Archive

Question about nucleus.css grid and 2/3 - 1/3 content/sidebar layout

Started by Muut Archive 10 years ago · 1 replies · 606 views
10 years ago

I notice that the grid system in nucleus.css supports single column sizes (1/2, 1/3, 1/4, etc..). PURE css also supports columns but also includes things like 2/3, 3/4, and other variable column sizes. I also read that PURE css is just a fallback in case a browser doesn't support flex, so I'm assuming that the PURE classes should not be used.

If I wanted a 2/3 content area with a 1/3 right sidebar using nucleus without using the multi-column width css from PURE, should I incorporate the .block class? This seemed to work but I'm not sure if I'm using it right.

HTML

   <div class="grid">
      <div class="block">
       content
      </div>
      <div class="size-1-3">
         sidebar
      </div>
   </div>
---
10 years ago

You're close, you just need block on both to trigger the flex box columns, something like:

HTML
<div class="grid">
  <div class="block">content</div>
  <div class="block size-1-3">sidebar</div>
</div>

Suggested topics

Topic Participants Replies Views Activity
Archive · by Deleted User, 9 years ago
0 1349 9 years ago
Archive · by Muut Archive, 9 years ago
2 934 9 years ago
Archive · by Muut Archive, 9 years ago
2 4060 9 years ago
Archive · by Muut Archive, 9 years ago
1 2946 9 years ago
Archive · by Muut Archive, 9 years ago
3 1118 9 years ago