❤
npm
Sign UpSign In

diz-theme-minimalist

0.2.4 • Public • Published

Minimalist

Dix and React

A Diz theme. [demo]

XO code style Dependencies Status

Install

yarn add -D diz-theme-minimalist
npm i -D diz-theme-minimalist

Customize

Clone this.

git clone git@github.com:nju33/diz-theme-minimalist.git
# or git clone https://github.com/nju33/diz-theme-minimalist.git 

To prepare the environment.

cd <cloned directory path>
<npm or yarn> install

Edit theme/**/*.jsx files.

Then read in config.js.

const CustomTheme = require('./path/to/custom-theme');
 
module.exports = {
  title: '...',
  url: '...',
  theme: {
    Renderer: CustomTheme,
    config: {base: '...'}
  }
}

🎉👏👏👏👏👏

Options

{
  theme: {
    Renderer: Minimalist
    config: {
      //* option
      // Specify the path to the scripts directory
      // (e.g.)
      // When the blog's URL is like this
      // http://example.com/foo/
      // It is good to specify `/foo`
      base: null // default
 
      //* option
      // Whether to output CSS directly to the style tag of head
      // If wanna use it with your CSS, set it to false
      inlineCSS: true // default
      //* option
      // When A is false,
      // specify the public path up to
      // the CSS that you made
      stylesheetPath: '/styles/index.css' // default
 
      //* option
      // Whether to make twemoji available
      twemoji: false // default
 
      //* option
      // <html lang={lang}>
      lang: null // default
    }
  }
}

Tips

Import CSS of this theme to your CSS.

PostCSS

Let's install 2 packages

yarn add -D postcss postcss-import

Setup

const postcss = require('postcss');
const atImport = require('postcss-import');
 
postcss([atImport])
  .process(cssContents)
  .then(...);

Import it at the beginning of the .css file.

@import "diz-theme-minimalist";
/* == @import "./node_modules/diz-theme-minimalist/minimalist.css"; */

Less

Let's install 2 packages

yarn add -D less less-plugin-npm-import

Setup

const less = require('less');
const NpmImportPlugin = require('less-plugin-npm-import');
 
less.render(lessContents, {plugins: [new NpmImportPlugin()]})
  .then(...);

Import it at the beginning of the *.less file.

@import (less) "npm://diz-theme-minimalist/minimalist.css";

Sass

Let's install 2 packages

yarn add -D node-sass sass-module-importer

Setup

const sass = require('node-sass');
const moduleImporter = require('sass-module-importer');
 
sass.render({
  file: 'path/to/*.scss',
  importer: moduleImporter()
}, callback);

Import it at the beginning of the *.scss or *.sass file.

@import "diz-theme-minimalist" 

License

The MIT License (MIT)

Copyright (c) 2016 nju33 nju33.ki@gmail.com

Readme

Keywords

Package Sidebar

Install

npm i diz-theme-minimalist

Repository

github.com/nju33/diz-theme-minimalist

Homepage

github.com/nju33/generator-diz#readme

Weekly Downloads

0

Version

0.2.4

License

MIT

Last publish

Collaborators

  • nju33
Try on RunKit
Report malware