DEV Community: Maxime

Easily structure your Sass

Maxime — Mon, 11 Oct 2021 14:41:59 +0000

Hello everyone 👋,

Intro

A year ago, I published an NPM package to generate a Sass file structure at the root of a project.

The goal behind this idea was to help our dev team to have "one source of truth" regarding the way we organized our code. And it worked well at first. We all used it, to start a new project, and it became more maintainable.

But there was one big issue that we could not solve with this package, it was not flexible enough.

Because not all projects are the same, having to use the same template for all our projects was not ideal.

The solution: create a CLI to give more options to the devs, like choosing the path of installation, multiple templates, "helper" code, etc.

The CLI

The CLI generates a Sass file structure based on the 7-1 pattern. You can choose where you want to install it into your project. It comes with (variables, mixins, functions, and maps to generate helper CSS classes).

If you only want to file structure, but without any code, you can select the "clean" template. It will generate all the files, without any starter code.

Otherwise, you also have the option to remove the specific folder from the structure. Don't need a vendor or theme folder, no problem, simply select which folder you want to discard from the original structure.

Structure

scss
    │
    ├── abstracts
    │   ├── colors
    │   ├── fonts
    │   ├── index
    │   ├── mixins
    │   ├── spacing
    │   └── helper
    │
    ├── base
    │   ├── global.scss
    │   ├── shame.scss
    │   └── typography.scss
    │
    ├── components
    │   ├── alert.scss
    │   ├── banner.scss
    │   ├── buttons.scss
    │   ├── card.scss
    │   ├── forms.scss
    │   ├── icons.scss
    │   ├── menu.scss
    │   ├── modal.scss
    │   ├── progress.scss
    │   └── table.scss
    │
    ├── layout
    │   ├── footer.scss
    │   ├── grid.scss
    │   ├── header.scss
    │   ├── navigation.scss
    │   └── sidebar.scss
    │
    ├── pages
    │   └── home.scss
    │
    ├── themes
    │   └── dark.scss
    │
    ├── vendor
    │   └── normalize.scss
    │
    └── main.scss

Installation

Prerequisites

Node 14
Npm

You can install the package globally or execute it right away with npx.

Global install

npm i -g create-scss-cli

After that, you'll be able to use the create-scss-cli command in your project like so:

cs-cli

NPX

npx create-scss-cli

Documentation

👉 https://www.createscss.com/

👉 https://github.com/maximedaraize/create-scss-cli

👉 https://www.npmjs.com/package/create-scss-cli

Conclusion

I would really appreciate any feedback. This is a side-project but I have the intention to keep working on it. Contribution is welcome 🤙

Thanks for reading,

Max

📦 npm package that help you organize your sass

Maxime — Wed, 17 Jun 2020 21:34:26 +0000

Hi everyone,

I recently publish a npm package that create a scss directory structure into your repo.

It can be helpful when you start a new project and you don't want to spend too much time making folders and files to organize your styles.

🗂 Structure

     scss
        │
        ├── abstracts
        │   ├── functions.scss
        │   ├── helpers.scss
        │   ├── mixins.scss
        │   └── variables.scss
        │
        ├── base
        │   ├── global.scss
        │   ├── reset.scss
        │   ├── shame.scss
        │   └── typography.scss
        │
        ├── components
        │   ├── alert.scss
        │   ├── banner.scss
        │   ├── buttons.scss
        │   ├── card.scss
        │   ├── forms.scss
        │   ├── icons.scss
        │   ├── menu.scss
        │   ├── modal.scss
        │   ├── progress.scss
        │   └── table.scss
        │
        ├── layout
        │   ├── footer.scss
        │   ├── grid.scss
        │   ├── header.scss
        │   ├── navigation.scss
        │   └── sidebar.scss
        │
        ├── pages
        │   └── home.scss
        │
        ├── themes
        │   └── theme.scss
        │
        ├── vendor
        │
        └── main.scss

✨ Installation

node js is required -> download

# Install the package
npm i create-scss-cli

#execute the command with
cs-cli

Documentation

👉 https://www.createscss.com/
👉 https://github.com/maximedaraize/create-scss-cli
👉 https://www.npmjs.com/package/create-scss-cli

Conclusion

I would really apreciate any feedback. This is a side-projcet but I have the intention to keep working on it. Any help is welcome 🙂
Hope someone will find this useful 🤷‍♂️

Thanks for reading,

Max

CSS + Pokemon

Maxime — Fri, 15 May 2020 17:23:01 +0000

I wanted to make some pokemon with CSS based on the original image from Pokemon Yellow (yep! nostalgia... 👾).

Here's how I did it!

First I collected all pokemon images from the game.

If you zoom on the images you start to see every pixel that composes the Pokemon. The goal was to replicate that pixel grid in html and css.

Some drawings are bigger than other, but the average is 40px by 40px.

So I made a grid containing 1600 empty <div>... 😅

<div class="canvas">
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  ...
</div>

You could also create the <div class="pixel"> with javascript or jQuery if you dont want to add 1600 line of html in your development process.

//create 1600 div with "pixel" className
/* You could also simply write 1600 divs in
the HTML section with the class .pixel inside
the .canvas container */
for (let step = 0; step < 1600; step++) {
  //create a div
  var pixel = document.createElement("div");
  //select the container with canvas Class
  var canvas = document.querySelector(".canvas");
  //append the div to the container
  document.querySelector(".canvas").appendChild(pixel);
  //add a class to the div
  pixel.setAttribute("class", "pixel");
}

Next, just add a little bit of CSS to see the grid.

/*grid container made of 40 columns and 40 rows. 
  Each of them the create a square of 12px*/
.canvas {
  display: grid;
  grid-template-columns: repeat(40, 12px);
  grid-template-rows: repeat(40, 12px);
}

.pixel {
  border: 1px solid rgba(fuchsia, 0.2);
}

After this step you only need to "color-pick" the color of that pokemon and start filling the <div class="pixel"> with it.

Squirtle is compose of 3 color:

black (#000000)
a light blue (#D6E6FF)
a dark blue (#3AC5E6)

note that I did not fill the <div> with the color white.

The idea is to select a <div class="pixel"> with CSS based on its position.
For example the top left <div class="pixel"> is .pixel:nth-child(1) and the next one to its left is .pixel:nth-child(2).

//snippet example
.pixel:nth-child(171),
.pixel:nth-child(210),
.pixel:nth-child(178),
.pixel:nth-child(220),
.pixel:nth-child(302) {
  background: #3AC5E6;
}

Because there are 40 elements on each row and each column you can count it. But there is an easier way.

I made a small snippet that count the <div> position for me

$('.canvas').children('.pixel').hover(function() {
     var index = $(this).index() + 1;
  console.log(index);
});

When you pass your cursor hover a <div class="pixel">, it will output in the console its position number, so you can use it and color it based on the images yo have.

Here's the Codepen collection of pokemon I made so far 🙆‍♂️