Skip to main content
SimilarExport ZIP
100%

Converts Bulma CSS framework from SASS to SCSS

✓ Published0🌍 Public
LLucyI
Last edited Mar 30, 2017
Created on Jul 25, 2017

This example converts the Bulma CSS framework from SASS syntax to SCSS using a custom Gulp pipeline. It shows how `gulp.src` selects both root and nested `.sass` and `.scss` files from `node_modules/bulma`, then pipes them through the `sass-convert` converter with `from: 'sass'` and `to: 'scss'` options. The `gulp-replace` plugin rewrites any `.sass"` file-path references to `.scss"` in the source files, and a separate `gulp-sass` task compiles the converted `bulma.scss` to CSS. The gist demonstrates automating framework migration and recompilation with Node.js tooling.

AI-generated description

Similar vizzes

Loading thumbnail…

Gist 467901440093a9904541

This example demonstrates a Gulp task that automates the generation of critical CSS for a WordPress theme. It shows the process of downloading a remote stylesheet, analyzing its rules, and extracting only the styles needed for above-the-fold rendering of a specific page. The task uses the `request` library to fetch the CSS file, `criticalcss` to parse and evaluate the rules against the target URL, and the Node.js `fs` module to write the resulting critical CSS to a local file.

GGolodhros
65% match
Loading thumbnail…

Hack to enable source maps in with gulp-sourcemaps and autoprefixer.

This example demonstrates a custom Gulp plugin that enables source maps when using Autoprefixer with gulp-sourcemaps. The code defines a module that processes CSS files through the `autoprefixer` library, updates the file contents with prefixed CSS, and applies the resulting map via `vinyl-sourcemaps-apply`. It integrates with `through2` for stream handling and is designed for use within a Gulp task where sourcemaps are initialized and written. The gist shows the complete function, including error handling for streams and null files.

MMcNull
60% match
Loading thumbnail…

Simple babel livereload

This example demonstrates a live-reloading development workflow for transpiling JavaScript and serving a web page. The gulpfile defines tasks to convert ES6 source files with Babel, bundle the resulting JavaScript with Browserify, and automatically refresh the browser via `gulp-livereload` whenever source files change. It also sets up a local HTTP server using the `st` library to serve static files on port 8080, integrating all these steps into a single default Gulp task. The visualization shows how build tools can be orchestrated for rapid iteration, but no actual data or graphical output is involved—the code is purely a build configuration.

MMcNull
60% match
Loading thumbnail…

SCSS cheat sheet

This example presents a SCSS cheat sheet as a source-code reference, showing syntax for imports, variables, nesting, mixins, and media queries. The code includes predefined color variables like `$dmn-blue`, uses `lighten()` to adjust shades, and demonstrates `@mixin` definitions for reusable styles such as `body-copy-style` and `rounded`. It also illustrates selector nesting with the `&:hover` parent reference and responsive design via `@media` rules keyed to width variables. The gist by LayneSmith serves as the data source, rendered directly as formatted code.

LLayne Smith
59% match
Loading thumbnail…

Generated by SassMeister.com.

This example demonstrates how Sass preprocessing turns SCSS source code into standard CSS, using the SassMeister.com web tool. The input SCSS defines a `solidblock` mixin that mixes a background color with white at 40%, then applies it to `.block` and `.block-blue` classes, resulting in rendered HTML blocks with gray and white backgrounds. The snippet also shows nested selectors with a hover pseudo-class and a `$primary-color` variable. The CSS output and rendered HTML are displayed alongside the original SCSS and HTML files, illustrating the compilation pipeline from gist-embedded input to final styled output.

IIsaKiko
58% match
Loading thumbnail…

Gist 16d0e6050f60256517db942d1fe29703

This example demonstrates a technique for remotely fetching and inspecting CSS stylesheets, particularly extracting image URLs from `srcset` attributes and resolving cross-origin stylesheet rules. The code uses the Fetch API with a CORS proxy to retrieve stylesheet contents, then parses `srcset` strings with a custom regular expression to collect image candidates. It also leverages `document.styleSheets`, `cssRules`, and a temporary `<style>` element to access rule data, while caching processed elements in a `WeakSet` to avoid duplication. The visualization output is logged to the console, showing the collected stylesheet rules and image URLs from the current page.

NN0taN3rd
54% match
Loading thumbnail…

loading and parsing for csv

This example demonstrates loading and parsing a CSV file containing CSS named colors. It fetches the data from a GitHub gist URL using the Fetch API, then logs the raw text content to the browser console via `fetchText` and `response.text()`. The page displays a CSS-styled layout with an oversized font size, but the core functionality focuses on asynchronous data retrieval and text conversion. The code uses vanilla JavaScript with `async/await` and promises, without any external libraries.

YYu Liu
54% match
Loading thumbnail…

Fork of Loading and Parsing CSV Data

This example demonstrates loading and parsing a CSV file containing CSS Named Colors from a remote GitHub gist. It uses the Fetch API to retrieve the text, then D3 v7’s `d3.csvParse` method to convert the raw CSV into an array of objects. The parsed data is logged to the browser console via `console.log`, and the interface simply renders a large empty `<pre>` element. The code runs entirely in an asynchronous function, showcasing how `async`/`await` handles the data-loading pipeline.

SSlodgar
54% match