1.2 CSSketch

[MUSIC] Let's start with a very simple demo of this plugin where you'll see how we can use it. There are two methods for installing this plugin. The first one is to download it manually from the GitHub page. So download the zip, then unzip that archive, and double-click the CSSketch.sketchplugin file. This will open Sketch for you, and it's gonna ask if you want to install the plugin. Since I have it already, that asked me if I wanted to replace it. So I'm just gonna hit Cancel. This is the first method. The second method is to use an app called Sketch Toolbox. You can download it at SketchToolbox.com and once opened you will have access to a whole bunch of plug ins. All you got to do is search for cssketch. You will have an install button. Click that, and you're all set. Now, for this demo, I am going to use a page from an e-commerce theme I have made recently. And the first thing you need to do is go to plugins, CS sketch, set pages style sheet. This will open a dialog. And in my cssketch folder that I'm using here, I have my template sketch which is my current file. And then, also a blank less file called homepage.less. Now I don't need to name these files in any particular way. In my case, this just happens to have the same name as my page here inside's sketch but it doesn't really matter. Go ahead and choose that one and this will effectively associate that less file with this layout here. So, having a look at the less file you see that it's empty. Now let's have a look in the layers and start as a very simple example with this primary button here. And I have a layer where, now I'm on here it's the background of the button called .primary and it has this nice color. So what I can do here is I can actually go in, say primary. So I would target this just like any other element with the class of primary, and I can say background color, and I can paste that in. Now, this will compile automatically. You don't need to compile the less file yourself. And now, the background or the element with the class of primary is tied to my less file. So for example if I change this to green, it's gonna turn green. If I change it to any other color, it's gonna change to that color. And this is just fantastic. And you can see just how fast it is. So I'm gonna go back here, and since we're on the topic of less, you can actually use variables. Variables and, let's say, let's create a variable called primary then I"m going to use this nice color for that and then I can go in here and I can replace it with primary. And then what I can do is actually use the same color and assess or less function to darker that color for the border. So I can do something like border- color. I can do darken primary by, let's say, 20%. And this will get that nice background color and darken it. So we can use less functions in here, which is pretty cool. Now also, what you can do, and let me show you a case here where. It's easier to understand. Like you have multiple elements and they'll have the name .check. So you can see this check mark here, this. So all of these elements have the class or the name .check. So what I can do is I can target those and I can change their background color. Now let's actually create a new variable here. Check. And we'll do the same as before. But this is really cool because by doing this you can affect multiple elements instantly. So if instead of green you wanna put red, you can put red. And they'll all change simultaneously. And by using variables, you can apply this check variable to any other property out there and it's gonna change it instantly. So this is actually perfect if you're building color palates for your layouts. You define a couple of variables, you use those variables and if you decide if you want a different color palate I'll just change one single variable in CSS and my document will be updated automatically. That is just fantastic. Now when writing selectors, there are a couple of ways you can target different element. By using a class name like this, is one way, but you can also target by their layer names. Let's see about this container. It's called description b g. Right? So let's actually do a search for that. And we only have one layer with that name. So what you can do is, you can do a selector like this name. Description BG. So you can target that and, for example, you can change its background color to, I don't know, a grey color instead of what we have here. So save, go back, and now it's a different color. You can target groups as well with this method. So if I want to target this whole page intro here, I'll just undo [NOISE] and undo this. So if I wanna target the page intro group. And let's say that I wanna move it further down. I can say margin top 100 pixels and that's going to move it down 100 pixels from its previous position. Also, you can use these selectors just like you would in CSS. So for example, if I want to target Sidebar and then Thick HR, so only the Thick HR from the Sidebar, I can very easily do that. I can do name Sidebar and then again name, Thick HR and I can set, for example, its background color to blue. All right, so that's gonna target this HR and it's gonna make it blue and that's basically how we can use this plug in to affect your layout. Now, CS Catch uses the system version of WebKit and while it does support a number of CSS properties, there are still a lot of them that need to be added. This is still version 1.0, so as time passes, especially since this is open source, I'm sure it will become more and more complex. So currently, you can use stuff like position, left, right, top, bottom, margins, paddings, width, height, background color, border, although you can only use solid borders for now. You can use box sizing and you can use pretty much everything in list, so mix ins, variables, imports even. You can use shadows that's supported, text color and also text transform. Now, this course is called Sketch Plus CSS, Bridging the Gap. And the gap I'm referring to here is the one between designers and developers. Designers take care of the visual aspect of the project. Then they send their completed work to the developers that code it. Developers can now get involved in the early stages of the design process by Incorporating CSS in the entire workflow. And this will help designers by speeding up the design process, but also it will help developers by giving them a head start because when the entire project is finished, a large portion of the CSS is already written. And not just CSS, the benefit of using this approach is that you can define the DOM early, or the Document Object Model. There is no HTML involved, but naming and organizing layers in a sketch document in a specific manner, can help you later on, when you're writing the actual markup for your page. Now, you might say, well it's not a good idea to let designers dictate how you write your HTML. That's probably true, that's why you have to collaborate with your designer. So let's see how this could help the designer. Well it's gonna save them a lot of time because sketch has something called Shared Styles and Text Styles. The idea is you save the style of a text or a shape into a template that can then be applied to more elements. So you could have styles for the headings, H1, H2, and so on. Now, there are cases where you'll want the H1, for example, to be center aligned. For that, you need a separate textile. What if you wanted to be different color? Then you need to create another text tile. So, as you can see a things get really complicated really fast. In CSS you could simply create a base text tile for that heading and then just some additional styles for central aligned or for the different color. That makes things much more manageable. Not only that, but by taking advantage of some less features, like mix-ins, variables or color functions, the designer can easily create color schemes that can be changed in an instant. As far as the developer's concerned, we already pinpointed the advantages, early access to a design and the ability to set the grounds for the CSS and the HTML, not to mention the time saved later on. And that's it for this short course. Please join me in the next video for the conclusion.