2.3 Substitutions and Flags

Let's have a look at some extra functionality that's built into Nucleus, first up, substitutions. Now, substitutions are meant to be used solely in the markup section of your Nucleus comment. All right, so just so you understand what I'm talking about. The markup portion will show up when you click this Show example button, right? So this is the name of your element, either nuclide or atom, or whatever it is. This is the description, this is a preview, and this is the markup, for example, right? So, whatever you write, for example these, or this, or whatever you write under markup, for example, is gonna show up here. Now, because we're writing markup like this is not the easiest thing in the world, Nucleus made it easy by offering us substitutions. Now there are three substitutions available, first one is the ability to include a selector. So for example, if in my menu, I would like to include this bit of code, right? In here, under markup, I would simply say @, I'm gonna open some curly brackets. include:, and then the name of my selector. So what this gonna do, is gonna search for this. And it's gonna grab all the code that l put under the markup portion of that element, and it's gonna put it right here. Very useful, for example, when you're defining an atom, like a list item. And then you're defining the menu as a molecule, right? So in the markup, you would simply say, include menu item, as many times as you want. And the generated result will be multiple menu items, very useful. Another substitution is the ability to generate placeholder text, that's also very easy to do. You would simply say lipsum, you would pass in the quantity, and the type. So the type, it can be paragraph, it can be words. And the quantity, well, you specify how many you want. So if you want three words, you will simply say three, whoops, three words or three paragraphs. And that's going to generate dummy content for you. Finally, the third substitution is for placeholder images. These are grabbed from unsplash, and they're very, very simple to use. Simply say @, you pass an image, and then the width and the height of the image that you want, so for example, 200 and 200. That's gonna grab an image from unsplash that's 200 by 200, and it's gonna paste it in your markup. Now, mind you, this will generate only the src, so you would actually have to use it like this, img src=. You would paste this in, give it an alt, and you're done, and that's it for substitutions. Now flags are used only for enabling certain functionality within Nucleus itself. And there are two of them, full-width and deprecated. The full-width will actually, and let me show you an example here. Full-width will make an element stretch the entire width of the page, just like you see on this header here. The other elements are bound by a box about this big. But if you set a flag as full-width, like for example, @flag, and then you would pass in the name of the flag, full-width. Well, that element will span the entire width of the page. And the second flag I wanna show you is called deprecated, and it looks like this, #deprecated. This will mark an element as deprecated, and I think they have one round here, there it is. So this color is now marked as deprecated. Deprecated basically means it's obsolete, it's not used anymore, it was used, in a previous version. And, those are the flags. Now, let's have a look at the other two extra bits, and those are called modifiers and script. That's coming up in the next lesson.