A package for quickly building block list based Umbraco websites all from data attributes in your HTMl
***** Please don't judge my code yet. I've not cleaned it up yet *****
At the moment, it is best to use this on a brand new empty umbraco site. You can create your empty site and install QuickBlocks using these commands. You should be able to paste it all into the command line.
# Ensure we have the latest Umbraco templates
dotnet new -i Umbraco.Templates
# Create solution/project
dotnet new sln --name "MySolution"
dotnet new umbraco --force -n "MyProject" --friendly-name "Administrator" --email "admin@example.com" --password "1234567890" --development-database-type SQLite
dotnet sln add "MyProject"
#Add QuickBlocks
dotnet add "MyProject" package Umbraco.Community.QuickBlocks --prerelease
dotnet run --project "MyProject"
#Running
Watch this video to see how I use it.
Here are some examples
<div data-content-type-name="Home Page"
data-prop-name="Main Content"
data-prop-type="[BlockList] Main Content"
data-prop-location="page"
data-list-name="Main Content">
...
</div>
<section data-row-name="Simple Link">
...
</section>
<a href="#" data-prop-name="Link" data-prop-location="row">My Link</a>
<img src="#" data-prop-name="Image" data-prop-location="row" />
<h2 data-prop-name="Image" data-prop-location="row">
<p data-prop-name="Description" data-prop-location="row">
My content in here
</p>
<h2 data-prop-name="Title" data-prop-type="Richtext editor" data-prop-location="row">
<header style="background-image: url('[!image!]')" data-row-name="Header" data-prop-name="Image" data-prop-location="row" data-replace-marker="[!image!]" data-replace-inner="false" data-prop-type="Image Media Picker">
...
</header>
<a href="#" data-prop-name="Social Links"
data-prop-type="Multi URL Picker"
data-multiple="true"
data-replace-attribute="class"
data-replace-inner="true"
data-replace-marker="[!name!]"
data-prop-value=".Name">
<i class="fa fa-[!name!]"></i>
</a>
In the sub list items, we don't need to specify the property location, we only do that for row or page properties.
<div data-row-name="Services">
<h2 class="title" data-prop-name="Title" data-prop-location="row">We build awesome products</h2>
<h5 class="description" data-prop-name="Description" data-prop-location="row">This is the paragraph where you can write more details </h5>
<div data-sub-list-name="Service List"
data-prop-name="Services"
data-prop-type="[BlockList] Service List"
data-prop-location="row"
data-list-inline="false">
<div data-item-name="Service Item">
<h4 class="info-title" data-prop-name="Title">1. Design</h4>
<p data-prop-name="Description">blah blah blah</p>
<a data-prop-name="Link" href="#pablo">Find more...</a>
</div>
</div>
</div>
<footer data-partial-name="Footer">
...
</footer>
data-list-maxwidth="100%"
data-list-single="true"
data-list-live="true"
data-list-inline="true"
data-list-min="0"
data-list-max="3"
data-icon-class="icon-science"
data-icon-colour="color-indigo"
data-label-property="title"
Contributions to this package are most welcome! Please read the Contributing Guidelines.
Thanks to my employers ClerksWell for allowing me some time during my work day to work on this project on top of my own spare time.