hex-framework

Hex is still in development and is NOT production-ready. Some things are more tedious to set up right now, because we're still playing around with a lot of things. Once we release v1, you can expect Hex setup to be at least as simple to set up as any other framework you'd install with npm.

⬢ Hex is a front-end framework from LionsMouth Digital.

Purpose

1. Provide a lightweight starting point for front-end development.
   As does any framework, Hex aims to save time by supplying common components. However, we don't want Hex's default appearance to do too much. If you can look at a site and see Hex in its soul, we've got work to do.
2. Avoid div soup.
   We don't like the verbosity of markup from some other frameworks we've used in the past and intend to keep markup lean.

Getting started

Sass

1. npm install hex-framework
2. Configure the :load_paths option to include node_modules. The option in node-sass is called includePaths.
3. Set up your main Sass file:

   • Duplicate node_modules/hex-framework/sass/utils/_variables.scss into your Sass folder as utils/_hex-vars.scss, and update values for your project.

   • Add this to your main Sass file:

     @import 'hex-framework/src/scss/utils/functions';
     @import 'utils/hex-vars';
     @import 'hex-framework/src/scss/hex';

     Importing your own copy of the variables file before Hex allows you to configure only the variables you want. You could delete whatever you leave at the default setting, but we like to keep it in there so we don't have to hunt for a variable name if we decide to change something.

     The variables file uses functions, so that needs to be included first.

License

CC BY-SA 4.0