Freecodecamp: Creating freeCodeCamp's CSS Style guide

@raisedadead What do you think?

Thanks, are you aware of any way can lint these? Using any linters?

@raisedadead @tomasvn According to me the process of creating a CSS style guide and sticking to it will in long-term not yield useful results. React, Yarn, Babel and lots of other open source projects use Prettier and other similar extensions for their CSS Style formatting.

Instead of creating a style guide. We should tell our contributors to Install Prettier In their IDE/Code editor and we'll be good to go.
@raisedadead Thoughts on this?

Thanks, are you aware of any way can lint these? Using any linters?

Prettier works well ;). It warns you when you violate any CSS style rule.

Instead of creating a style guide. We should tell our contributors to Install Prettier In their IDE/Code editor and we'll be good to go.

Hiding from problems never helped anyone... 😅 !

I am strongly in favor of avoiding formatters and using linters instead. Automating things sound cool and easy, but they take away the key point of writing standard code.

IMHO, we being the community around learning should not shy away with fixing issues in code style pointed by linters, rather.

Also please note Prettier is an _Opinionated_ Code Formatter

According to me the process of creating a CSS style guide and sticking to it will in long-term not yield useful results.

I think, this is is an incorrect argument (feel free to prove me wrong if you have stats).

If you check the Airbnb JS style guide, JS Standard etc. they, have helper write standard code and are being used by thousands of companies, and devs everyday.

@raisedadead We're not hiding away from problems...! We can use linters but the same task can be done with a single key binding with Prettier so why we're trying to take a long run on it?

I think, this is is an incorrect argument (feel free to prove me wrong if you have stats).
If you check the Airbnb JS style guide, JS Standard etc. they, have helper write standard code and are being used by thousands of companies, and devs every day.

I strongly agree with you on this! Their JS style guides are really very helpful.

We're not hiding away from problems...! We can use linters but the same task can be done with a single key binding with Prettier so why we're trying to take a long run on it?

Because, we want to write standard code? Contributors are free to use any tools they like, but that does not dictate we do not need of a guide.

Anyways, lets keep this thread for constructive feedback on the guide, we can always have discussions in the chat instead.

@tomasvn RFC looks interesting, and since you are interested in the feedback, do you think it will be possible for you to look up some, established style guides and tooling that we can take inspiration from.

Because, we want to write standard code? Contributors are free to use any tools they like, but that does not dictate we do not need of a guide.

I'm with you on this too. Okay, let's go with a style guide and we can use stylelint as our linter.

@raisedadead stylelint seems fine 👍 As it would warn the contributor about incosistencies across his document

@tomasvn We just launched our new curriculum and learning platform. Are you still interested in helping with this?

All of our CSS is in need of a good refactor, and this would be a good opportunity to not only create a style guide but to turn around and immediately apply it to the project, and make sure all our repos are in accordance with it.

@QuincyLarson Sure, I can take some of my time and help you with refactoring the CSS, as the freecodecamp is quite a large codebase, just point me where should I start

@tomasvn That would be amazing!

freeCodeCamp doesn't have all that much CSS. freeCodeCamp's CSS is mainly located in "main.less". And we're using Bootstrap 3.0.

We may eventually move to Bootstrap 4.0 or just rewrite our CSS to use Flexbox. But for the time being, we're using React Bootstrap on several of our applications, and that is currently locked to Bootstrap 3.0. So I recommend just going in and cleaning up the existing custom CSS in main.less and making it less redundant and more logically arranged.

@QuincyLarson got it, and the main.less is located in client/less/main.less, is this the correct file?

@tomasvn Thanks for your patience - I just saw this. Yes - client/less/main.less should be the right file.

@tomasvn Need help with this? I'll be happy to contribute

@tomasvn have you had a chance to start working on this yet? If not, @borisyordanov Yes - we would welcome your contributions with this.

@borisyordanov sorry for delay, sure go ahead I have some problems running dev env on windows, so you can start, when I fix my stuff I can help you refactor it

@tomasvn I sent you an email, lets meet up in a chat and plan this. If you have trouble running the project i'd recommend going through the guide if you haven't already or ask for help on Gitter

If there is still need I can help with this

@Jgriebel1990 i couldn't get in touch with tomasvn so no progress has been done as far as i know. Feel free to take over

@jgriebel1990 feel free to take over, i wasnt able to get my copy working on windows machine, all i can do is a code review once you are done

@tomasvn it sounds like @Jgriebel1990 and @borisyordanov haven't gotten a chance to tackle this - are you still interested in helping with this?

@QuincyLarson I will try to make it work on windows, I still have issues of running it, If I won't be able to set my environment, just close the thread.

@tomasvn No worries - any luck getting it to run locally?

Related: https://github.com/freeCodeCamp/freeCodeCamp/issues/35081

@QuincyLarson No luck, running it locally

@tomasvn what issues did you come across when setting up locally.

@tomasvn Please read this - https://github.com/freeCodeCamp/freeCodeCamp/blob/master/docs/how-to-setup-freecodecamp-locally.md

@raisedadead With the updates to https://github.com/freeCodeCamp/design-style-guide, is this issue needed?

Its more on the roadmap. Eventually it will be the central resource for our UI components.

CSS Border Style
The border-style property specifies what kind of border to display.

The following values are allowed:

dotted - Defines a dotted border
dashed - Defines a dashed border
solid - Defines a solid border
double - Defines a double border
groove - Defines a 3D grooved border. The effect depends on the border-color value
ridge - Defines a 3D ridged border. The effect depends on the border-color value
inset - Defines a 3D inset border. The effect depends on the border-color value
outset - Defines a 3D outset border. The effect depends on the border-color value
none - Defines no border
hidden - Defines a hidden border
The border-style property can have from one to four values (for the top border, right border, bottom border, and the left border).

EXAMPLE-
p.dotted {border-style: dotted;} p.dashed {border-style: dashed;} p.solid {border-style: solid;} p.double {border-style: double;} p.groove {border-style: groove;} p.ridge {border-style: ridge;} p.inset {border-style: inset;} p.outset {border-style: outset;} p.none {border-style: none;} p.hidden {border-style: hidden;} p.mix {border-style: dotted dashed solid double;}

Hey! What's the progress on this? I am available to help!

@ManasMahanand, thank you for your interest.
It would be great if you could look into the available css linters, compare them and see if there is anything better than stylelint.
Then, add the linter to our repo and change the CSS files to make sure the repo is linting error free.

@ahmadabdolsaheb Will do!

@ahmadabdolsaheb Wait what do you mean add to repo?

Do you want me to install the linter as a dependency, like eslint is already?

Or is there a way of installing tests on github itself, so it won't allow merging unless the style guide is followed?

Ok, looks like stylelint is a good option itself. I am installing that.

For experimenting, I will set rules as suggested by OP. I will then remove all rules and open a pr. We can then discuss and set rules

https://stylelint.io/user-guide/rules/about

You can have a look at this link to see the types of rules that can be set

currently there is already a lint:css command that uses prettier. We can change it to use stylelint.

Any how, I have installed it, and it successfully detects errors based on rules set. Shall I open a PR?

No need to remove prettier, prettier has config for stylelint rules that you can use to extend prettier config file

Awesome. Will work on it tomorrow.

I didn't find prettier config for stylelint rules (or how to do that), but currently I have installed another package stylelint-config-prettier that will check for conflicts and will turn off any rules that does conflict.

What I am thinking is in lint:css command we can also run the stylelint command as well along with prettier

(Opinion) I feel that we can write all custom stylelint rules based on what makes sense for fcc, and even completely remove prettier. This is just an opinion, it is left to you guys to decide.

Thanks @ManasMahanand on your progress. I am tagging @ojeytonwilliams for a second opinion.

I think prettier does a good job with formatting, so I'd rather keep that. If we use https://github.com/prettier/stylelint-prettier then prettier is used as a plugin of stylelint and we get the best of both worlds.

This mirrors the approach we already use for JavaScript linting.