It will pull in the Product Cards Custom Content Type instead of Articles. I modified the “Frontpage” View at first, with the plan being to duplicate this view for a “Products Page” version later. I was using them as a Content Type before making a proper “Product Cards” Custom Content Type (with add-to-cart functionality). These are simply the “Article” Content Type that comes in a default Drupal install. On the homepage I used Drupal Views and Custom Blocks to create an array of “Teaser” configurations of product listings. It presents full width/liquid grid layout for front page and categories pages. I uploaded the Bootstrap 3.4.1 libraries (including jQuery, etc.) to a “libraries” directory and pointed my child theme to use those local files instead of relying on CDN code (the typical Bootstrap style customization source of the theme). FontFolio is a Responsive showcase theme for designers, artists and craft persons. Currently this theme still uses Bootstrap 3. I installed the Bootstrap theme and created a child theme named “BundaTheme” for customizations I do not want overwritten in future updates. Drupal 8.x Prototype – Home Page Desktop Theme and Style Here’s the desktop Home Page of a working prototype I made (of a pretend crop seed company) using a Drupal 8.x install. Working Prototype: Drupal 8.x Install with Bootstrap Child Theme This allows for collapse to fewer columns per row on narrower viewports. Lear more here on how to use Responsive Grid, with actual step by step demo instructions and illustrations.A little trick to make Drupal 8.x Views Grid layout columns become responsive using Bootstrap. This will make sure your column adhere to the grid in your Bootstrap based theme. For example, if your theme utilizes a grid, like Twitter Bootstrap does, you would specify "span3" as the column class(making sure to use the correct span size). In order for the columns to work you'll need to specify the class name of your columns. You'll need to understand that the the module won't provide any default styling to the grid so you may think it's not working, this is by design. Specify the number of columns, and the alignment of the grid. How to Use Responsive Grid Module for ViewsĪfter enabling the module, create a new view with the responsive grid display format. Provided is also the ability to specify a horizontal or vertical grid layout which will properly stack the content on a mobile display. Rather than trying to force the standard Views grid display to work for mobile this provides the same functionality, but in DIVs instead of tables. Views Responsive Grid provides a views plugin for displaying content in a responsive(mobile friendly) grid layout.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |