This year we took some time to think about what makes a good foundational theme for LemonStand. We believe in standards and choice, so we upgraded our base eCommerce theme for developers to showcase the tools we see our customers finding the most success with, along with adding a few patterns that we think result in the best retail experiences.

What is Bones?

Bones is an open-source base eCommerce theme for developers that will give your new store project structure. It isn’t designed to be beautiful out of the box, it’s a base for you to fork and build your beautiful brand upon, which provides our suggestions for how to organize your theme code, as well as patterns for better store usability using LemonStand.

Bones has a bunch of handy new tech things, including:

  • A full set of templates and partials carefully designed using Foundation (Twig, semantic HTML5, Sass, jQuery, etc.)
  • Build scripts (Gulp, Babel, Webpack)
  • Example theme configuration (a theme manifest and LemonSync-JS config)
  • FontAwesome (for icons)
  • Google Fonts
  • ImageMin for optimizing your images
  • Linting and script minification

The theme itself includes support for most core LemonStand features, including:

  • Rich home page with hero and carousel
  • A full product catalog with all of our product features
  • All product metadata, extras, attributes, and SEO features
  • Subscribe-and-save (on the product pages)
  • Subscription management tools for your customers
  • A tonne of theme options and examples of how to use them
  • A full blog and blog feed
  • And our full featured checkout, including support for all of our 95+ payment gateways, subscription management, and more!

The Foundation behind Bones

Bones 2 uses Foundation 6, a responsive front end framework. There are hundreds of great web toolkits, but we find Foundation a good balance of features and complexity, perfect for building fast, featureful stores with. It’s responsive, accessible, and full of useful widgets and patterns. It uses Saas for CSS and jQuery for wrangling the DOM.

One of the most exciting features in Foundation 6 is support for flexbox, in addition to legacy grid tools. Using grids for store layouts makes supporting various mobile sizes a breeze. We love flexbox and grid layouts in general, so it was a perfect fit.

Related posts:  LemonStand Certified for Avalara’s Sales Tax Automation Solution

Foundation also provides tools for typography, animation, media queries, common controls, and forms. It even includes a set of plugins for some of the harder problems, like sticky headers (used in Bones), smooth scrolling, equalized column heights (handy for showing product cards), and a featureful form validator.

We think you’ll enjoy Bones’ use of the new Foundation too.

Getting set up

Bones is an eCommerce theme for developers, so to get started open up your terminal and clone the theme repository from Github. If you want, you can even fork it first, and clone your own copy of Bones (with a fork of it, you can keep up to date when we make improvements).

After you install the theme, you will need to run the installer and build scripts to start working with Bones.

A BONES INSTALL CHEAT SHEET:

# 1. Grab a copy of Bones2 and name it after your store (or whatever you want)

🍋 git clone git@github.com:lemonstand/lscloud-theme-bones.git my-lemony-narwhal.store

# 2. Navigate into your new theme folder

🍋 cd my-lemony-narwhal.store/

# 3. Install the required 3rd party libraries

🍋 npm install

# 4. Build the theme resources

🍋 npm run build

# 5. Want to watch + continuously build resources while

# developing? We've got you covered

🍋 npm run build:watch

# 6. Ready to build an optimised version of your site?

🍋 npm run build:production

# You’re done!

Bones is a full featured eCommerce theme for developers that is a clean foundation for your store. It’s based on some of the best tools for website development, and some of the best patterns for selling things online.



Figure: Desktop and mobile default layouts

Check out the new Bones eCommerce theme for developers:

Star ⭐ it, fork it, and give it a try!

And if you want to see our other available free, open-source and mobile responsive themes, you can check them all out here.