Mobile first = 0px - 479px Mobile(small)
<%PRINT("$")%>screen-xs-min = 480px -767px Phablet(small)
<%PRINT("$")%>screen-sm-min = 768px - desktop Tablet(medium)
<%PRINT("$")%>screen-md-min = desktop Desktop(Large)

In most cases, use min width when using @media queries. And always think mobile first. Look at the example down below and you see how to structure the @media queries.

.myClass { margin: 0; padding: 0; @media (min-width: <%PRINT("$")%>screen-xs-min) { margin: 10px; } @media (min-width: <%PRINT("$")%>screen-sm-min) { margin: 20px; } @media (min-width: <%PRINT("$")%>screen-md-min) { margin: 25px; padding: 20px; } }

When using images on a responsive site you must think of the retina screens. Otherwise the images can get blurry on retina screens.

To fix so that the images become sharper you need to upload the image in double size.

Let's say you have a image that is 300x300px in mobile. Then you need to upload a image that is 600x600px for double pixel density.

Select 1 Select 2 <input type="button" class="button" value="button"> <input type="text" class="falt" placeholder="falt"/>

This is a H1

Paragraph text here. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

This is a H2

Paragraph text here. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

This is a H3

Paragraph text here. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

This is a H4

Paragraph text here. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

This is a H5

Paragraph text here. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

This is a H6

Paragraph text here. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

<h1>My title</h1> <p>Paragraph text here lorem ipsum dolor sit amet consectetur.</p>

We have two variables in "_rs_variables.scss" that you can change font-size for the shop.

<%PRINT("color: $font-size-base: 10px;")%> // Base font-size for large/medium is 10px = 1rem <%PRINT("color: $font-size-base-small: 11px;")%> //Base font-size for small is 11px = 1 rem

The font-size is set on the "HTML" tag and all elements that has the mixin down below is going to have the font-size changed.

@include font-size(1.4);

This mixin will in this case will print out "font-size: 14px" as a fallback and then "font-size: 1.4rem".

All other elements that doesnt have this mixin will not be affected by the variable "font-size-base".

This is a example of a normal link.

Font icons NEH documentation
Feather icons documentation - most of these should be available. <i class="iconset iconset-search-btm"></i> @include iconset-after("f03a"); @include iconset-before("f03a");

h1 { <%PRINT("color: $color-header;")%> }

To active a different topmenu style in small/medium you can type in "menu-style-1" as class in the layouteditor - header small/medium.

1) Go to the layouteditor and then go to the tab header small/medium. Edit the first vertical block.
2) Add "menu-style-1" in the class box.

If you need to use flexbox you can initialize flexbox grid from our servers and put a href in INC_head.htm to use it.

<!-- Flexbox css --> <link href="/SE_sys/templates/__SYS__/TEMPLATE_CSS/flexbox/flexbox.min.css" rel="stylesheet" type="text/css"/>

Flexboxgrid website

Slick is a responsive carousel jQuery plugin that supports multiple breakpoints, CSS3 transitions, touch events/swiping & much more!

Slick website

The Nivo Slider makes displaying your gallery of images a by using transition effects ranging from slicing and sliding to fading and folding.

Nivo Slider website

A toggle javascript that can be reused where it's needed.

<h3 class="js_toggle-click">Click me</h3> <div class="js_toggle-hide" style="display: none;">Lorem ipsum dolor sit amet, quo diam reque indoctum an, quem sumo magna in vis</div>

A javascript that will show a div in a popup.

<a href="#" onclick="GeneralPopup.simple.open({'loadElemContent':$('.test')});"> Link </a> <div class="test" style="display: none"> This text will be in the popup. </div>

A javascript that will show a file in a popup

<a href="/myfile.html" onclick="GeneralPopup.simple.open({'obj':$(this)}); return false;"> Link </a>