@michu1234/goel

1.0.8 • Public • Published

Goel logo

   

Goel logo

GOEL

Utility SASS Placeholders

GOEL is an SCSS library, which consists of multiple placeholders, build in utility/functional/atomic style.

Contents

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

goel comparison

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

Dependents (0)

Package Sidebar

Install

npm i @michu1234/goel

Weekly Downloads

1

Version

1.0.8

License

MIT

Unpacked Size

14.8 kB

Total Files

18

Last publish

Collaborators

  • michu1234