RevolveR CMF interface and layout standart

RevolveR Code style

Introduction in View Port Units based interface

With the advent of range of display sizes for different device types become a time when designers can't use fixed layouts. Typicaly technique for creation adaptive and responsive designs is a CSS media queries future. Designer of layout makes the ladder of exceptions for different screen sizes but can't provide for the inevitable increase in screen resolution.

View Port Units is new solution get rid of the problem with different design look in a range of devices with the proportions intact. Flexible design means designers not use fixed grid layouts and exceptions for different resolutions of screen.

Now not needed to create special version of web-site for mobile devices and web-design with modern futures is more closer to real interfaces.

Units

For now all layout design metric units we use later is not possible because all of it static. CSS View Port Units allow to save proportions with screen size to design look.

Defining initial scale

First layout designer need to know is how to define initial scale. Simple place meta in head section of HTML document.



					<meta name="viewport" content="initial-scale=1, maximum-scale=1" />

				

It makes standart scale for all devices and prevents interface zoom for touch screens.

Scale factor

Because some interface details need to be larger on mobile touch screens we need enlarge it. Lets define scale factor for it.



					:root {

						--scale-factor: 1;

					}

				

This code need to be placed in CSS file. Base scale factor is 1 and have no any effect.

Modifing this multiplier when mobile device detected is a fastest way to scale some CSS properties.

Example from RevolveR front-end Core.



					// Mobile support
					if( RR.isM ) {

						RR.addClass('html, #RevolverRoot', 'revolver__mobile-friendly');

						RR.new('style', 'head', 'in', {

							html: ':root { --scale-factor: 3; }',

							attr: {

								'media': 'all',

							}

						});

					}

				

This future works when RevolveR front-end library launched and not needed aditional steps.

Apply scale

Because previously steps allows to detect mobile device and add class for HTML elements not a problem to apply modifier to some CSS properties of HTML elements.



					.revolver__exchange-rates span {

						font: normal .7vw Verdana;
						position: relative;
						top: -.2vw;

					}

					.revolver__mobile-friendly .revolver__exchange-rates span {

						font-size: calc(.4vw * var(--scale-factor));

					}

				

In this example main font size for span element is .7vw and it's perfect scales on desktop screens with different resolutions saving proportions. Also it works when user resize brwoser window.

When mobile device detected interface switches font-size with formula [ font-size * 3 ]. Then interface look can be scaled by manupulating with --scale-factor variable. It helpfull for changing interface design look for small smartphones and large tablet devices.

Transform static CSS units to flexible view port units

To understand how view port units work provided transforming formulas in code below.



					RR = {

						// Returns metrics and value of given CSS propertie
						numberCSS: (v) => {

							let u = [

								'Q',
								'q',
								'cap',
								'ch',
								'ic',
								'lh',
								'rlh',
								'px',
								'ex',
								'em',
								'%',
								'in',
								'cm',
								'mm',
								'pt',
								'pc',
								'deg',
								'vmax',
								'vmin',
								'vh',
								'vw',
								'vi',
								'vb',
								'rem',
								'ch',
								'rad',
								'grad',
								'turn',
								'dppx',
								'x',
								'dpcm',
								'dpi',
								'khz',
								'hz',
								's',
								'ms'

							];

							let c = 0;

							for( let i of u ) {

								if( v.includes(i) ) {

									if( [ 'q', 'Q' ].includes(i) ) {

										return [ (100 * (+v.replace(i, '')) * .945) / self.innerWidth, 'vw' ]; // q(*.945px) to vw

									}

									if( i === 'in' ) {

										return [ (100 * (+v.replace(i, '')) * 96) / self.innerWidth, 'vw' ]; // in(*96px) to vw

									}

									if( i === 'cm' ) {

										return [ (100 * (+v.replace(i, '')) * 37.795) / self.innerWidth, 'vw' ]; // cm(*37.795px) to vw

									}

									if( i === 'mm' ) {

										return [ (100 * (+v.replace(i, '')) * 377.95) / self.innerWidth, 'vw' ]; // mm(*377.95px) to vw

									}

									if( i === 'pt' ) {

										return [ (100 * (+v.replace(i, '')) * 1.333) / self.innerWidth, 'vw' ]; // pt(*1.333px) to vw

									}

									if( [ 'em', 'rem', 'pc' ].includes(i) ) {

										return [ (100 * (+v.replace(i, '')) * 15.94) / self.innerWidth, 'vw' ]; // pc\em\rem (*16px) to vw

									}

									if( i === 'px' ) {

										return [ (100 * +v.replace(i, '')) / self.innerWidth, 'vw' ]; // px to vw

									}

									return [ +v.replace(i, ''), i ];

								}
								else {

									if( c++ === 35 ) {

										if( i === 'px' ) {

											return [ (100 * (v - 0)) / self.innerWidth, 'vw' ]; // px to vw

										}

										return [ v - 0, null ];

									}

								}

							}

						},


					};

				

This method from RevolveR front-end core modify most of static CSS metric units to view port width (vw). Because of view port units always related to current window width and height it's flexible to any screen resolution.

Layout standart

Choosen standarts is HTML5 and CSS4 with SMACCS layout design rules.

Classes prefixes

All CSS classes of HTML elements and form input elements attribute name must have prefix revolver__.

CSS files formating

Front-end developer must rebound CSS rules by group related to root element.



					.revolver__order-summary {

						list-style: square;
						margin: 1vw 1.6vw;
						padding: 0;

					}

						.revolver__order-summary li {

							color: var(--search-results-title) !important;
							border-bottom: .1vw dashed #999;
							margin: 0 0 .4vw;

						}

							.revolver__order-summary li span {

								text-shadow: 0 0 .1vw var(--terminal-text-color);
								color: var(--related-link-hover);
								font-weight: bold;
								float: right;

							}

				

Rules block must be separated by new lines and sorted by rule length descending. Use tabs instead of spaces.

All CSS code exposed by RevolveR CMF back-end build future that compress and optimize files.

Color rules

Use only modern HEX colors with alpha chanel.



					.revolver__scalable-main .revolver__store-goods-cover figure {

						...

						background: repeating-linear-gradient(45deg, transparent, transparent .1vw, #ffffff45 .1vw, #b7754594 .25vw), linear-gradient(to bottom, #eeeeee5c, #bfbfbf1a);

						...

					}

				

Graphics

Use only SVG graphics, PNG and WEBP for design elements.

UI\UX elements design

Base styles predefined for most of UI\UX design elements and layout improved by back-end API HTML code generators. Use it to apply development speed, code quality and scalability. Developers can modify design look by adding author layout and color schemas creating own templates and connecting own CSS files.

Semantics

HTML layout of RevolveR CMF uses HTML 5 microdata design to improve SEO and semantics. Most of this futures integrated in back-end template system for a range of situations and compatible with search engines.