Home > blocks > Blocks and CSS Grid Systems

Blocks and CSS Grid Systems

September 12Hits:1
Advertisement

How do I achieve the following in Drupal:

<div class="row">     <div class="col-xs-4 col-md-4">[MY BLOCK HERE]</div>     <div class="col-xs-4 col-md-4">[MY BLOCK HERE]</div>     <div class="col-xs-4 col-md-4">[MY BLOCK HERE]</div> </div> 

I can use the "Block Class" module to assign the grid system classes to the block, however this does not allow me reuse blocks in another layout (changing the grid system classes).

Im also limited to where I can put these blocks. At the moment i have a specific region setup that is wrapped in the "row" class. This prevents me for having a few different rows and from placing the blocks anywhere...

<div class="row">     <div class="col-xs-4 col-md-4">[MY BLOCK HERE]</div>     <div class="col-xs-4 col-md-4">[MY BLOCK HERE]</div>     <div class="col-xs-4 col-md-4">[MY BLOCK HERE]</div> </div> <div class="row">     <div class="col-xs-4 col-md-4">[MY BLOCK HERE]</div>     <div class="col-xs-4 col-md-4">[MY BLOCK HERE]</div>     <div class="col-xs-4 col-md-4">[MY BLOCK HERE]</div> </div> 

Basically I need to:

  1. Add grid system classes to blocks
  2. Reuse blocks in a different grid system class configuration
  3. Freedom to define rows of blocks and assign them to any region, not just one that is wrapped in a single "row" class.

Any help would be much appreciated, at the moment I have to style each individual block to work responsively and I know that there must be a better way of doing this.

Thanks

Answers

We primarily build our sites using Bootstrap with this same technique, so here are 3 modules that will make your life a lot easier.

Block Class - add classes to blocks.

Block Group and/or Region Class - group blocks together in faux regions, add classes to regions.

Blocker - places blocks on specific pages in different regions, alternative to using the core block placement system. Really useful for site building and putting blocks on basic pages.

Blocks and CSS Grid Systems

Related Articles

  • Blocks and CSS Grid Systems

    Blocks and CSS Grid SystemsSeptember 12

    How do I achieve the following in Drupal: <div class="row"> <div class="col-xs-4 col-md-4">[MY BLOCK HERE]</div> <div class="col-xs-4 col-md-4">[MY BLOCK HERE]</div> <div class="col-xs-4

  • Understanding CSS Grid Systems from the Ground UpMarch 11

    Over the past few years CSS grid systems have grown a lot in popularity, quickly becoming considered best practice for rapid layout scaffolding. As a result, there has been no shortage of frameworks popping up offering their own grid systems trying t

  • How to choose a CSS grid system for new theme?August 4

    I am going to make a new responsive theme based on an existing base theme for drupal 6. The theme need to be minimal but flexible. As there are many CSS grid systems to choose from, I've read that 960.gs has fallen out of fashion as it is too small f

  • Should I use a CSS grid system for this template?

    Should I use a CSS grid system for this template? February 13

    This might be the wrong place to ask but... I want to convert the following template to HTML and CSS. Should I use a grid system such as bootstrap or skeleton? Seeing as it's already a grid it seems to make sense. I get the feeling that bootstrap wou

  • Simple grid system made out of CSS columnsApril 15

    I have been researching and experimenting with HTML5 and CSS3. I was aiming to create a very simple but efficient tiled gallery / grids. So some sort of grid system that I can layout anything inside. Below is what I have created, what are your opinio

  • A Creative Grid System With Sass and calc()March 27

    Before we even get started talking about Sass and the code for this project, let me remind you this is no more than a quick experiment which by no means should be used in a live context. So what follows is only a proof of concept of what we could do

  • Easy Responsive CSS Grid Layouts: 4 MethodsJune 11

    These days, there's a framework for everything, and it seems that before we can even digest one, another one is released. This holds particularly true when it comes to CSS grid layouts, and there's no shortage of frameworks deemed "the best, most lig

  • How to create interfaces in a graphics editor for responsive grid systems considering that they aren't pixel-perfect? September 7

    Any responsive CSS grid system uses long decimal point percentage values for columns' width (e.g. "16.66666667%"). I don't understand how to lay out the grid in Photoshop, because elements of the interface will either be longer, or shorter than

  • Custom bootstrap like grid system with HTML and CSS February 7

    How to implement Custom bootstrap like grid system with HTML and CSS? Or how does bootstrap internally implement grid system ? --------------Solutions------------- As Won Jun Bae suggested, the best way to learn it to check out Bootstrap CSS files. H

  • Anyone using 960 Grid System or YUI 2 Grids CSSApril 13

    Anyone having experience with 960 Grid system and getting it to play nicely with SharePoint? I am intrested in experience from other CSS Framework and how successfull was your team in implementing this? --------------Solutions------------- I'm using

  • What are "rows" in a responsive grid system?

    What are "rows" in a responsive grid system?January 22

    I'm looking at various grid systems to make a responsive design, but I keep coming across the same thing that puzzles me : What's a row in a design where everything can move based on the screen size ? Say I want the following design on a large screen

  • Understanding Bootstrap's Grid System

    Understanding Bootstrap's Grid SystemNovember 11

    Bootstrap is undoubtedly one of the most popular front-end frameworks. With more than 73k stars and 27k forks, Bootstrap is also one of the most popular GitHub repositories. In my last article, Responsive Web Design Tips from Bootstrap's CSS, I expla

  • Introducing sGrid: A Stylus-based Flexbox Grid SystemDecember 2

    After reading the title of this post, you might ask: Why another grid system? This is a good question. Basically there are plenty of grids out there and many of them are flexbox grids too. So why have I built another tool that's similar? The short an

  • Bootstrap cards/thumbnails not lining up side by side correctly in the grid system & card deckFebruary 6

    I'm having a problem with getting Boostrap's thumbnails & cards to line up side by side in their grid system. Basically, this is an assignment & I have to follow certain parameters: -must use Bootstrap grid system sm-size columns -these squares of

  • My 960 grid system has wider columns that standard. 55px instead 40px for 16 columnsOctober 27

    I was surprised to discover my website is wider than is supposed to be. I am using Drupal + Omega Theme that uses 960 grid system. The total width of the site is 1180 instead 960. The columns are wider: On 16 columns options: they are supposed to be

  • Mixing the classic type size scale, grid systems and modular scalesNovember 25

    I'm coming from a programmers background and just trying to understand how sizes should relate. I read in the book "designing for the web" that these are the classic type sizes and text set in these size should look better if typeset correctly.

  • Designing for the Web: Templates and Grid Systems

    Designing for the Web: Templates and Grid SystemsDecember 12

    Continuing on from the previous article in this series, Designing for the Web: Resolution and Size, we cover some helpful and important factors while creating a template for designing a website. In this article, we will cover some important issues an

  • Using CSS Grid Layout and Blend 5 to Build a Game

    Using CSS Grid Layout and Blend 5 to Build a GameApril 16

    I'd like to share with you a mysterious internal secret kept within Microsoft for a long time. It's the real story behind the concept of the CSS Grid Layout imagined by Microsoft for IE10 and Windows Store Apps. Most of you probably think that this s

  • Getting: org.opengis.referencing.NoSuchIdentifierException: No transform for classification "Transverse Mercator Zoned Grid System" with geotoolsApril 22

    Using geotools I've been trying to create a referenced envelope after converting/reprojecting from WGS 84 to UTM with specific zones and it seems that either I need to do something with authority factories or figure out some kind of a workaround for

  • Recommended grid systems or layouts for large display and responsive designs

    Recommended grid systems or layouts for large display and responsive designsJune 16

    I've been working with 960 layout for years – but was wondering if there are other grid systems that are strongly supported by the design and development community and also have blank or starter pages to work with. --------------Solutions------------

Copyright (C) 2017 ceus-now.com, All Rights Reserved. webmaster#ceus-now.com 14 q. 0.511 s.