Building a section
In this tutorial we'll be creating a demo using the featured grid section as a primary reference.
Setup
1 – Create the following files
framework/theme/sections/framework--demo.liquid framework/styles/_framework--demo.scss framework/scripts/_framework--demo.coffee
2 – Copy the contents from the 3 files in framework/scaffolding into their respective file types.
3 – If you were running Gulp you'll notice that it isn't uploading these files on save. That's because it indexes the list of files when it starts up. So you'll need to close ctrl+c, copy the framework over gulp copy-framework and reinitialize Gulp gulp.
4 – The main things to rename in the liquid file are the "name" settings in the {% schema %} down the bottom. Change the value from Scaffolding to Demo in this case. There are 2 instances to update.
5 – To link up the CSS open the styles/main.scss file and look for this section
/* PARTIALS //////////////////////////////////////////////////////////////////////////////*/
Then add this as the last item
/* Demo ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/ @import 'framework--demo';
6 – Now you can save those files and should see them upload. Go to your dev store open the theme and on the front page add a section. Then choose the one named Demo.
Settings
Settings along with wireframes should be provided from an Invision link.
There are 3 main sections within the schema tag at the bottom of the liquid file. The first is called settings, which is for all global settings within the section. Secondly you have blocks which are related to the individual items within the section. The third is presets which is used to prepopulate the blocks with onboarding. These presets can also be overridden in the settings_data.json and will only be shown when new sections are added.
HTML/Liquid
To minimize variable manipulation and to avoid creating convoluted code around the html, it's best to declare translations, general variables and onboarding before creating the first opening div tag.
The opening div needs a data attribute called data-section-id and you don't need to change the default value of {{ section.id }}. If the section has Javascript you will need to reference the class name using the data-js-class attribute.
Not all sections have blocks but those that do will need to follow a similar format
{% for block in section.blocks %} {% comment %} Variables {% endcomment %} {% comment %} View {% endcomment %} <div class="scaffolding--item" {{ block.shopify_attributes }}> </div> {% endfor %}
CSS
Depending on which settings are selected different styles will be needed. A good starting point is to fill out all the content settings with the most simple layout and style to those settings. Then alter the settings to the next scenario and repeat. So for example with the featured grid fill in all the content with a few blocks, with the full width setting set to false and same with the block spacing. Each time you finish styling a new scenario it's good to flick back the settings to see if you might have broken anything previously styled.
JS
The framework/scripts/_framework--utils.coffee file has some useful functions. If you find that you are using similar functions in various sections then it might be worth writing a more general versatile function for that file. This should be discussed with the development team before going ahead.
Extending
So far we've shown how to create a framework section. Most of the time there will be little tweaks needed to suit each particular theme.
CSS is easy to override, simply create styles/_partial--demo.scss and import it in the main.scss directly below @import 'framework--demo'
With JS you can create scripts/_partial--demo.coffee and extend the framework with class like this:
class theme.classes.Demo extends theme.classes.FrameworkDemo constructor: (@root) -> _this = this super
It's best to avoid extending the liquid with another file but if its really needed you can create theme/sections/demo.liquid, and make sure to ignore the framework liquid file in your gulp config.
Testing
...
Git
For each section create a new branch off dev. Each commit can be simply the name of the branch, you can do this daily to save your work. When it's ready to merge you can soft reset and move it all into one commit.