Backdrop has a new basic theme called, unsurprisingly, Basis, and I have been trying it out with, in my view, some considerable success. It produces excellent results 'out of the box' but, more importantly to me, it provides a very satisfactory foundation for producing a customised theme that gives a distinctive appearance to a website.
I have recently used Basis for a new website www.jarsofclayceramics.co.uk, using Backdrop to replace an ageing Wordpress site. I recommended Backdrop to my client because it enables her to enter and edit content easily into a customised and responsive layout provided by tailoring Basis.
One of the main aims of the new website was to make it fully responsive and for the design I had in mind this presented two specific problems. First I wanted to be able to include an illustrative photo in the top right of each page on wider screens and at the top of narrow mobile phone displays. Second, I wanted a submenu that would appear in the left-hand column on wider screens and above rather than after the main content on the narrow screen of a mobile phone. The theme Basis uses Flexbox extensions of CSS, making it far easier to manipulate the divisions or sections of an HTML document delineated by the <div> tags. Basis also provides well structured CSS files that make it easier to modify or extend, though I usually add a custom CSS file that overrides the existing CSS where necessary.
The images for the top-right of pages are added by means of a set of custom blocks added to the header region of the layouts. Thus the header region contains blocks for the site name (an image), the subtitle (an image and text), the main navigation menu and one of a set of additional custom blocks. By using the appropriate visibility conditions for each of these custom blocks a different image is assigned to each page and by listing these custom blocks before the other three in the header region layout the image will be displayed at the top of the page. The CSS for this custom block is then set using the screen-width breakpoints so that for the wider screens it set to 'float right' and for the narrower it is 'float left'.
The positioning of the sub-menu in the two-column layout is achieved by using the 'order' property of Flexbox CSS, again using the screen-width break points to set the order differently for the narrowest screen widths.
In the particular case of the home page, an image sequence is used at the top-right of the page in order to add to the visual interest. This sequence is provided by the Javascript 'cycle' script used within the contributed module Views Slideshow.
Other specialist contributed modules in use are Expander to expand and collapse text of fields on the 'how it works' page, and Invisimail which attempts to thwart spam-bots by encoding any email addresses.
The home page also includes in a custom block a Facebook plugin within an iframe in order to display the most recent entries on the company's Facebook page.
Having achieved this result and discovered how to exploit the flexibility of Backdrop, Basis and Flexbox, I am a delighted and convinced adopter of this technology.