7 days of unlimited WordPress themes, plugins & graphics - for free!* Unlimited asset downloads! Start 7-Day Free Trial
FREELessons: 7Length: 41 minutes

Next lesson playing in 5 seconds

Cancel
  • Overview
  • Transcript

2.4 Modifiers and Scripts

When styling a certain element, for example a button, you’ll usually use a main class and then variations of that class for different colors, sizes, or shapes.

Nucleus allows you to mark these variations with something called “modifiers”. Let’s learn more.

2.4 Modifiers and Scripts

When styling a certain element like a button, for example, you usually have a main class that defines the bulk of the styles. And then some additional classes for defining different sizes or shapes or colors, right? Well, nucleus has a tool for that that helps you mark these variations called modifiers. The way to use is very simple. Let's say, for example, that this button it has a fw class or full width and the display is set to block and width 100%. Well, you can mark this variation with modifiers. And under that also leave a blank space you will set the name of the modifier and the ascription. So, for example, fw it says full width button. Now this will create a special section within the style guide for that particular element. That will list all the modifiers and their respective description. You can also specify examples in the markup. And that's it for modifiers. Very, very simple. Now, some components might require some JavaScript to work properly. Like, for example, the close button, or a tab or a carousel control, right? Well, you can actually specify JavaScript code into the markup examples. And that's gonna be shown along with the HTML markup in the finished style guide. So, for example, on our button here, in the end we can say script. And under the script you can put your JavaScript. So, for example, if you're using jQuery, you might do something like button click and you might have a function. Just be careful with the comments here. It needs to be formatted correctly in order to work like do something alert hello, right? And once that is parsed, it's gonna be shown along with the HTML marker right here. I don't know if they have some script examples here. But you'll see how it looks like when we gonna write our own access files. And that's the tool for the script a very simple way to attach JavaScript code to your rendered elements in the style guide. Now I think I've covered all the basics of nucleus. It's time to start working on some more complex SAS files but before we can do that we need to install nucleus. That's gonna happen in the next lesson.

Back to the top