#Drupal responsive grids code#

You are using the Corporate Clean theme but it's not a truly responsive theme from what I can see from its layout CSS. You could change this up however you wanted, applying this workflow to other content types, building with other components or frameworks, etc.The important thing to make this work is the theme that your using the Views Responsive Grid doesn't do much by itself with regards to styling but it allows you setup you view to apply the appropriate CSS class from your theme to make your display responsive. This was just my solution for leveraging the power of a fav framework into Drupal 8 without too much extra fuss.

What is Font Awesome? A massive icon font set that makes it easy to drop icon elements into HTML and CSS. You don’t need to know Twig to pull this off, but you can learn more here: When you see all those curly boys Įdit Aug 30, 2017: To make icons more accessible, I used instead of and added the ARIA so it will be available to visual users, but ignored by most screenreaders. What is Twig? Twig is an easy way to work with PHP and is built into Drupal 8. Expand the Replacement Patterns panel and then and you can see how all the pieces from those ‘Content:’ fields are now available to us using Twig syntax. Now, open the Global: Custom text field (which should be the last in the list of fields). *shrug* Flexbox fun la la laĬard-footer: The card component came with a footer which I thought looked cool.ītn btn-sm btn-secondary: Bootstrap 4 button classes. Width='100%': Not 100% sure why, but my images were warping without this on there. H-100: Bootstrap 4 class to set an element’s height to 100%, which helps the card fill the height of the column, so all the cards will look the same height. Looking at that documentation more, I decided I wanted this set-up: Article Title Authored On Summary Read More They have an example of a card with an image at the top, and the title, summary, and a button inside.

#Drupal responsive grids code#

card-body so the example code in this article have been updated. Go somewhere Įdit Sept 1, 2017: Bootstrap 4 is now in beta, so there have been some changes.card-block is now. Look again at Bootstrap 4’s card component markup: Card title Some quick example text to build on the card title and make up the bulk of the card's content. Make cardsĮach of the six ‘Content:’ fields I pulled in and hid serve the purpose of getting those pieces of content available for me to fuss with, i.e. List-unstyled is Bootstrap 4’s way of removing all list-y formatting from lists.

That done, I need to add classes to the ul itself under List class. See Bootstrap 4’s utility class documentation. mb-3 is a utility class that adds a margin-bottom.

Then, when the screen is wide, they will take up 4/12 columns, so col-lg-4. Just spaces between, order doesn’t matter.Īccording to Bootstrap 4’s grid documentation, col-md-6 means that on medium width screens, the column with take up 6/12 columns, so half. This will add classes to each li element in the HTML list. I want the articles to appear in columns.īack under Format: HTML List | Settings I added Bootstrap 4 classes to the Row class field. Header (I made a Global: Text area header so there would be some text before all my news.) 2. Page Settings Path: /cards (Create a url for this page) We will come back to this)įilter Criteria Content: Publishing status (= Yes) Content: Content type (= Article) Do not ‘Create a label’.) Content: Image (Formatter: URL to Image) Content: Title Content: Authored on (I use the custom date format D, M n, Y - ga) Content: Body (Formatter: Summary or trimmed) Content: Path Global: Custom text (This is the magic. Title: News (Name that will show up on the page.)įormat Format: HTML List | Settings (We will come back to these settings) Show: Fields | Settings (We will come back to these settings)įields (Add in these fields in this order and check “Exclude from display”. And going through those settings step-by-step:ĭisplay name: Cards (Use whatever name makes sense to you.