Drupal 8 Theming - Part 16 - Working With CSS Frameworks

I think in this episode we are going to do a little bit of theming in last 15 episodes we talked about views content types blogs regions and so on and those are all things that we need to offer our theme to work as expected but we didn't do much of actual theming and this series is called Drupal 8 theming so I feel bad about that a little bit so in this episode I'm going to show you how you can add custom CSS classes to your HTML output be that from your actual templates or from views why would you need that you might ask yourself well if you're using something like bootstrap or ZURB foundation or any other of million of CSS frameworks that are currently out there you need some way to put custom CSS classes on your HTML because if you don't do that your CSS frameworks won't work so in this episode I'm going to show you how how you can do exactly that I know I said in the previous episode that we are going to be talking a little bit more about regions and we will in the next episode but in this episode we are going to learn how to put custom CSS classes on our HTML output so that our page can look a little bit better for this video view we are going to be using syrups foundation version 6 which recently came out so to download it we just go to download foundation and you can download complete version essential custom or this historic via a CSS but I'm just going to make a custom build for myself and I'm going to turn this off we are going to make a minimal minimal build of foundation framework so we are going to use typography buttons close buttons and button group also we are going to use this menu right here and I think that's about it so you can use whatever you want from here but I'm just going to make a minimal build of foundations framework and just download it and I'm going to download it to my desktop save it unzip it open up my file manager and I'm just going to go right here into CSS folder that you get with that download and just drag foundation to my sass folder in our team so says folder in and email theme and then I'm going to rename this foundation that CSS to be so renamed to be underscore foundation that s CSS so we want to compile it with our gulp and with all the other CSS partials actually scss partials that we have so I'm just going to rename it that and then I'm going to go to my style that s CSS but first of all I have to turn gulp on so that the compilation will work so god watch and then right under this reset import I'm just going to do import Foundation and that should be it let's just enable live reload on our site and when I save this we should see immediate changes so when I go here you can see that all the links are blue right now also you can see that there is a little bit of a problem with our menu but we're going to fix that we have these black dots right here okay so and I'm just going to do a little bit of cleanup so I'm going to go to my fonts that a CSS and I'm going to delete everything in here because we don't need that Foundation provides a base fonts for us so if we go to our site it looks pretty much the same and also I'm just going to go to my home page that a CSS I don't like this red colored links right here and they are coming from home page views field view node a so I'm just going to delete this and leave everything else these are just some basic styles for our list right here and also we have this layout includes that come from Susy so that our content is on the left and our sidebar is on the right and so on so okay so we added foundation to our workflow let's just fix the menu right now so I'm just going to open them up my developer tools so that we can see where does this menu actually come from and if I just click on home we can see that the output is coming from templates navigation menu dot HTML data twig okay of course you have some file suggestions like menu - - main and so on we're not going to be using those file suggestions for the main menu but we are going to be using it for this menu right here so this is a menu also ok so I'm going to go to templates navigation and menu dot HTML dot twig open it up and as you can see we have some twig do tags right here so we are doing something this macro command and then you have these imports and then you have lists of items and so on the part that we are interested is this for each loop so we are listing all the items right here but first of all let me just talk a little bit about why this is happening so this is happening because if we see our HTML output we can see that we have just this UL tag and these Li tags right here so since we added foundation to our CSS it's going to output every UL tag with this dot so these bullet points so these are list styles in CSS but if you wanted to make a menu with foundation you could just add class of menu right here to this UL but as you can see this is currently just a UL tag so what we want to do now we are going to go to foundation and we're going to go to dark side the darks oh I didn't do it right so side the docks okay and then if we check out menu right here we can see that we have this class menu and we would get a menu like this so let's fix our menu so as you can see this is UL right here and this is the menu level one so we want this one not this one so to add class to our UL as you can see it has these attributes right here so we want to add class today those attributes so I'm just going to do that ed class and then I'm just going to add a class of menu not my new menu okay and I think that should be it if we save it right now and go to our site as you can see those dots are gone we still have a white color on our links because because we have let me just see in our I think header file so if we go to header dot a CSS we have h ref H tags for our main navigation the color is white if we delete this they will be like on the foundation site so blue but we actually want them white because because if there remain blue they're not very visible so I'm just going to leave that as it was and now we have our menu okay so let's say we wanted to add some classes to our 8x how do we do that so if we go to for item in items you can see the link right here let me just make this bigger okay so we so this is a link this is an a tag output it actually it's written in twig and this outputs a tag so the link tags so how do we do how do we do this so how do we add a class to this a tag so is enough we just do item dot attributes and then we do add class and we can call them a link okay so if you needed to add a class to your 8x you know now how you can do it because also as you can see it has a class of is active okay also you can add something like button button right here and if when the page refreshes you can see that those links are actually buttons right now so this button the class is coming from foundation okay but if we go down here a little bit you can see that our account menu is not looking very good so let's fix that open up our developer tools click on this link and we can see that the actual output of this menu is also menu dot HTML that week so that's a problem for us because this one is also coming from menu that week so we have some file suggestions so we can call this file menu - - account that HTML data tweak so I'm just going to edit this as HTML and copy out this name of it out and create a new file called menu - - count dot HTML that wig in our templates navigation folder so let's do that okay and then we can just copy all of this out and paste it right here so this is happening because this is a horizontal menu and it doesn't have enough space to show the links properly so what we need is a vertical menu so we can just go to foundation and see that if you wanted to have a vertical menu you just have to add a class of menu and then vertical okay let's do that so in the same spot we are just going to add another class called vertical okay vertical save it and of course if we refresh the page right now nothing will happen because we didn't what clear the cache so let's go to configuration and then we go to performance and then we clear all caches once that is done we should be able to go to our front page and when we refresh it now our menu looks a little bit better okay so that's great so that's the way you can manipulate your HTML output actually your CSS classes output on your HTML elements in your templates just remember this command so add class and you always add it to the attributes in twix okay also as you can see this one right here so that would be for if you got the drop down menu so that would be another level you can just add class and add whatever classes you want right here but if you have something like attributes which we need right here you can just use ed class okay but now let's try to make this read more link actually be a button so we are going to be using from foundation if we go to buttons we're going to be using this button class so that we can have buttons instead of just regular links down here so how would we do that if we go to structure right now and then go to views and then go to front page so the views our front page view we have this content link to content so this is our a tag right here so we want to add a class to it so but if we click on it we can see that we have these style settings so we can customize the field HTML label HTML customized field end label wrapper so if we if we click on customize field HTML and create a CSS class apply all this place save refresh this page we can see that we kind of get what we want but as you can see we don't have this read more so we have them but they're a blue color like this and they're not particularly visible on this button but if we go to the foundation site we can see that we should have white text here not blue text so what is going on if we open up our developer tools and check out this you can see that the actual class is not being applied to this a tag but this is being applied to the span tag that is wrapping around this a tag so that's not good so I'm just going to go to my views and turn this off because obviously it's not working very well we can do anything with the customized label because we don't even have a label for our a tag and we can't customize the this wrapper because that just will make any sense so what we can do we can rewrite the results so we can output this field as a custom link so if we click that we don't do anything else except add a class to that link so if you do button right here and apply all this place and save it refresh the page and as you can see we get this nice button with this nice hover effect and everything is working fine so our page looks a little bit better right now okay so this is it for this episode I just wanted to draw our attention to actually what we did a few seconds ago so this rewrite results feature of views is actually pretty cool stuff so and one of the next episode we are definitely going to look a little bit deeper in this because as you will see it's a pretty powerful feature for views it allows you to control your output a little bit better and so on so thank you guys for watching you can follow me on Twitter or on Facebook like this video if you liked it like this channel if you liked it also remember that all of the code that we did in this episode is available on github link will be in the description below and that's it thanks again for watching and I'll see you in the next one

Channel: Watch and Learn

Views: 23,664

Rating: 4.927928 out of 5

Keywords: Drupal 8, Cascading Style Sheets (Programming Language), Drupal (Software), Theme, Drupal 8 theming, theming, theming tutorial, tutorial, Drupal Views, Zurb Foundation, css, Drupal theming

Id: 6l_sNw04wyU

Length: 18min 44sec (1124 seconds)

Published: Thu Dec 03 2015