CSS

In Rapido, the CSS is separated into three different projects; Base, Rapido and Ignite. At first this may seem a little messy and unnecessary, but the separation ensures that the parts which should not be messed with are not mixed in with the parts you often work with.

The concept for each of these projects is as follows:

  1. Base contains the styles that will always be needed, such as Normalize, a grid system and extremely basic form styles. This is also the fallback used for default and wireframe design.
  2. Rapido contains the styles defined in Website settings, usually as modifiers on the extremely simple rules from Base.
  3. Ignite is meant as a foundation for making custom designs. The project only contains a framework of empty CSS classes for the implementer to expand.

It is important to note that there is a hierarchy; Rapido can override Base and Ignite can override both Base and Rapido.

All three projects use the Less pre-compiler to make the CSS easier to maintain. The reason for using Less compared to Sass, is that the code footprint is much smaller. And that makes it possible for us to ship Dynamicweb with a server side compiler that compiles the Website settings variables for Rapido.

If CSS was a spoken language, a lot of dialects would exist. This is a huge challenge when working in a team or looking into code written by someone else. Therefore, we must have rules for how we speak the language. In classic programming, these dialects are known as design patterns, and the most well-known of these may be MVC.

The dialect or CSS design pattern we use in Dynamicweb is called BEM, and has been chosen because it has been available for a long time and is still widely popular. Many great sites use it – e.g. bbc.com, whiteaway.dk, mail.ru and Google Material design https://getmdl.io/index.html

BEMs main goal is to construct CSS class-names so they are consistent, isolated, and expressive.

The most basic approach introduced by BEM is that instead of nesting you use Blocks, Elements and Modifiers:

  • Block - a standalone entity which is meaningful on its own, e.g. .header, .container & .menu
  • Element - a part of a block which has no standalone meaning, but is semantically tied to its block, e.g. .menu__item & .menu__link
  • Modifier - a flag on a block or an element, used to change the appearance or behaviour, e.g.  .menu—dropdown & .button--condensed

Instead of using the widely popular approach to make themes for all your different designs, we suggest to use the class “.dw-mod" instead. This makes the CSS much smaller and ensures that no unnecessary styles are loaded, beside the fallback. Furthermore, the ".dw-mod" class also makes it easy for the user to see, the different elements that has been modified by the new class.

Instead of typing up a copy of the official documentation here, go read the rules and set aside time to fully understand them: http://getbem.com/introduction/

For further reading, on working effectively with CSS, you may also like these great articles:

The Base project contains styles that will almost always be needed. Do not modify this project, unless you are creating a custom project where new base classes are needed. If you need modifications, they are easy to create in Custom. The only modifications you may have to do directly in Base is configuring the variables in “abstracts/variables.less”.

Think of Base as the blueprint or wireframe, and Rapido and Custom as the real complete design. This means that if you do a lot of modifications in Ignite, it will still be able to fall back on Base.  

The Base framework is built upon http://bemskel.com/ and translated to Less, with the main difference that Sass Functions is removed and not translated. Base also includes https://necolas.github.io/normalize.css/ to let browser render the content consistently and http://leejordan.github.io/reflex/ to make a cross browser Flexbox grid system available.

The Base project provides you with a great grid system, which is available as long as you include Base.css.

The system we use is a mildly modified version of a framework called Reflex. Reflex is much like Bootstraps row + col system, with the huge difference that it uses Flexbox with a fallback to older browsers. The result is much more aligned and much more flexible content.

Basically it looks like this:

<div class=”grid”> <div class=”grid-col-12”></div> </div>

To learn more, and know how to use all the features, check out: http://leejordan.github.io/reflex/docs/

As you may already know, a really great CSS grid system for all browsers, even older versions of Internet Explorer, does not exist. The reason we use Reflex is that it gives os the advantages of using CSS flexbox, while providing fall backs for older browsers.

Reflex is certainly not perfect. When a better system become available, even for the folks who use Internet explorer or mobile Safari, we may change it. There is a few very important obstacles you should know about, while working with Reflex.

  1. Floating content right or left, using u-pull—right and u-pull—left, inside a column requires that the content is inside a div with the “grid__cell” class.
  2. The spacing between columns is defined by a padding on each column block (“grid__col-X”). When creating grids within grids, you must consider “hacking” this padding, to make everything align correctly. A quite irritating design on how this grid system works. But there is a fix. Often you simply put the class “grid__col—bleed-x” or “grid__bleed-y” on the columns, this will solve it in most circumstances. If that does not work, Rapido also has the class “paragraph-container__grid--bleed”. This removes the padding on each side of the column, and may be used inside a paragraph.

In addition to the grid system, Base contains a number of layout containers which can be used to frame and group content with.

  • The .site container contains the whole site. This makes it possible to e.g. define a background image or color on a non-full-width site.
  • The .page container contains the page
  • The .center container frames all the content which is considered to be centered if the site width is not set to 100%. In short, it is used to make the page 1000px while there is still content that stretches to both sides. It can be used in both the header, the main area, and in the footer.
  • The .paragraph container holds a single paragraph

Rapido is born with a set of website settings which can be selected in the administration, and the Rapido project contains the matching styles, usually as modifiers on the extremely simple rules from Base.

The heart of Rapido’s configurable design is that these Website settings are compiled to Less variables and then the Less files are further compiled down to perfect, clean and minified CSS.

This means that the Rapido project is perfect for those projects which require relatively few changes to a standard combination of website settings – and you should have plenty of settings to choose from, so it will be easy to create great designs for your projects.

Another use for Rapido is to make some really quick styles, and then customize them in Ignite. If you do that, we strongly suggest you remove the style-related Website settings when you are done, so no confusion is created when they don’t work as usual.

If you find the styles and website settings supplied by us too limited, it is very simple to create your own custom versions of Rapido. The only drawback is that you lose the ability to upgrade to future versions of Rapido.

The Less project which generates the rapido.min.css file can be found in /Templates/Designs/Rapido/css/Rapido:

  • The folder “abstracts” contains a file named _variables.auto.less - this is an auto-generated file containing all the variables from Website settings. The file must not be modified. But in here you can find all available properties, and then use them to generate styles for Rapido.
  • Most of these styles you will find in the folder “layout”. Here mixins are used as conditionals and generates the style chosen in Website settings. 
  • The styles may override those defined in Base. If you do not use the Website settings created from Rapido, you may remove this project completely.

Rapido comes with a list of predefined settings for configuring the design. The focus is mainly on colors and fonts. A lot of work has gone into optimizing the general user experience, and that covers a lot of the other design decisions as well - especially regarding Ecommerce.

When you save the Website settings, all variables are automatically created as Less variables in the Templates/Designs/Rapido/css/rapido/ folder, and the Less files in that folder are compiled to clean, minified CSS.

There are two things you should be aware of when working with Website settings and Less.

  • Dynamicweb does not supply any error handling while compiling the Less files. If the Less files are not compiled, you can trace for errors by test compiling In Visual studio. This is done by installing the Web compiler, and then going to Templates/Designs/Rapido/css/rapido/rapido.less, save and then trace in the Errors list. Remember to select “Build + Intellisense” in the Errors list. https://marketplace.visualstudio.com/items?itemName=MadsKristensen.WebCompiler
  • When Dynamicweb creates the variables in the auto generated file (_variables_NUMBER.auto.less), it attempts to guess which type of variable it should create. In most cases it does a fine job, but there may be circumstances where the result is a string and you need an object/integer. The fix is then to use this syntax ~'@{navigation-casing}'. For an example, see Templates/Designs/Rapido/css/rapido/layout/_navigation.less

Custom page settings are created in the same way as custom Website settings, but only Website settings are compiled to Less.

Page settings could for example be a checkbox to enable left navigation or a breadcrumb menu.

While the existing combination of settings on the paragraph and the paragraph container should make it easy to create modern and configurable designs, it is easy to expand the default options with custom settings.

For instance, if you want to make it possible to set a background color on the paragraph, simply add a color selector field to the Paragraph item type, and then implement the functionality in the Paragraph template.

As it is only the Website settings which are compiled to Less and then CSS, the corresponding CSS should be handles manually. If you need e.g. a preset color to be compiled into CSS for the paragraph, a solution is to simply render a list of saved colors, by name, on the paragraph – see the ParagraphContainer template for an example.

If you want to make custom designs real fast, Ignite is the answer. The goal of Ignite is to put all the custom, single-solution-specific styles in one place. The approach is exactly the same as when you write Less for Rapido.

There are no styles in Ignite, only empty classes ready to use. When Less compiles to CSS the empty classes are excluded. The recommendation is to primarily create mods on existing classes from Base – this ensures, that if mistakes are made there will always be a fallback.

Creating new classes that are not modifiers on existing content should, in most circumstances, not be necessary – but if you want to create a new class the best way to do so is creating a base CSS class and then a modifier class. The base class should be located in Base and the modification in Ignite.

For example, you can create .sticker in Base, and then .sticker.dw-mod in Ignite. In Base you make the basic positions and grey colors that makes the concept available. Then in Ignite you create the variation and colors.

A lot of stuff is available from the start in Base. If you would like to modify those classes, simply create them by adding .dw-mod in the templates where you want them, and then make the modifications via the Ignite less files.

If you use Ignite for your design, we recommend that you either remove the design elements related to the Website settings completely once the design is fully configured, or that you don't use the Rapido styles at all.

This is done so that no confusion may arise when someone later on goes to Website settings and makes adjustments. 

If needed, you may also create your own custom CSS classes in Ignite, and then compile the CSS directly in Visual studio. But if you do that you should be aware that the Wireframe mode only use the Base CSS and therefore won´t show your changes made in Ignite. 

The Less compiler for Visual Studio is available here: https://marketplace.visualstudio.com/items?itemName=MadsKristensen.WebCompiler

If you have any variables that should be used in Ignite, this is the place to put them.

Here you can modify or make the concepts that are meant for globally re-use. A lot of examples can be found in the css/Base/Components folder.

This folder holds the more general classes, primarily for use in the Master template. It is also where the engine for the grid system should be placed. Therefore, if you want another system than the one found in Base, this is where to implement it. 

As Rapido is configurable to the extreme, and our core concept is to have one solution to rule them all, we are not using the elements part of BEM extensively. If we did, by e.g. making the product list item an element, we would have much more CSS to maintain – and this is better handled by using the Grid system and a couple of helpers.

Helpers make it easy to implement small design configurations, and they help keep the overall design very consistent. A helper always has the prefix “u-“(for utility).

To see which helpers are available, simply type “u-“ in Visual Studio – or look in the file Templates/Designs/Rapido/CSS/Base/helpers.less. It contains a collection of generic helper classes – such as the margin and padding helpers which reuse the spacing that the grid and the rest of the CSS classes use.

If you find that the existing helpers and modifiers are not enough to solve a task, you can use the Ignite CSS project to create the exact modification and classes you need.

In the past, JavaScript was the only viable option for toggling design elements on and off. These days, however, most of time you can make do with a simple, hidden checkboxes and a couple of very simple CSS classes.

On Rapido, this is the preferred approach – and the way we have implemented the mobile navigation, expand/collapse content, modals, and dropdowns.

To make this concept even more useful, we’ve created a smart, generic little JavaScript class called RememberState.js, which is used to remember the state of elements such as checkboxes in a cookie.

This means that it’s very easy to have elements such as expandable boxes remember their state the next time a user visits the page. You can also set the checkbox state via an URL parameter, for instance if you want to force a modal to open.

Read more about RememberState.js and the other JavaScript classes in Rapido below.