React.js Blueprint Colors Usage
Blueprint is a React-based UI toolkit for the web. This library is very optimized and popular for building interfaces that are complex and data-dense for desktop applications.
In this article, we’ll discuss React.js Blueprint Colors Usage. Colors are a very important component used in styling a web application. The React.js Blueprint provides variables for colors to use in Sass, Less, and JavaScript languages.
Blueprint Colors Usage:
- Blueprint in Sass: Blueprint colors are used in Sass scripting language which is a preprocessor style sheet language compiled into CSS.
- Blueprint in Less: Blueprint colors are used in Less which is a dynamic preprocessor style sheet language compiled into CSS.
- Blueprint in JavaScript: Blueprint colors are used in JavaScript as Blueprint is React based library which uses JavaScript.
Syntax:
// Color usage in Sass @import "~@blueprintjs/core/lib/scss/variables"; .rule { background: $red; } // Color usage in Less @import "~@blueprintjs/core/lib/less/variables"; .rule { background: @Red; } // Color usage in JavaScript import { Colors } from "@blueprintjs/core"; <div style={{ background: Colors.RED }} />
Creating React Application And Installing Module:
Step 1: Create a React application using the following command:
npm create-react-app appname
Step 2: After creating your project folder i.e. appname, move to it using the following command:
cd appname
Step 3: After creating the ReactJS application, Install the required module using the following command:
npm install @blueprintjs/core
Project Structure:
Example 1: Below example demonstrates the usage of colors in Sass.
Javascript
import React from "react" ; import "@blueprintjs/core/lib/css/blueprint.css" ; import "./App.scss" ; function App() { return ( <center> <div style={{ padding: 20, textAlign: "center" , color: "green" }}> <h1>ReactJS BluePrint Colors Usage</h1> </div> <div> <div className= "button" style={{ padding: 20, textAlign: "center" , width: 100, borderRadius: 50, }} > Sass </div> </div> </center> ); } export default App; |
CSS
/* Write SASS Here */ @import "~@blueprintjs/core/lib/scss/variables" ; .button { color : $ white ; background : $blue 1 ; } |
Output:
Example 2: Below example demonstrates the usage of colors in Less.
Javascript
import React from "react" ; import "@blueprintjs/core/lib/css/blueprint.css" ; import "./App.less" function App() { return ( <center> <div style={{ padding: 20, textAlign: "center" , color: "green" }}> <h1>ReactJS BluePrint Colors Usage</h1> </div> <div> <div className= "button" style={{ padding: 20, textAlign: "center" , width: 100, borderRadius: 50, }} > Less </div> </div> </center> ); } export default App; |
CSS
/* Write Less Here */ @import "~@blueprintjs/core/lib/less/variables" ; .button { color : @ white ; background : @ black ; } |
Output:
Example 3: Below example demonstrates the usage of colors in JavaScript.
Javascript
import React from "react" ; import "@blueprintjs/core/lib/css/blueprint.css" ; import { Colors } from "@blueprintjs/core" ; function App() { return ( <center> <div style={{ padding: 20, textAlign: "center" , color: "green" }}> <h1>ReactJS BluePrint Colors Usage</h1> </div> <div> <div style={{ padding: 20, color: Colors.WHITE, background: Colors.GREEN3, width: 100, height: 50, borderRadius: 50, textAlign: "center" , }} > Click </div> </div> </center> ); } export default App; |
Output:
Reference: https://blueprintjs.com/docs/#core/colors.usage