Family.scss

How to create a                    Open Source project

http://lukyvj.github.io/family.scss

#BADA55

Lucas Bonomi

@LukyVj

Frontend Developer

at              

CSS, Sass, Javascript, Open-source

Member of @bullgit

Family.scss

What is it ?

@LukyVj

It's a Sass mixin library, that makes the use of nth-x selector easier

⚡️

Family.scss

What is a NTH selector ?

@LukyVj

it's a :pseudo-class selector, that will allow you to select one or more element, based on their order of appearance into the parent , and some other parameters you define

Family.scss

What is a NTH selector ?

@LukyVj

Family.scss

What's the use of it ?

@LukyVj

Just see it as a set of shorthand

ul li {
  @include first(3){
    @include active;
  }
}

ul li:nth-child(-n + 3) { 
  background: red; 
  color: #fff; 
}

Family.scss

What's the use of it

@LukyVj

Just see it as a set of shorthands

ul li {
  @include between(3, 6){
    @include active;
  }
}

ul li:nth-child(n+3):nth-child(-n+6) { 
  background: red; 
  color: #fff; 
}

Family.scss

@LukyVj

Some mixins takes one or more parameters

@include after-first(5)

@include odd-between(3, 13)

@include all-but(5)

@include n-between(3, 5, 30)

Some others didn't

@include odd()

@include last-child()

@include first-last()

@include unique()

Family.scss

@LukyVj

And there is also quantity-queries 🎉

@include first-of(10)

@include at-least(10)

@include last-of(10)

@include at-most(10)

@include in-between(5,10)

Family.scss

The open source side

@LukyVj

1. Solve a problem
2. Ask for feedback
3. Care about design
4. Prepare the release 
5. Share, wisely
6. Interact with your community

Family.scss

 Solve a problem, simply

@LukyVj

One of the key of successful OS

project is to keep it simple ( stupid ).

If you have to spend more time on something, it’s the documentation.

KISS

📚🤓

Family.scss

Ask for & get feedbacks

@LukyVj

Getting feedback is the best way to know

what people think about your project

It can be negative, but that’s one of the goal.

It will help you getting better

Family.scss

Care about design

@LukyVj

A beautiful design will please your users

Make it personal and unforgettable

✨

Family.scss

Care about design

@LukyVj

Family.scss

Care about design

@LukyVj

Family.scss

Care about design

@LukyVj

Family.scss

Care about design

@LukyVj

Family.scss

Prepare the release

@LukyVj

Family.scss

Prepare the release

@LukyVj

Ask people to get involved

You can ask people with more followers than you to post it, to talk about it

🗣

🗣

Family.scss

Share it, wisely

@LukyVj

@LukyVj

@LukyVj

Family.scss

Interact with your community

Github provides some great tools to interact with your community, like listing issues or pull requests

@LukyVj

Family.scss

Interact with your community

New features, Bugs fixing, New ideas, YOU CARE And so do they

@LukyVj

Family.scss

 🎉 BENEFITS 🎉

Family.scss

The open source side

@LukyVj

1

2

3

4

5

6

Family.scss

The open source side

@LukyVj

🏆

Family.scss

The open source side

@LukyVj

Holmes, by @Haroenv

Family.scss

Recap

@LukyVj

1. Solve a problem
2. Ask for feedback
3. Care about design
4. Prepare the release 
5. Share, wisely
6. Interact with your community

Thank you

@LukyVj

🙏