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

  • Overview
  • Transcript

2.2 Nuclides, Atoms, Molecules, and Structures

Nuclides, atoms, molecules, and structures. These are what Nucleus uses to structure the style guides it generates. Let’s have a look at each one and see what Atomic CSS is all about.

2.2 Nuclides, Atoms, Molecules, and Structures

Nuclides, atoms, molecules, and structures. These are the four components that Nucleus is using to structure the style guide. Now, let's begin with nuclides. These are either variables or mixes. So I have a test.scss here prepared. And let's go ahead and define a variable that's called Base font size, and we'll set this to 18 pixels. And in your project you might even have color accent, for example. So I'm gonna put this to cyan. And you might also have a mixin, which is the like this. Let's call this radius, right? It receives a parameter. And it's gonna say simply border radius, like this, right? So how exactly would you write, or would you mark, these components for nucleus? Well in the case of the base font size this is a simple variable, right? So we'll give it a description. I like to leave one extra space there, and we're gonna mark it as nuclide. And that's this is the most basic component, right. Nuclides you can think of them as components that don't necessarily show up on their front end, right. That's why I said variables and because these are used to generate style sheets, but that's pretty much it. So, that's a Nuclides now, there are two special types of nuclide, one is color, the other one is mixing. All right so, for this second one, I wanna copy this code, and this, instead of @nuclide I'm gonna say, @color. And a color doesn't really need anymore information. You can write it like this and Nucleus will grab all the information it needs like the variable name, the color information from SAS directly. And of course for mix ins It can put it like this. That's also gonna give this a description, add some color and this will be border or radius mixin. And this of course, you would call it has mixin. Now for mixins, there is another annotation available, and that is example,right. So you can actually put an example of how you would use this mix in. Also make sure when you set an example you leave at least one space here on the left. So, it's indented one space more than the example. Otherwise if you put an include here you'll get an error in the compiler. So you would use this as include radius, right? Or, Include radius(10px). Also if you have parameters for the mix in, you can define them using the per RAM annotation. So ours is called radius and you could give it a description here like the radius of the elements, or the border radius. So this is how you define a Nuclide, either using at Nuclide or using color or mixin now, let's move on to atoms. Atoms are the basic building blocks of a style sheet so for example a button, a form of input, a menu item something that is very simple. And can be defined by using a single selector, an atom would for example would be a button so if you have a class of button. Let's just set a display and line block here, just a dummy style, right? You would define this as atom. You would give it an appropriate description, button. By the way, you can also describe elements using the description annotation, right? Followed by the description but the preferred way is by simply typing as the first line here. In the case of an atom, you can also specify example code, but the annotation is not example, like in the case of mixing, it is a markup. So you would say markup and then under that you would specify an HTML markup showing how to use that button. So for example you would say something like a class equals button. Something basic like this. You can also do multiple lines, simply add another comment line here and you are done. Now a special kind of atom is an icon, you will simply do at icon. That's meant for use when you have an icon font mainly. Now molecules are the next components and they are made up of one or more atoms. For example, a menu can be a molecule because it's made up of many items which are atoms. To declare a molecule let's say here menu, you would simply define it as molecule. Give it a description and you can also use the mark up annotation to set an example for that. Finally we have structures. And these are the most complex elements, because they can be made up of atoms, molecules, and even other structures. A good example of this would be a hero element, which can have a header, which can have headings, and buttons. You can have video embedded in it, images, all that kind of stuff. So it's a very complex element. Now just like molecules, a structure is very easily defined, let's say here, you would add a description and you would mark it as structure. Just like the other elements, you can use the markup annotation to provide a demo html markup. And that covers the basics of the nucleus. Once you understand these four elements, Nuclides, atoms, molecules and structures, it's going to be much easier for you to structure your SAS files. Now, nucleus has some extra bits of functionality, let's call them, that allow you to fine tune that style guide you'll eventually generating. Two of these extra bits are called substitutions and flags and you'll learn about them in the next lesson.

Back to the top