Issue encountered while attempting to deactivate certain foundation CSS and JavaScript files

I am attempting to deactivate certain CSS files in the foundation framework, as they are unnecessary for my project.

After installing foundation via a gem, I followed Ryan Bates' recommendation to modify the foundation_and_overrides.scss file by replacing import foundation with specific files that I require:

@import
  "foundation/components/grid",
  "foundation/components/alert-boxes",
  "foundation/components/block-grid",
  "foundation/components/buttons",
  "foundation/components/dropdown",
  "foundation/components/dropdown-buttons",
  "foundation/components/forms",
  "foundation/components/inline-lists",
  "foundation/components/joyride",
  "foundation/components/labels",
  "foundation/components/orbit",
  "foundation/components/panels",
  "foundation/components/reveal",
  "foundation/components/tooltips",
  "foundation/components/top-bar";

However, I encountered the following error message:

Undefined variable: "$include-html-classes".

Has anyone successfully disabled CSS/JS files from the foundation framework?

Thanks!

Update

This is how my foundation_and_overrides.scss appears:

$include-html-classes: true;
$include-print-styles: true;
...
... // Remaining variables go here

@import "foundation/variables";   

@import
  "foundation/components/grid",
  "foundation/components/accordion",
  ...
  ... // List of additional components go here

Using this configuration leads to the error:

Undefined variable: "$opposite-direction".
javascriptcssruby-on-railszurb-foundation

Answer №1

To properly utilize the Foundation components, it is crucial to first import the _settings.scss file. Below is an example of how this can be done.

//
// Custom Settings
//
@import "foundation/settings";


// Foundation by ZURB
// foundation.zurb.com
// Licensed under MIT Open Source

// Setting appropriate charset
@charset "UTF-8";

// Here are all the Foundation components available.
@import
  "foundation/components/grid",
  //"foundation/components/accordion",
  //"foundation/components/alert-boxes",
  //"foundation/components/block-grid",
  //"foundation/components/breadcrumbs",
  //"foundation/components/button-groups",
  "foundation/components/buttons",
  //"foundation/components/clearing",
  "foundation/components/dropdown",
  //"foundation/components/dropdown-buttons",
  //"foundation/components/flex-video",
  "foundation/components/forms",
  "foundation/components/inline-lists",
  //"foundation/components/joyride",
  //"foundation/components/keystrokes",
  "foundation/components/labels",
  //"foundation/components/magellan",
  //"foundation/components/orbit",
  //"foundation/components/pagination",
  //"foundation/components/panels",
  //"foundation/components/pricing-tables",
  //"foundation/components/progress-bars",
  "foundation/components/range-slider",
  "foundation/components/reveal",
  //"foundation/components/side-nav",
  //"foundation/components/split-buttons",
  //"foundation/components/sub-nav",
  //"foundation/components/switch",
  "foundation/components/tables",
  //"foundation/components/tabs",
  //"foundation/components/thumbs",
  //"foundation/components/tooltips",
  "foundation/components/top-bar",
  "foundation/components/type",
  //"foundation/components/offcanvas",
  "foundation/components/visibility";

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

Implement a floating div below an accordion element on the page

As depicted in the image, there is a "Quick Tips" div located below the accordion. Let's assume the outermost div is named id="TipsDiv". The goal is to ensure that this div remains below the accordion as the user scrolls down, never going above positi ...

jqueryhtmlcssinternet-explorer-8

When I use my loop to generate Google Map markers, the positioning is not accurate and the markers do not appear on the map. However, manually inputting the positions

There seems to be an issue with displaying Google map markers based on objects in the markers array after looping through it. I noticed that when creating a second component and setting the position manually, the marker appears correctly. However, upon ins ...

javascriptvue.jsvuejs2vue2-google-maps

Exploring the life cycle of React.js components, how state behaves within them, and the asynchronous nature

There seems to be an issue with the expected data result and the actual data result. Even though the fetchData() and fetchnumberOfCommits() methods are being called from the componentWillMount(), the array is empty at first. However, the render method is b ...

javascriptajaxreactjsasync-await

What is the best way to submit a Redux Form only if there have been changes made to any of the fields

I'm currently using Redux Form version 7.1.2, and I have a form that submits data when the user clicks the submit button. In the function assigned to handle the submission, I perform an action. However, I only want this action to be executed if there ...

javascriptreactjsreact-reduxredux-form

Identify the externally-sourced element of interest

I'm attempting to apply a ScrollReveal effect to an element loaded from a separate html file called "header.html". Unfortunately, the ScrollReveal animation is not working on this particular element, while other elements within my index.html are funct ...

javascriptjqueryhtmlscrollreveal.js

The error notification is not appearing in the correct location

I've been troubleshooting my jQuery error function for hours now (including the success function). I'm struggling to figure out how to display an error message only below the button that I click. To help clarify my issue, I've created a JSFi ...

javascriptjquery

Utilizing the map function in Angular while disregarding any null values

I have an array of objects in my dataset. Here's a glimpse of how it is structured: [ { "id": 1, "name": "john", "address": { "number": 42, "street": "High Street"} }, { ...

javascriptangulartypescript

When useEffects are linked in such a way that the first one updates a dependency of the second, it can lead to

Modified code block with console logs integrated from approved solution. I have stripped down a search bar component to its simplest form: import React, { useEffect, useRef, useState } from "react"; import axios from "axios"; const re ...

javascriptreactjsdomasync-awaitreact-hooks

What is the best way to divide multiple event handlers in jQuery?

Is there a way to organize the code below more effectively by splitting the multiple events into separate lines? $document.find('body').on( 'click dblclick mousedown mousemove mouseout mouseover mouseup mousewheel keydown keypress keyup ...

javascriptjqueryangularjseventsevent-handling

async.series: flexible number of functions

Hello everyone, I'm currently working with Node.js (Express) and MongoDB (mongooseJS). My goal is to create a series of async functions that query the database in the right order. Here is my question: How do I go about creating a variable number of a ...

javascriptnode.jsmongodbasynchronousexpress

Flow object with Angular using ng-flow: Existing flow object

Just a quick question that I can't seem to find an answer for on my own or through searching online. Currently, I have a button set up for clicking and uploading files. However, I also want to incorporate drag and drop functionality using the same fra ...

javascriptangularjsng-flow

Display a list exclusively with radio button options

Currently, I am developing a module that allows the admin to view a list of candidates who have requested approval. The interface includes radio buttons for three different selections and a submit button. However, I would like to update this functionality ...

javascriptphpjquerymysqlajax

Ways to troubleshoot setTimeout functioning during HTTP requests?

Utilizing Socket IO in my client app, I have implemented a feature to check for unread events. The process involves making a request to the backend, which then sets a 5-second timeout before checking for any new events and sending them back. // client soc ...

javascriptnode.jsexpresssocket.io

Nodejs and javascript are utilized to create dynamic SES emails

I have successfully implemented sending an email using node-ses client.sendEmail({ to: to_id, , cc: cc_id, , bcc: bcc_id, , subject: 'greetings' , message: 'your <b>message</b> goes here' , altText: 'plain text& ...

javascriptnode.jsexpressamazon-ses

Unable to find component: "wrestler-choice-box". If this is a built-in custom element, please ensure it is not included in component resolution

In my attempt to achieve a specific goal, I have an array of data that I want to incorporate into my HTML document along with a Vue component containing a template. My intention is to utilize list rendering so that the names and images from this array bind ...

javascripthtmlvue.jsvue-componentvuejs3

The tooltip is being truncated

https://i.sstatic.net/o41Qz.png Struggling with a tooltip that keeps getting cut off? I've tried everything and still can't get it right. <th class="fd-table--header-cell" scope="col"> <p class=&q ...

htmlcssangular

Conceal the button briefly when clicked

How can I disable a button on click for a few seconds, show an image during that time, and then hide the image and display the button again? HTML: <input type="submit" value="Submit" onclick="validate();" name="myButton" id="myButton"> <img st ...

javascripthtml

The "body" object cannot be accessed in a post request made from an Express router

I am currently utilizing Express router functions to manage some POST requests. Client.js let data = { endpoint: "Blah Blah"; }; return fetch('/api/get-preferences/', { method: 'POST', headers: { 'Content-Type': & ...

javascriptnode.jsexpresspost

Stopping individuals from engaging in the act of spamming a picture upload form

I am currently developing an innovative Image hosting platform, and I am faced with a crucial challenge – how can I effectively prevent users from continuously refreshing the form, causing the image to be repeatedly uploaded until my disk space allocat ...

phphtmlcssimageupload

Position the checkbox to the left of the label

I currently have a checkbox with ripple effects. The label text is displayed before the checkbox in the code. However, I'd like to change the order so that the checkbox comes before the label text. Occasionally, the entire div expands and contracts. ...

htmlcss