Modifying with SASS

Modifying Ueyen is easy! Download the source files to get started.

Control Panel
Add a new selector (Extend maps)
Extending with SASS/CSS

Control Panel

You can override any variable in the file control-panel.scss and change the look of Ueyen.

The control-panel.scss is located at the root directory of the source file folder.

When updating your Ueyen source files, keep the control-panel.scss file that you have modified and replace it in the newer version. The control-panel.scss has backward compatibility

How to work with the Control Panel

All the available variables are in the Control Panel for easy finding, but they are all commented. Uncomment the variables and type your entry for the variables.

Example of using Control Panel

The default breakpoint-small is set to 700px, but in this example, we uncommented the $breakpoint-small variable inside control-panel.scss and entered our own value 800px.


        
// --------------------- Ｂｒｅａｋｐｏｉｎｔｓ
$breakpoint-small: 800px; 
// $breakpoint-medium:
// $breakpoint-large:
// $breakpoint-huge:

Add a new selector (Extend maps)

Let's imagine we want to add a new selector named un-h-half to the height selectors, that defines half the page's height (50vh), you can easily add it in the Extending maps section of the Control Panel.

Simply take these steps:

Locate associated extend-map for height in Control Panel $height-map-extend:().
Uncomment the extend map.
Add your indicator and value.

    
$height-map-extend:(
    half: 50vh
);

Now, you can easily assign the class un-h-half to an element and it will have the height of 50vh (half the viewport's height). And the beauty of it is that you also have access to it's breakpoint selectors as well:

un-h-half:s

50vh in screens larger than breakpoint small

un-h-half:m

50vh in screens larger than breakpoint medium

un-h-half:l

50vh in screens larger than breakpoint large

un-h-half:h

50vh in screens larger than breakpoint huge

Do not to repeat the existing selectors in the map overrides, in case you wish to change an existing selector, change the associated variable in Control Panel, instead of using an extend map.

Extending with SASS/CSS

Add any any additional CSS/SASS to Ueyen by placing it in the extend.scss.

Example of extending a selector

Give a shadow to all the buttons by adding the following code to extend.scss.


        
.un-bu:not(._link):not(._outline) {
    box-shadow: 3px 2px 7px rgba(0, 0, 0, 0.23);
}