Assets used in tochiResources web technology apps.
- Download tochiResources assets from the latest releases.
- Unzip in your root folder.
Download the code manually instead to use the API until #1 is fixed and then read the instructions below to require it from node_modules like a normal package:
- Download this repo.
- Unpack zip somewhere on your PC.
- Open the directory or
index.jsin VS Code or cmd. - Open the Terminal in VS Code (skip this if using cmd).
- Write
npm link. - You can now install the package with
npm link @tochiresources/assets-weband require it:
const assetsWeb = require('@tochiresources/assets-web');- css
- logo
- cursors
- fonts
- sfx
These are the main colors:
#fff#4388CD#2A2C2D#131313
(Browsers only) Insert directly in your HTML document before a specific <link> tag inside the <head> tag via JavaScript (recommended):
Inserts before the first
<link>tag that has ahrefvalue ofcss/style.css
assetsWeb.CSS.insert("css/style.css");(Browsers only) Import directly in your HTML document as the last element in the <head> tag via JavaScript:
assetsWeb.CSS.add();Import directly via .css file:
@import url("common.css");Import directly via HTML document:
<link rel="stylesheet" href="css/common.css">--main-color: #4388CD;
--accent-color: #6495C6;
--secondary-color: #8B8B8B;
--element0-color: #fff;
--element1-color: #1f2021;
--element2-color: #253136;
--element3-color: #272E31;
--element4-color: #393E41;
--element5-color: #3D484C;
--button-bg-color: #2A2C2D;
--notification-standard-color: rgb(82, 112, 124);
--notification-standard-border-color: rgb(123, 194, 222);
--notification-success-color: rgb(82, 124, 82);
--notification-success-border-color: rgb(123, 222, 123);
--notification-warning-color: rgb(124, 82, 82);
--notification-warning-border-color: rgb(222, 123, 123);
--bg1-color: #131313;
--bg2-color: #1B1B1B;
--footer-color: rgba(19, 19, 19, 1);
--text-color: #fff;
--text-header-color: var(--main-color);
--text-accent-color: #8B8B8B;
--text-link-color: #91BEEA;
--text-link-visited-color: #4B75A7;
--text-link-hover-color: var(--main-color);
--text-link-active-color: ##54A4F5;
Fonts are included when importing the css.
'Montserrat', sans-serifUse in your .css file:
.element {
font-family: 'Montserrat', sans-serif;
}
Import directly via HTML document as <img> (recommended):
<img class="tr-logo" src="logo/SVG/logo.svg" alt="tochiResources logo" />(Browsers only) Insert directly in your HTML document before a specific Element via JavaScript:
assetsWeb.Logo.insert(element);
// or
assetsWeb.Logo.insert("element-id");CSS
.tr-logo {
width: 100px;
}
(Browsers only) Insert directly in your HTML document before a specific Element via JavaScript:
assetsWeb.Logo.insert(element, "icon");
// or
assetsWeb.Logo.insert("element-id", "icon");Import directly via HTML document as <img>:
<img class="tr-icon" src="logo/SVG/icon_bg.svg" alt="tochiResources icon" />CSS
.tr-icon {
width: 25px;
}Import directly via HTML document as an icon in the <head> tag:
<link rel="icon" href="logo/favicon/favicon.ico" />
<link rel="apple-touch-icon" href="logo/favicon/apple-touch-icon.png" />API docs can be found here.
Audio should work in NodeJs as well thanks to sound-play.
assetsWeb.SFX.click_1();
assetsWeb.SFX.error_1();
assetsWeb.SFX.msg();
assetsWeb.SFX.success();The urls are offline for now and therefore may need to be checked/adjusted to your project folder structure.