If I set a min-width on the side-bar the percentage margins that zen grids adds breaks the layout. I only want the main content area to resize. I noticed when using the responsive template that it makes the right side bar expand /shrink when you re-size. I'm trying to make a responsive (sub theme zen) template using SASS w/ zen grids. You could change this up however you wanted, applying this workflow to other content types, building with other components or frameworks, etc.I hope this is the best place to post my question, if not please refer me to the proper group / focum or support area! Thank you. 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. 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.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |