What is the best way to implement my schema data in CSS/stylus when using an Express app?

Currently developing themes for my express app, I am exploring new possibilities that I am uncertain about. Seeking expert advice on the best ways or methods to achieve this.

This is the structure of my schema...

var colorSchema = new Schema({
    primaryColor: {
        type: String
    },
    secondaryColor: {
        type: String
    }
});
module.exports = mongoose.model('Color', colorSchema);

For instance, suppose I input hex colors for primaryColor and secondaryColor when creating a new schema. How can I utilize color.primaryColor as a value in my css or stylus similar to how it's done in jade?

cssnode.jsexpresspugstylus

Answer №1

Make sure to initially send the data to Jade via render in Express:

// Set both colors to default white
res.render('template_name', {
  primaryColor: color.primaryColor || '#FFF',
  secondaryColor: color.secondaryColor || '#FFF',
  someOtherVar: 'foo'
});

Next, in your Jade template:

style(type='text/css')
  | .primary-color-bg { background-color: #{primaryColor}; }
  | .secondary-color-bg { background-color: #{secondaryColor}; }

You can then use primary-color-bg and secondary-color-bg classes on any HTML elements you wish to set the background for. The same approach can be applied for other attributes like color, border, etc.

Answer №2

Stylus offers a JavaScript API that allows for the rendering of various Stylus code strings.

stylus = require('stylus');

variable = '#fff';

stylus.render(
  "\n.thing" +
  "\n  color: " + variable + "\n",
  console.log);

This example may seem simplistic, but it demonstrates the flexibility provided by the API. Additionally, this API enables the creation of more "composable" compile-function definitions, allowing for the exposure of JS values (via .define) into Stylus.

stylus(str)
  .set('filename', 'nesting.css')
  .define('whatever', '#fff')
  .render(console.log);

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is it possible to view the CSS of a PDF file in print template mode using Chrome?

https://i.stack.imgur.com/XlcWm.png Currently facing an issue with debugging CSS on my PDF template. I am unable to inspect the styles directly in the CSS due to limitations. When using inspect element in Chrome, only the styles for text and elements are ...

htmlcssgoogle-chromefirefoxgoogle-chrome-devtools

Why doesn't ::after behave as I anticipate?

I seem to be having some trouble understanding the ::before and ::after features in CSS. My goal is to create a 200x200px box with another smaller box (24x24) positioned at the top right. Here's what I have so far: https://jsfiddle.net/xd6L3h6v/ &l ...

csspseudo-element

The picture within the bootstrap popover is spilling out of the popover

I need help resolving an issue on my webpage where images in popovers overflow when they reach a certain size. I used an online demo to create the page, but now I'm encountering this problem. How can I fix it? Check out the Js Fiddle for reference: h ...

csstwitter-bootstrapbootstrap-4popover

Error message from Firebase cloud function: We are unable to find a user record associated with the provided identifier

I am encountering an error when attempting to setCustomUserClaims in a trigger function. https://i.sstatic.net/QrLBT.png Here is the code snippet causing the issue: exports.onCreateCompaniesByUserFunction = functions.firestore.document('/com ...

javascriptnode.jsfirebasefirebase-authenticationgoogle-cloud-firestore

Tips for increasing the size of the SVG icon within Material UI iconButtons

Have you experimented with creating webpages using react.js along with the Material UI library? How can I adjust the size of an SVG icon? Recently, I developed a "create new" component, which consists of a material paper element with an add button on top. ...

csssvgreactjsmaterial-designmaterial-ui

Impatiently anticipating the resolution of the promise

I've encountered a challenging work-related task that involves fetching data from a database and then sending it to an external API via a POST request. Although I have been able to successfully retrieve and process the data, I'm facing an issue w ...

javascriptnode.jsasynchronousasync-awaitpromise

Floating with Bootstrap Utility

Have you ever wondered about the proper usage of bootstrap float utility? Check out this example: <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/> <div class="row"> <div class=" ...

htmlcssbootstrap-4

Leveraging the sudo command within a Node-Webkit application

In the process of creating a NodeNW application that executes various shell commands, I have encountered an issue involving a command requiring sudo privileges to run. What is the most efficient and secure method to prompt the user for their password and ...

node.jssudonode-webkit

Mastering the use of Regex in ExpressJS app.use() for optimal performance

Guide on Implementing Regex within ap.use() var express = require('express'); var app = express(); app.use("/files", function (req, res) { return res.send("I will be served instead of a files directory"); }); app.use( ...

node.jsregexexpressserver

Overlapping text effect with CSS

Currently, I'm in the process of building a website using HTML5 and CSS3. One particular challenge I've come across is when trying to integrate two CSS images together, with one containing a few lines of text. Let me get straight to the issue at ...

htmlcss

Utilizing html5 mode in AngularJS alongside an external NodeJS server

Despite reading numerous SO answers and questions on this topic, I still find myself with lingering uncertainties. To outline the issue: I am utilizing an AngularJS app with html5 enabled to eliminate the '#' sign. $locationProvider.html5Mode( ...

javascriptangularjsnode.jshtmlheroku

Achieving colorful npm test outputs in the TFS build log console

My TFS 2017 build is currently running npm tests. Strangely, when the build runs, all of the npm test output lacks color. However, when I run these tests in the command line without the build, they are colorized. Is there a way to ensure that the colors d ...

node.jstfsnpmkarma-runnertfsbuild

Tips for positioning fixed column headers at the bottom of the header row

I am currently working on a responsive table where the first two columns are fixed and the rest are made to float. However, I have encountered some issues and have a few questions: Why do the headers for the first two columns float to the top of the head ...

cssbootstrap-4responsivecss-tables

Angular 17 seems to have an issue with the subscribe method not functioning properly

export class HomeComponent { info: any; constructor(private service: ApiService) { } init(): void { // Replace 'your-endpoint' with your actual endpoint this.service.fetchData('your-endpoint').subscribe( response ...

node.jsangulartypescriptsubscribeangular17

Building a Horizontal Line Component in ReactJS

Looking for help with my login page design. I have two login buttons - one for regular login and one for Google login. I want to add a stylish horizontal line with the word "OR" between the buttons, similar to the image in the link provided. https://i.sst ...

cssreactjsmaterial-uireact-hooksjss

Meteor powering the user interface, while Express handles the server-side operations on the backend with NodeJS

When designing a website that requires real-time reactivity like Meteor on the frontend, but also needs a job processing backend (such as Kue), it is clear that the frontend app will benefit from Meteor's capabilities. However, the backend processing ...

javascriptnode.jsexpressmeteorderbyjs

Encountering the error message 'db.get is not a function' in Node.js while working with MongoDB

Developing a voting application that involves creating two models: users and polls. The database will have two collections - one for users and one for polls. User.js 'use strict'; var mongoose = require('mongoose'); var Schema = mong ...

node.jsmongodbexpressmongoose

I'm attempting to incorporate the CSS file into the main HTML template, but the styling isn't being applied. My goal is to define the styles externally

The CSS style isn't being properly imported. Below is the base HTML file (base.html) I'm using: <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <meta name="viewport" content="widt ...

htmlcssweb-development-server

Change the size of the image to use as a background

I have an image that is 2000x2000 pixels in size. I originally believed that more pixels equated to better quality with less loss. Now, I am looking to display it on my browser at a resolution of 500x500. To achieve this, I attempted to set the image as t ...

jqueryhtmlcssimage

Unable to conceal with Bootstrap collapse

Having trouble collapsing the bootstrap <a href="#demo" data-toggle="collapse">Expand/Collapse</a> <div id="demo" class="collapse"> @item.Ans </div ...

htmlcsstwitter-bootstrap