A starter theme for Blogger.
- Default layouts version:
<html b:layoutsVersion='3'> - Default gadgets version:
<html b:defaultwidgetversion='2'> - Default comments system: Disqus
- Download and setup (replace
my-awesome-themebelow with the name of your theme):
Read more about tooling setup.$ git clone --single-branch --branch v1.0 https://github.com/wrapblogger/bloggerpack.git my-awesome-theme $ cd my-awesome-theme $ rm -rf .git # remove git $ npm install # install dependencies $ npm install -g grunt-cli # install grunt-cli $ grunt # build
- Configure
src/config.json. - See our Blogger code snippets for reference.
- Make an awesome Blogger theme.
- Run
gruntto build your changes. - To preview theme changes, upload the new compiled theme (
dist/theme.xml) to your blog.
Done? (Yes: next) / (No: back to number2). - Update
README.mdfor your theme. - Run
grunt releaseto release your theme. - Use Git for version control (this is not required, but will help to manage changes to source code):
Push to GitHub or other services.$ git init $ git add . $ git commit -m "Initial commit"
- Upload your theme (
dist/theme.xml) to your blog or share your theme (the generated zip file).
- src/theme.xml => find
name='custom-all-head-content'to configure metadata. - src/theme.xml => find
name='disqus-config'to configure Disqus shortname.
Example to install Font Awesome via npm
$ npm install @fortawesome/fontawesome-free --saveImport Font Awesome JavaScript to src/_js/index.js:
import FontAwesome from '~/node_modules/@fortawesome/fontawesome-free/js/all';
export {
FontAwesome
}Example to install Bootstrap via npm
$ npm install bootstrap jquery popper.js --saveImport Bootstrap styles to src/_scss/index.scss:
@import "./src/custom";
@import "./node_modules/bootstrap/scss/bootstrap"; // <=
@import "functions";
@import "variables";
@import "mixins";
// ...Import Bootstrap JavaScript to src/_js/index.js:
import Bootstrap from 'bootstrap';
export {
Bootstrap
}Notes:
- You need to remove
src/_plugins/bootstrap-grid. - Configure
.browserslistrcto match with Bootstrap's .browserslistrc.
The directory structure looks something like this:
.
├── dist/
│ ├── css/
│ ├── js/
│ └── theme.xml
├── src/
│ ├── _defaultmarkups/
│ ├── _js/
│ ├── _plugins/
│ ├── _scss/
│ ├── _views/
│ ├── config.json
│ ├── custom.scss
│ ├── defaultmarkups.xml
│ ├── skin.css
│ ├── template-skin.css
│ └── theme.xml
├── .browserslistrc
├── .editorconfig
├── .stylelintrc
└── Gruntfile.js
Precompiled theme.
The theme source code that will be compiled into dist/.
Default markups are most useful if you have a section of code that you want to re-use in several different places, or only include in certain circumstances.
- Create a new file in
src/_defaultmarkupsto add default markups. - Write the content inside a
b:includableto define a section of code. - Include the file to
src/defaultmarkups.xmlwithin theCommontype or gadget typeb:defaultmarkuptag. - Use
b:includewherever you want it to appear.
You can also create default markups in src/_plugins for external resources. You need to add it to src/defaultmarkups.xml, too.
The source code for main JavaScript that will be compiled into dist/js/main.js. You can use ES2015.
External resources: markups, CSS, JavaScript, and others.
The source code for main CSS that will be compiled into dist/css/main.css.
The views: layouts, components and more.
A config file to gives you a lot of flexibility. Learn more
Copy variables from src/_scss/**/*.scss, src/_views/**/*.scss, src/_defaultmarkups/**/*.scss and src/_plugins/**/*.scss to this file to override default values without modifying source files.
Styles in skin.css are defined within the <b:skin> tag. Styles in template-skin.css are defined within the <b:template-skin> tag.
CSS within <b:skin> is used for blog look, while CSS within <b:template-skin> is used for template look in layout editor.
Use skin.css to re-create existing styles using skin variables to be able to override through the Blogger's theme designer.
This is the main file for the theme. All the source will be included in this file. This file will be compiled into dist/theme.xml.
Browserslist is a config to share target browsers between different front-end tools.
We uses Autoprefixer (included in our build process) to automatically add vendor prefixes to some CSS properties at build time.
We maintain the list of browsers supported through Autoprefixer in this file.
Editor preferences for easy use in common text editors. Read more and download plugins at https://editorconfig.org/.
Stylelint helps to enforce the consistent code and prevents you from making errors in your stylesheets.
CSS property order: we uses stylelint-config-rational-order by default.
The build tools.
Beyond that, any other included file and directory provides support for packages, license information, and development.
We uses Grunt for its build system. To use our build system, you’ll need the source files and Node.
- Download and install Node.js, which we use to manage our dependencies.
- Install
grunt-cliglobally withnpm install -g grunt-cli. - Navigate to the root theme directory and run
npm installto install dependencies listed inpackage.json.
When completed, you’ll be able to run the various commands provided from the command line.
Our Gruntfile.js includes the following commands and tasks:
| Task | Description |
|---|---|
grunt |
grunt creates the dist directory with compiled files. |
grunt watch |
Watches the source files and automatically building them whenever you save. |
grunt release |
Run grunt release to release your theme, this command will compile the source and zip the root theme directory (exclude: .git, .zip, node_modules). The zip file is named using the format [theme name]-[theme version].zip, you can find the file in the root theme directory. |
We uses grunt-bake for creating modular files in order to ease the process while in development.
Learn more about using grunt-bake by reading its documentation.
For example, the grunt-bake tag that can be used to include src/_views/foo.xml into src/_views/bar.xml.
.
└── src/
└── _views/
├── foo.xml
└── bar.xml
Relative to the file:
# src/_views/bar.xml
<!--(bake foo.xml)-->Relative to the src path:
# src/_views/bar.xml
<!--(bake /_views/foo.xml)-->The src/config.json.
You can access the config values by using:
{{ config.* }}You can access the config values in:
src/**/*.xmlsrc/**/*.scsssrc/**/*.csssrc/**/*.js
Example:
# src/config.json
{
"x": {
"y": "z"
},
"example": "Lorem ipsum dolor sit amet."
}# src/_views/foo.xml
{{ config.x.y }}
<p>{{ config.example }}</p># Output
z
<p>Lorem ipsum dolor sit amet.</p>You can create .xml, .scss, .css, .js, and .md files in the src/_views, src/_defaultmarkups and src/_plugins.
Example:
.
└── src/
└── _views/
├── header.part/
├── header.js
├── header.md
├── header.scss (or header.css)
└── header.xml
| Files | Description |
|---|---|
header.xml |
The header markup. |
header.scss |
Styles for header element. |
header.js |
JavaScript for header element. |
header.md |
Documentation for header. |
header.part/ |
You can create separate markup for header in this folder, then include the separate markup to header.xml. |
- The Sass/CSS and JavaScript files will be automatically concatenated and compiled into
dist/css/main.css(Sass/CSS files) anddist/js/main.js(JavaScript files). - Add exclamation mark (
!) to the filename if you want to ignore Sass/CSS and JavaScript files for auto concatenation (e.g.,!foo.scss,!foo.css,!foo.js). - You can use Sass variables, functions, and mixins from
src/_scssin Sass files. - You can import JavaScript utilities from
src/_jsin JavaScript files (path:~/src/_js/filename).
Have a suggestion or bug fix? Open a pull request or issue.
Details changes for each release are documented in the release notes.
Bloggerpack is the starting point for a new theme. When you used it to create a theme you just created a brand new theme using Bloggerpack as a head start.
There isn't really even anything to update. At this point it has become your theme and it doesn't depend on Bloggerpack.
If you see an update to Bloggerpack that you would like to implement on your own Bloggerpack based theme, then you will need to inspect the change and figure out how to manually implement it on your own theme, and you'll need to approach these changes case by case.
Licensed under MIT.