4.1 Brackets

Brackets is a relatively new editor from Adobe. And the best part about it, it's free, and it's open source. And it's cross-platform, so you can use it on Mac, Windows or Linux. So let's have a look at it. This is how Brackets look like. It's a very simple editor. On the left side, we have the file list, basically. And you can choose to open a new folder from here, if you want, or open a recent one. So you could almost use this like a project manager. Then here we have the main editor window and here, a small sidebar for extensions, more about that in just a bit. Now one of the cool features of Brackets is the splits. So you can basically split your editor into parts. Now, you can use a vertical split, which looks like this, so you have one file here and one file here. Or a horizontal one, where you have one pane or a panel on top and one at the bottom. Now, obviously this works a lot better on large displays and what you're looking at right now is a screen size of 1280. So it's not that big, but If you're thinking about a regular laptop screen for example, it's gonna be much bigger, so your gonna have more room. Now what you can do here is you can basically drag a file, or simply actually click it, while one of the panels is in focus. You simply click one of the files and it's gonna open there. Now let's have a look at it in vertical mode. So this is very cool because you can have an HTML file here, you can have a CSS file here. So you can edit these seamlessly. Now on the bottom, you have some options. For example, when this is focused, you can select the syntax, colors. So if this were a CSS file, you would choose a CSS syntax. If not, you would just go with the default, which is HTML. And also you switch between spaces and tabs. And it can also alter the tab size or the number of spaces. Now let's talk about the right sidebar. Here we have something called Live Preview, and if you click it, this will basically open a browser window and it will automatically update when you update your source file. So lesson4, here let's say that I'm gonna change this h1 here to something like this. I'm gonna save. I'm gonna jump back, and as you can see, it highlighted my change. And it also highlights my cursor position, so if I move inside this paragraph, it's highlighted like this. And if I move inside this image, it highlights my image, so pretty cool. Again, really useful if you have multiple or a bigger screen. And you can put this on a side, for example, you can have the editor on the other side. And the nice thing about it is that you don't need an extra app or a third-party that will do the live preview. It's built-in, so really, really nice. Now, I'm just gonna disconnect this. And as you can see, any change that I do now will not be shown automatically, I've gotta refresh the page. Next up, is the extension manager. Now, extensions are basically plugins. So if you're looking to extend the basic functionality of the editor, you can use plugins or themes. So there are a bunch of different themes here, you can choose from. For example, let's install this theme here. Okay, we're gonna close this, we're gonna close that. And then we'll go to View > Themes and we're gonna use that new theme we just installed. And in here we can also select the font size. Or if you wanna make it bigger, you can make it bigger, and you can also choose the font family for the editor text here. Really cool. Now as far as plugins go, well, there are a bunch. As you can see, I'm scrolling and I'm scrolling, and there are just a bunch of plugins. Here we can see our installed plugins. Right now we have Dark Contrast and we have Extract for Brackets. So actually, Extract for Brackets is a plugin made by Adobe. And what it does basically, it gets the design information from a design file, for example, a Photoshop. So let's have a look at that. I'm gonna open here Extract for Brackets. And as you can see, this is an example PSD, but I can open my own PSD if I want. So what you can do is select one of these layers. And then it gives you different values, for example, width, height. You have the option to select pixels or percentages. You can copy the text if you want and then let's go to this bit here. You can see a list of layers. And this matches exactly the list that you'll find in the actual Photoshop document. Here you actually have some tips. It says to extract CSS, start typing or hit Ctrl+Space. So inside the CSS rule here, let's actually create a rule. Let me just close this. Let's create a new rule. Let's call this button and then Ctrl+Space. And you can see here the properties that I have extracted from this element that I selected here. So, let's do the background, and it gets the background. And then I can hit Enter, Ctrl+Space again. I can copy the background color, the border radius, for example. So this is a very simple way of working with PSDs and actually slicing them. So for example, you can quickly select multiple items to measure the distance between the two. So as you can see here, we have a 60 pixel distance. Or I can select this and this, and I get 46 pixels. So pretty cool stuff. This is an editor made by Adobe, so it's only normal that they would include some sort of a way to work with the PSD files, which, for some designers that still use Photoshop for this, is an added bonus. And that's about it for Brackets. Okay, so bottom line. What are the pros and what are the cons? First of all, the pros. Number one, it's free, it's cross platform, and it's open source. Exactly what I said in the beginning of this video. Number two, it has a very clean and modern user interface. Number three, live preview is a big bonus, because you don't have to rely on a third party solution or an app for browser refreshing. And that's always a good thing. Number 4, the expandability is awesome because there are lots of plugins and themes out there. So you can really customize your editor. Then there is Extract for Brackets which, again, is awesome, especially if you don't work with CSS that often. And finally, the ability to split your UI into two separate panes is great, especially if you're using a large display. So, you could have a CSS on one side and the HTML on the other. It depends how you set up your project. Now for the cons, and the first one is the fact that there is no built in project management. However, you can view your recently opened folders, and you might find a plugin that adds this functionality. Number two, there is no FTP client, although you could add a plugin to achieve this functionality. And number three, just like Espresso, the tabs are on the left instead of the top so it can be confusing when switching between files. Although, the ability to have two separate panes can make this much easier. And that's it for Brackets. This is a great editor, a free one, that can be used on all platforms. Next up, we will have a look at Atom.