jk-brand

JK-Brand

A tiny collection of brand-related profiles and visual assets for Jike web development.

This repository contains the profiles, visual assets and colors which can be preview on the examples page that includes muilple sections:

• Infos Section
• Assets Section
• Colors Section

Installation

npm install --save jk-brand

How to Use

Core

• in Stylus

  @import 'jk-brand' // Color variables
  
  body
    color: $black
  

• in JSX

  import { brandAssets, brandInfos, brandColors } from 'jk-brand'
  
  const nameStyle = {
    'background-color': brandColors.brand
  }
  
  <h2 style={ nameStyle }>{ brandInfos.name }</h2>
  
  <img src=`${brandAssets.circle}` />
  

Utils

• loadHeadIcons(icons?) -> void - Append a favicon and a touch icon to head tag.

  import { loadHeadIcons } from 'jk-brand'
  
  // Run the function at initial point.
  loadHeadIcons()
  

• updateBrandColors(nextColors: Object) -> void - update the brand colors to customize unparalleled theme.

  import { updateBrandColors } from 'jk-brand'
  
  const nextColors = {
    primaryAccent: 'rgb(255, 0, 0)',
    secondAccent : '#FFAF38'
  }
  
  updateBrandColors(nextColors)
  

CLI Scripts

• npm start - Startup a dev server on local, included livereload.

• npm run build - When everything is done, create a production bundle to publish.

• npm run deploy - Deploy a new examples page to Github Pages.

License

All assets of the collection are licensed under CC-BY-4.0 license.

If you have any questions about the branding, feel free to email [e-mail].