Our default responsive base template came out in 2015 and it's served many sites well.
We've kept it up to date and built many responsive sites from it, but it's 2019 & finally time for a fresh new start point for site builds.
Introducing the Rivendell template:
https://github.com/ReallyEasyCart/rivendell
Rivendell is a responsive template, built off the back of responsive-base. It has a number of improvements over the old default but best of all it's embraced Open Source, like we have done with many open source projects contributing back into the community.
The main benefit of making this new default template open is that as a designer, you can help shape the default template.
Have something you always include or change on your REC projects and think it'd be great to add in to the default? You can now open an issue to suggest it or jump in and show us the code to add it with a pull request!
Our project page up on GitHub has a full list of awesome improvements with a few highlights including full SCSS support and default structure, along with new simpler header & footer layouts.
Speaking of new layouts, Rivendell also comes with the Rivendell Builder!
The builder offers many different default header & footer templates & is available via the REC Design Hub along with many other fantastic resources to help out. Both the builder & the design hub are also fully open source so feel free to add more designs to the builder and help improve the design hub with better resources to help others getting started or share awesome tools you've found to help you develop sites.
All new sites now come with Rivendell by default & any community changes made on the GitHub project will be installed on new sites too, and we now link to the builder from inside the REC+ Admin > Template system to help access it faster.
While building Rivendell, we built a couple more sites to try it out. Coopers Driving School & OTB (releasing soon). Here's a quick run through to help you get started:
Getting started with Rivendell.
When you load up your new REC+ site you'll notice the new default green color for Rivendell along with the newer header & footer design.
It's worth noting here that Rivendell uses Sass/SCSS by default instead of CSS. SCSS is just like CSS but also adds the ability to import other files, nest css, create and use variables and more. Learn more about SCSS here.
Rather than using the REC+ Admin > Edit Colours area, we've provided a SCSS file which sets up the variables you need to customise the template.
In the /scss/vars.scss file you can add your own SCSS variables to manage different colors, fonts, images etc that you want to reuse around the scss.
You'll find that new default green color and other styles in this file ready for you to change to the brand colours of your new site.
The first thing to do with any REC+ site is setup your project locally in your code editor and pull down the files via FTP.
(I also advise the use of a version control system such as git here to keep track of changes you make while coding)
If you use VSCode (a free code editor from Microsoft) there's an example ftp config file provided in the repo that you can move to the top level of the templates. Find out more about this here and using it with LiveReload if you're interested.
Once setup, you can optionally picking a default header & footer design you'd like to start with from the Rivendell Builder or dive right into the code yourself.
If you choose designs from the builder, select the designs on the left you want to start from, and to the right it'll give you intructions & links to the html and scss needed to build it.
Aside from the headers & footer, Rivendell provides a bunch of default html & scss files to help you get started, check out our GitHub repo for a tree of the files we include with reasons for each listed.
That's all from us for now, but feel free to reach out if you have any questions about using Rivendell on a new site design or if you're interested in using it to build a new design for an existing site.
