Tips for applying CSS to StyleDocco documentation output

I have implemented grunt-styleguide with the template set as styledocco to automatically generate CSS style guides.

Although the task runs successfully, the output files generated by styledocco are missing applied CSS for demo elements.

This is my current grunt configuration for styleguide:

styleguide: {
        dist: {
            options: {
                framework: {
                    name: "styledocco"
                },

                name: "FE KICKSTARTER V1.o"
            },

            files: {
                "assets/css/styleguide": "assets/css/**/*.less"
            }
        }
    }

The results of my implementation are not as expected:

The image, test text, and button above should display styles that are not applying. I have reviewed my configurations and everything seems to be in order, but I am unsure what I am missing.

What steps should I take to resolve this issue?

htmlcssnode.jsdocumentationgruntjs

Answer №1

@chris-vdp is pointing you in the right direction. The comments in are not recognized as valid markdown. To fix this issue, replace the following code in your Less code:

/*  Base
===============

    This is a simple Base CSS

    <div class="h1">H1 type headers</div>

*/

with: 

/*  
Base
===============

This is a simple Base CSS

    <div class="h1">H1 type headers</div>

*/

After removing the wrong tabs, your style guide will look like the example below:

Answer №2

If you're looking for a base CSS, consider trying the following:

/*Base
===

This is a simple Base CSS 
     <div class="h1">H1 type headers</div> 

*/ 
.h1 {
    font-size:30px;
    font-weight:normal; 
}   

/*Type
===
Basic Typography styles 
     <h2>h2 style might go like </h1>    

*/

h2 {
    font-family:'Source Sans Pro';
    color:#f90; 
}

When I first started, I encountered similar issues. It seems that in your source from github, the html is being escaped. Additionally, styledocco has specific requirements regarding spaces.

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

Adding a class to the page content for sticky navigation when scrolling

I have a script that I'm trying to modify, but it's not working as expected. Can someone assist me with this issue? window.onscroll = function() {myFunction()}; var navigation = document.getElementById("navigation"); var sticky = nav ...

htmljquerycssonscroll

Tips for securely sending hidden data in a Django POST form

In the process of developing a chat website, I am encountering an issue where I need to include invisible information within the message form in order to specify the recipient's username and successfully send the message. I am seeking suggestions on h ...

htmldjangoforms

The CSS styles are not being completely applied to the PHP function

My current task involves dealing with multiple folders containing images. When a link is clicked on the previous page, a unique $_GET variable is sent and processed by an if statement, triggering a function to search for and display all pictures within the ...

phpcssfunction

I need the PHP code to ensure that only checkboxes can

I keep encountering what seems like a simple issue in my html form with checkbox groups. I am trying to ensure that at least one checkbox is selected from each group, and if not, display an error message using PHP code. However, despite multiple attempts, ...

phphtmlmysql

The text for the Django link is too verbose

When working on my Django app, I encountered an issue in the detail view where links to attached files in a Post are displayed. The problem arises when the link is too long and extends beyond the border. Is there a way to only show a portion of the link if ...

htmldjangohyperlink

When running "npx create-nuxt-app" followed by "npm run dev", an error occurs stating that there

Recently, I started using Nuxt and initiated my app with npx create-nuxt-app my-app, setting the parameters as follows: Project name: client Programming language: JavaScript Package manager: Npm UI framework: Tailwind CSS Nuxt.js modules: Axios - Prom ...

javascriptnode.jsvue.jsnpmnuxt.js

What is the best way to enable the delete function exclusively for users who are logged in?

I am currently working on implementing a delete function in JavaScript that will remove a MySQL row if and only if it was created by the user who is currently logged in. This means that users cannot delete rows they did not create. Below is the progress I ...

javascriptmysqlnode.js

Background image not displaying

My web page has a background image set using this CSS: body, html { background-image: url(Content/Images/bg-lounge-2-l.jpg); background-repeat: repeat; background-attachment: fixed; /*background-position: 0 -390px;*/ } ...

css

In a NodeJS production environment, MapboxGL may encounter issues, but it functions properly in development

In the file index.js, I have this section: <ReactMapGL ref={this.map} className={classes.root} {...viewport} width="100%" height="100%" scrollZoom={isExpanded ? true : false} touchAction={isExpanded ? &apo ...

node.jsmapboxmapbox-gl-jsmapbox-glreact-map-gl

Guide for using JavaScript to obtain the current line position within a contenteditable div during a keypress event

I am in the process of developing a customized editor using a contenteditable div. I require a javascript code that can determine the line position of the current caret position during a keypress event. It should be able to adapt when new lines are added o ...

javascriptjqueryhtmlcss

Obtain the outcome of HTML5 FileReader by utilizing promises within an asynchronous function

I am encountering a challenge in my Angular 4 application where I am working with an image. I am trying to pass the base64 string to another variable, but due to the asynchronous nature of this process, the image.src ends up being empty. As a result, the ...

angularhtmltypescriptes6-promisephotoeditorsdk

What are the mechanics behind hyperquest, a nodejs module?

While working with the request module, I encountered streaming issues in a production environment. Switching to the hyperquest module seemed to magically solve the problem. I checked out the readme for hyperquest, but couldn't find the details on how ...

node.jsexpress

Using Node.js with Express to send JSON data from an ORM to the client

Within my app.js file question = require('./routes/question_api'), app.use(orm.express("mysql://<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6d1f0202192d5c5f5a435d435d435c">[email protected] ...

javascriptjsonnode.jsexpressnode-orm2

Background image on webpage failed to load

I've encountered an issue with a background image I downloaded for my website - it simply will not display. Here is the CSS code I am using: background-image: url(Resources/Icons/background-image.jpg); background-attachment: fixed; Even after tryin ...

asp.nethtmlcss

The Maximum Width Property of CSS Tooltips is Not Being Applied

I'm working on a tooltip feature and facing an issue where the content does not expand as intended based on the CSS rules. Here's the snippet of my CSS code: .parent { display: inline-flex; position: relative; font-weight: 900; } .parent:h ...

htmlcss

Authentication of all requests compared to removing a user's session from the cache

Running a NodeJS express application with a PostgreSQL DB, the session management in express is handled using the node-cache module. The user management scheme consists of common users and Admins. Admins have additional privileges such as adding/removing ...

node.jsexpresssessionexpress-sessionrole-based-access-control

Having trouble displaying image using absolute path in Express

Currently, I am developing a NodeJS application and have encountered an issue with a div element that has a background-image set in an external CSS file. Surprisingly, the CSS file functions perfectly when tested independently, and the background image dis ...

javascripthtmlcssnode.jsexpress

Images that have been resized on Android appear blurry when viewed on the second page

Customizing the Toolbar: #main_bar { background: url(../images/logo.jpg) 99% 50% no-repeat; background-size: auto 80%; } The original size of logo.jpg is 220x266px The toolbar has a fixed height of 46px Therefore, the background image appears t ...

androidcssresizebackground-image

The child fieldset is oversized with a height of 100%

I am attempting to make a fieldset child stretch to 100%, but the child (ul) is too large and causing overflow (getting cut off in my scenario). Is there a way to stretch the fieldset child to 100% without causing overflow? fieldset { height: 300px; ...

htmlcssflexbox

Storing data in mongoDb using Mongoose resulted in unexpected items being saved

After successfully writing to my mongoDB using mongoose, I noticed some strange additional content saved alongside my document. It appears to be mongoose code. What could be causing this issue? I am adding data to a specific array using the following line ...

mongodbnode.jsexpressmongoosemongohq