⬆️ ⬇️

How we designed themes for Mail

In the summer of 2011, we introduced Mail.Ru Mail. The interface has changed not only visually, but has been completely redone in technical terms, which greatly accelerated its speed and convenience. But it was also necessary to implement a very desirable feature for users - interface themes. I want to tell about how we introduced topics in the Post in this post.







Just a week before, we completed the translation of the main BEM pages ( http://bem.github.com/bem-method/pages/beginning/beginning.ru.html ). It was decided to do thematic mail customization only on CSS. But pure CSS is not enough, we need a tool for generating CSS - and we chose SASS ( http://sass-lang.com/ ).



As I wrote above, by the time we started making topics on the Post, the main pages were already translated into independent blocks.

')

/css /blocks /messages ... /pages main.css 




The plus we got right away is the lack of cascadability. If you repaint a block, you repaint only this block, it doesn't shoot anything anywhere and doesn't explode.



The theme is pictures on the background as well as colors (font, background, border ...). We took block by block and took out the whole color part separately.



 /css /blocks /messages //   /themes /default /messages //     default.scss //      default.vars.scss //     /theme theme.scss //     theme.vars.scss // “”   /pages … 




Naturally, we needed an assembly system. SASS approached. It allows you to collect scss in one large css-file plus allows you to use variables.



The styling of one of the blocks is constructed as follows:



 /css/blocks/messages/messages.scss .messages{ padding:20px; } /css/pages/mail.scss @import url(../messages/messages.scss); /css/themes/default/messages/messages.scss .messages{ background:$messages-background; } /css/blocks/default/default.scss @import url(messages/messages.scss); 




In these style files, all css-property values ​​are variables that are defined in a particular topic.



 /css/themes/theme/theme.vars.scss $messages-background: #FFF; /css/themes/theme/theme.scss @import url(theme.vars.scss); @import url(../default/default.scss); 




After SASS, we get a file with the geometry of all the blocks:



 /css/pages/mail.css 




and files with color design, broken down by topic:



 /css/themes/theme/theme.css; 




The user uploads two files - the geometry and styles of the selected theme.



Switch themes



Because the design is separated from the geometry, there is no need to reload the page to change the design. All you need to do is load asynchronously the styles of the new theme, and then delete the old ones.



To work with themes, a JS-class has been created, the main methods of which we are interested in are setTheme and switchThemeCss.



A callback system for asynchronous work with themes built using deferred.



The setTheme method is an “entry point” for setting a theme. Accepts the id of the theme and returns deferred, which expects two methods to be executed: switchThemeCss (changing the styles of the design) and an AJAX request to save the selected theme. Both of these methods also work with deferred.



 return $.when(AJAX.post(...), switchThemeCss(themeId)); 




The most interesting thing happens inside switchThemeCss. Based on the passed themeId, the function builds the path to the style file and tries to load it.



At this point, the project already used a plugin for loading jquery.getCSS styles, and we decided to use it. But, unfortunately, it doesn’t allow us to determine if the styles really loaded, or the request “fell off” by timeout due to the lack of a network connection, which is very important for us, because deleting the styles of the old theme is necessary only after successfully applying the styles of the new one.



We solved this problem with the help of many, probably well-known, but successfully forgotten methods, which consist in the following.



A hidden block is added to the page, onto which styles unique for each theme are “hung”. After downloading the file of styles, we check if the styles of the hidden block have changed, and if they have changed, it means that the theme has been successfully loaded.



In our case, 100% uniqueness has a theme id. But this id has nothing to do with the possible values ​​of CSS properties, which means that, in general, styles will not be applied.



We needed some property, the value of which can be an arbitrary string. The content and font-family properties are suitable for this, but with some reservations.



Some browsers do not apply the content property to the non-pseudo-elements for which it is intended. But others do not use the font-family property if such a family does not exist in reality, but at the same time apply the content property. We decided to use both properties, and in browsers that return the empty value of the content property, look into the font-family property.



The result was approximately the following code (schematically):



 function getApplyedThemeId(){ var ff = hiddenElement.css('font-family'), content = hiddenElement.css('content'); return content || ff; }, function switchThemeCss (themeId){ var url = getThemeCssUrl(themeId) , deferred = newDeferred(); var oldThemeId = getApplyedThemeId(); //   themeId $.getCSS( url, function(link){ var newThemeId =getApplyedThemeId(); //   themeId //  id   –   if (newThemeId !== oldThemeId){ $ThemeCSS.remove(); //    $ThemeCSS = $(link); //   deferred.resolve(); //   } else { //   -    $(link).remove(); //  link    deferred.reject(); //  “ ” } } ); } 




As a result, we got themes that are easy to maintain. In addition, their download is easy to manage, and the download code can be used with any interface solution to select topics on any page.



The technical implementation, the creation of 12 topics, debugging and production release took 2 months of work by one person.



Finally - fun statistics about the most popular topics:



Zombies are set mostly by boys 12-25. And this is the favorite topic of the Mail.ru Mail team :)





The game of snowballs keeps leadership in the segment about winter, at the moment it has already been established by more than 300,000 people, 2/3 of whom are women of the fair sex 25-34





The most girly theme Anime (girls 12-17 years old)





The most geeky theme is Blackboard. It can not be turned on from the interface at all! But you can turn on the cheat link http://e.mail.ru/cgi-bin/msglist?folder=0&setTheme=t1026



Simons Kat - themes for young women 25-34





PS: Opening the veil of secrecy - in the near future the first two topics will be released for fans of the games Allods and Legend.



Andrey Sumin,

client development manager

Source: https://habr.com/ru/post/137552/



All Articles