folio-scss

Name: folio-scss
Availability: InStock
Author: Sinfin

Define Sass/SCSS conventions for Folio component styling with BEM and responsive design.

10|2|Updated Jul 10, 2017

Search Tags:#CSS #BEM #Sass #SCSS #Folio

Ready to run

npx skills add https://github.com/sinfin/folio --skill folio-scss

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: folio-scss
Source: https://github.com/sinfin/folio/tree/main/.skills/folio-scss
Command: npx skills add https://github.com/sinfin/folio --skill folio-scss

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill provides guidelines for writing Sass/SCSS stylesheets for Folio components, ensuring consistency and maintainability across the project.

Core Features & Use Cases

BEM Nesting: Defines best practices for BEM (Block Element Modifier) naming conventions for Folio components.
Component Stylesheets: Instructions on where to place styles for each component.
Responsive Styles: Guidelines on implementing responsive design using container queries and media queries.
Variables and Utilities: Usage of pre-defined variables and utility functions.
File Format: Standard for using indented Sass or SCSS and readability.
Quality Gates: Checks for compilation errors after edits.
Use Case: A developer new to Folio uses this Skill to style a new component and ensure it adheres to the established styling conventions.

Quick Start

Apply the folio-scss skill to the new component 'ui-button' by editing its corresponding '_ui-button.sass' file.

Frequently Asked Questions about folio-scss

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I structure SCSS stylesheets for Folio components using BEM?▼

Sass/SCSS conventions for Folio components define BEM nesting best practices and dictate placing component styles in corresponding stylesheet files to ensure structural consistency across the project.

What is the best way to implement responsive design in Folio component styles?▼

The best way to implement responsive design in Folio component styles is by utilizing container queries and media queries alongside pre-defined style variables and utility functions to maintain consistency across the project.

Do I need to know BEM to write Sass for Folio applications?▼

Yes, knowledge of BEM and responsive design principles is required. This Skill is designed for Rails developers managing UI components within Folio applications who already understand these foundational styling concepts.

Should I use indented Sass or SCSS syntax for Folio component styling?▼

Folio component styling provides standards for using either indented Sass or SCSS syntax, prioritizing readability and maintaining consistent file formats across component stylesheets to ensure project-wide consistency.

How do I check for Sass compilation errors after editing Folio component styles?▼

You check for Sass compilation errors after editing Folio component styles by running the built-in quality gates, which automatically verify stylesheet integrity and catch compilation issues after edits are made.

Where should I place stylesheet files for new Folio UI components?▼

You should place stylesheet files for new Folio UI components in corresponding dedicated files, such as editing '_ui-button.sass' for a 'ui-button' component, following established component stylesheet conventions.