Tasteful WordPress development
Vanilla is a WordPress framework by Nevma. It contains a skeleton theme, called VforVanilla and comes along with a responsive, mobile first, CSS + JS framework, which is called Responsiville. It is meant to be used as a general scaffold, not as a generic fit-for-all theme, helpful in the process building WordPress websites and applications. It contains a useful set of pre-installed and pre-setup plugins that cover most common needs. It also provides some default content which showcases its capabilities.
Downloads:
VforVanilla Vanilla Responsiville
These are the main Vanilla components:
Vanilla API/documentation can be found here:
Vanilla docs Vanilla demo Changelog
Responsiville API/documentation can be found here here:
Responsiville docs Responsiville demo Changelog
27/08/2018
Vanilla theme is now based on the concept of layouts. Layouts are ACF based user inteface and content components which are used to build up a website. The idea of layouts is fundamental to Vanilla from now on. However, the layouts are not coupled with the framework, they are declared only on the theme level so that they can be overriden by the theme developer at will.
27/08/2018
Responsiville version 1.4 sports a set of new modules like a Responsive Element, a Lazy Image loading component and a Parallax Element. Lots and lots of bug fixes and minor enhancements have been made as well. The popup element is still under development.
12/06/2017
In Responsiville's version 1.3 a lot of minor changes have been made to make the framework more stable and reliable. The framework is backwards compatible and its data attribute mechanism is working smoothly.
A new Responsiville Parallax element has been added, which helps create what has come to be known as "parallax effects". These effects happen as the user scrolls down the web page. A special element is "watched" as it enters the viewport, scrolls down the viewport and finally becomes invisible again. During its passage through the viewport this element or another element or set of elements may change certain CSS properties of theirs in order to create an eye-catching visual effect.
Also a Responsiville Popup element is under way.
01/01/2017
Responsiville version 1.2 is out. The documentation is totally revamped, the event system is complete and all the Responsiville modules are using it. You are encouraged to do so yourself. The Vanilla initialisation process has become simpler and automatic by default. Al the scripts, styles and settings flags are declared in config.php.
// Acquire the Responsiville singleton instance.
var responsiville = Responsiville.Main.getInstance();
// Do something when the framework has initialised.
responsiville.on( 'init', function () {
// The "this" scope refers to the responsiville instance.
console.dir( 'The Responsiville framework has initialised' );
});
// Do something when the current breakpoint changes.
responsiville.on( 'change', function () {
// The "this" scope refers to the responsiville instance.
console.dir( 'The breakpoint has changed to => ' + this.currentBreakpoint.name );
});
// Do something when the tablet breakpoint is entered.
responsiville.on( 'enter.tablet', function () {
// The "this" scope refers to the responsiville instance.
console.dir( 'The breakpoint has changed to tablet' );
});
// Do something when the tablet breakpoint is left.
responsiville.on( 'leave.tablet', function () {
// The "this" scope refers to the responsiville instance.
console.dir( 'The breakpoint is not tablet any more' );
});
14/05/2016
In Responsiville and Vanilla we utilize some modern, somewhat edgy, web techniques, but only when we are certain that the browsers which we target do support them (or when we have a solid shim to work around them). These techniques are:
A new -back in the day- way to define an element's dimensions so that its paddings and borders are included -and not added- to its width and height, if they have a set height. Very useful for responsive grid building.
A modern programmatic way to define values for CSS rules. CSS variables can be defined on an element and then re-defined and cascaded down to its descendant elements and be re-used on them. Currently Internet Explorer, mobile Safari and Android native browser do not support them, but we have developed a shim to use them when they are defined on the root element (HTML).
Viewport units (viewport width and viewport height) are a new way to measure dimensions in CSS and refer to the browser viewport, ranging from 0 to 100 (100 meaning 100% of the viewport width or height). All browsers we target now support them.
Dynamic, calculated values for CSS rules. All browsers we target nowadays do support them. One can also include CSS variables inside "calc" (which we support with a shim, as mentioned above).
An ES5 enhancement to the Javascript Function prototype that allows a function to be bound - and run in the scope of - any object the developer chooses. This way object oriented Javascript programming becomes a lot more accessible.
12/05/2016
CSS variables are a fine new concept in CSS. It allows developers to declare -and redeclare in the usual "cascade" manner- variables that can be re-used. All major browsers support them apart from Internet Explorer, mobile Safari and the native Android browser. We have developed a shim which redeclares all CSS rules found on a page, which use CSS variables, but with their actual values, ie the effective values that the CSS variables have. In order to achieve this we utilise the CSSUtilities library which reads and parses the CSS stylesheets on a web page.
There's one catch: you have to declare these CSS variables on the root element of the web page, that is the HTML element. We need this convention for the time being for simplicity. Other than that, feel free to use CSS variables right here right now!
html {
--grid-gutter: 3rem;
}
html.small {
--grid-gutter: 1rem;
}
.column {
padding: 0 var(--grid-gutter);
}
Note: using our CSS variables shim comes to no conflict with CSS preprocessors, because it functions on the browser level, after the actual CSS has been delivered to the client and been applied to the web page.
05/03/2016
As we have mentioned before, Responsiville and, therefore, Vanilla use Javascript a lot. In order to achieve this we rely on certain base Javascript libraries, which are useful, common and widely accepted. These libraries are:
Update:
28/02/2016
Grids are a great way to tackle the layout issues of responsive web design. Modern CSS layout techniques like flexbox and grid layout will make this even more comfortable, when their adoption becomes wider and standard. The one single issue that is a lot more difficult to understand and provide solutions for, regardless of the grid itself, is behaviour and the way it changes from desktop to mobile and vice versa. With "behaviour" we mean both user and device behaviour, we mean user-device interaction.
For instance, one might have a beautiful drop down menu in desktop mode, which is activated when the user hovers their mouse over it. However this hover action is not available in mobile devices because, well, there is no mouse, there is no cursor to hover over anything. There are only touch events. This simple differentiation causes the need for all UI elements to simultaneously provide solutions for both worlds. The most common, the one that everybody has come to recognise -no judgmenet here- is the burger menu. Like it or not, it is a solid way of providing a useful differentiated behaviour between desktop and mobile without having to invent one's markup twice.
28/02/2016
CSS variables is one of the sweetest things that happened to the CSS standard lately. It narrows the gap between native CSS and the preprocessors (like LESS, SASS, Stylus). Browser support is excellent in Firefox and Chrome but it needs to get better in mobile browsers (and IE). Vanilla is now making heavy use of CSS variables in order to flexibly set the typographic properties of a web page, the way the typography scales up and down, the vertical typographic rhythm of text, the grid gutters and the vertical rhythm of the grid. Our vision is to be able to quickly set up the main properties of a Vanilla-based theme via CSS variables.
For instance the grid gutters are defined internally like this resonsiville.moressete.css:
[class*="column"] {
float : left;
width : 100%;
min-height: 1px;
padding : 0 3rem;
padding : 0 var(--grid-gutter);
}
[class*="column"] .row {
margin: 0 -3rem;
margin: 0 calc(-1 * var(--grid-gutter));
}
Default values are provided for browsers that do not support CSS variables.
Then, in style.init.css one simply has to set the relevant CSS variables to their desired values for each breakpoint they need to differentiate:
.tablet {
--font-scale : 1.125;
--base-font-size : 1.5rem;
--text-line-height: 1.6;
--text-rhythm : 3rem;
--grid-gutter : 2rem;
}
15/02/2016
The Responsiville framework relies on Javascript so that the developer does not need to write CSS media queries in order to provide responsive behaviour. Of course they still can use them as they like, but it is not necessary. In everyday development the responsive breakpoints are replaced by classes on the HTML element, which are set via Javascript upon the window resize event. This way, responsive design becomes more semantic and breakpoints are easier to remember.
13/02/2016
Responsiville and, therefore, Vanilla makes extensive usage of CSS rems. They provide an easy way to scale one's design. Read more about rems here. Our preferred way of setting the base font for HTML is 10px instead of 62.5%, which makes the assumption that the browser default font size is 16px (62.5% x 16px = 10px). Both methods are correct, but setting a straight 10px values seems cleaner to begin with.
13/02/2016
Default Responsiville breakpoints are (in pixels):
| breakpoint | from | up-to | real-screens | comments |
| small | 0 | 320 | 320 | still quite some mobile devices here |
| mobile | 321 | 599 | 360
480 |
360px is the most common mobile device width nowadays, some 480px devices exist, but at 600px tablet sizes begin |
| tablet | 600 | 1023 | 600
768 800 |
common device sizes are 600px, 768px is for iPad portrait, some 800px devices do exist, we do not include the 1024px iPad landscape here, so that we can style it separately |
| laptop | 1024 | 1279 | 1024 | some small, old laptops, but mainly the iPad landscape, desktop wide sizes practiacally begin here |
| desktop | 1280 | 1439 | 1280
1366 |
actual desktop and laptop screens start here, older Macbook Pro, etc, this is where we mostly target nowadays for desktop |
| large | 1440 | 1679 | 1440 | large desktop screens, older Macbook Pro |
| xlarge | 1680 | ∞ | 1680
1920 |
mostly Macbook Pro at 1680px, very large desktop screens, usually at 1920px, also iMac and Dell at 2560px |
Remember: breakpoints are not real device widths, they are the points where one's layout shifts to adapt to a new potential device width. For instance between 0 and 320px the most common device width is 320px. Also, between 321px and 600px the most common device width is 360px. You usually care mostly from the mobile up to the laptop breakpoints and the rest will adapt easily, as they refer to desktop screen sizes.
Based on mydevice.io and screensiz.es.
13/02/2016
The 1024px width is currently useful only in iPads in landscape orientation. Up until recently we did have laptops of 1024px width but not any more. Nowadays laptops start form 1280px. So, what should the Responsiville framework call the breakpoint at 1024 pixels. Is it a tablet or a laptop? On the one hand, talking about devices, it's only meaningful to talk about tablets of that dimension. At this dimension the user does not have a mouse, they can only tap on the screen, not hover, etc. On the other hand this dimension is big enough to allow us to show the content in almost the same way we would in a desktop device, ie have a full menu, not a burger one, etc.
So, we need two different ways to distunguish devices. One is according to their dimensions and another one is according to their capabilities, or whether they are a mobile or a desktop device. In that respect the iPad in landscape orientation is indeed a mobile device but with a "desktop" dimension. So the Responsiville framework will call this breakpoint "laptop", because it is big enough to show content as a desktop device, but it will make sure that the the Responsiville.Main.isDevice() method will return true for it.
11/02/2016
We have vanilla flavours! More than one actually...