Contents

• Description
• Highlights
• Install
• Placeholder
• Code comparison
• Utility placeholder implementation
• Usage
• Output
• License

Description

Goel is a sass placeholder library, allowing to marry functional and semantic approach in css. It will help you write clean, easy to read code, with DRY output.

Highlights

This approach comes with multiple benefits for front-end / ui developers.

• match semantic and functional CSS
• create developer-friendly class names using well-known methodologies like BEM, OOCSS
• use a functional approach to CSS
• use well-known architecture like ITCSS
• write clean CSS without unnecessary repetition
• write clean HTML without cluttering it with unnecessary classes
• stop wasting time to set up additional dependencies
• placeholders are not included in output = DRY code
• Tailwind CSS naming convention
• easy to set up and compose as you like
• easy to control how things look
• easy to extend (new placeholders, mixins, variables, etc.)
• clean and beautiful output, configure as you wish
• simple and minimal syntax

Install

npm install @michu1234/goel

Import GOEL.scss from @import 'node_modules/@michu1234/goel/GOEL/GOEL' to your SASS file

PLACEHOLDER

Sass has a special kind of selector known as a “placeholder”. It looks and acts a lot like a class selector, but it starts with a % and it's not included in the CSS output. In fact, any complex selector (the ones between the commas) that even contains a placeholder selector isn't included in the CSS, nor is any style rule whose selectors all contain placeholders,

// placeholders
%purple {
  color: purple;
}
%red {
 color: red;
}

p {
  @extend %purple;
}

span {
  @extend %purple;
}

h2 {
  @extend %purple;
}

h1 {
  @extend %purple;
}

h1, h2, span, p {
  color: purple;
}

Comparison

Let's compare functional and semantic approach

Implementation

1 GOEL placeholder consists of 1 CSS declaration

%flex-row {
  flex-direction: row;
}
%flex-row-reverse {
  flex-direction: row-reverse;
}
%flex-col {
  flex-direction: column;
}
%visible {
  visibility: visible;
}
%invisible {
  visibility: hidden;
}

Usage

<div class="menu">

	<div class="menu__item menu__item--green"></div>
	<div class="menu__item menu__item--green"></div>

</div>

.menu {
  width: 500px;
  padding: 20px 40px 20px 40px;

  @extend %flex;
  @extend %flex-col;
  @extend %font-bold;
  @extend %text-center;
  @extend %bg-black;
  @extend %c-white;

  &__item {
    @extend %underline;
    @extend %flex;
  }

  &--green {
    @extend %c-green;
  }
}

Output

.menu {
  @extend %flex;
}
.menu__block {
  @extend %flex;
}
.menu__wrapper {
@extend %flex;
}
.menu__list {
  @extend %flex;
}
.menu__list-item {
  @extend %flex;
}

.menu, .menu__block, .menu__wrapper, .menu__list, .menu__list-item {
  display: flex;
}

License

MIT