Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@vanillaforums/theme-boilerplate

Package Overview
Dependencies
Maintainers
7
Versions
32
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@vanillaforums/theme-boilerplate

A boilerplate for Vanillaforums themes

  • 3.1.4
  • latest
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
9
increased by350%
Maintainers
7
Weekly downloads
 
Created
Source

Theme Boilerplate

Description

It's a starter's kit to build Vanilla Forums custom themes. It contains all files necessary for a theme with customizable styles.

Getting Started

Node and Yarn are prerequisites to use this tool. Please download and install the latest stable release from the official Node.js download page and yarn.

Notice: It is important that you install Node in a way that does not require you to sudo.

  1. Navigate to your theme folder and add the boilerplate package:
yarn add @vanillaforums/theme-boilerplate
  1. Run the installation command:
yarn run boilerplate-install my-pretty-theme "My Pretty Theme"
  • Replace my-pretty-theme with your theme key. This should be unique and must exactly match the folder name, including capitalization. It should also follow the dashed-lower-case naming convention.
  • Replace My Pretty Theme with your theme name (keep the double quotes). This is the name that appears on the dashboard.
  1. This tool also has a build step, provided by the Vanilla CLI. This step is necessary to generate scripts and stylesheets that run in the browser. Make sure the Vanilla CLI is installed, then run the following command on the theme folder to build:
vanilla build
  1. Your theme is ready to be enabled. On your localhost navigate to Dashboard > Appearance > Themes and enable your theme.

Usage

You might want to start taking a look at src/scss/_variables.scss. There you can find most of the variables you need to customize your theme.

A good starting point is to create variables containing your brand values on the top of the _variables.scss, like colors, font family, sizes, etc. Make sure to use the $theme- namespace to keep things organized.

Once your variables are set, you may start customizing!

To know more about the boilerplate SCSS structure please visit the variables description page. There you can find information about what each variable represents, naming conventions and folder structure.

Essentially you can overwrite whatever you like but be careful! Some variables are heavily inherited and not meant to be overwritten. Doing so may break your layout.

Version

1.1.1 - Updates _variables.scss, make sure you update together with your variable sheet otherwise the build will not run. 1.1.0 - Updated default.master.tpl to solve security vulnerability.

Building Styles / Javascript / Images

The boilerplate frontend assets are built with the Vanilla CLI.

Keywords

FAQs

Package last updated on 15 Sep 2020

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc