skills.rest
sinfin
sinfinOFFICIAL
Explore all skills by this author →
WebsiteGitHub

folio-scss

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
One-click install
npx skills add https://github.com/sinfin/folio --skill folio-scss
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Software Engineering Skills→
sinfinsinfin
10

folio-testing

Provide Ruby/Rails testing guidelines for the Folio CMS.

Official
Advanced
partme-aipartme-ai
610

dart-sass

Compile Sass/SCSS files to CSS with configurable output styles.

Official
Intermediate
alongor666alongor666
1

component-styling

Generate BEM-compliant responsive CSS templates for Vue components.

Community
Basic
t-stringst-strings

Frontend CSS

Enforce frontend CSS standards for consistent styling and maintainability.

Official
Basic