Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

create a style guide including html, css, sass, javascript, and react. #220

Open
JonDevOps opened this issue May 29, 2019 · 1 comment
Open

Comments

@JonDevOps
Copy link
Member Author

Waterlgndx said:

I think we should create a style guide for this repository.
Since bootstrap increases the density of html code white space between logical chunks should be permitted. Ex:

        <a class="dropdown-item dropdown-list-item" href="https://discord.gg/ckQ52gA"
            target="_blank" rel="noopener noreferrer">Discord Chat!!!</a>

        <a class="dropdown-item dropdown-list-item" href="https://www.facebook.com/groups/w3develops/"
            target="_blank" rel="noopener noreferrer">Facebook Group</a>```
I believe the space in between each item makes it easier to read.  This code will be frequently updated so when it's important to know that there's one item the extra space helps amplify that and is easier on the eyes (and mental load). 

Terminating lines before 80th Column: Another important item is with regard to how far out items should go.  Perhaps this is a traditional academic view but normally column 80 is significant and code isn't traditionally supposed to run past it.  In html there are sometimes long URLs, these tend to be less important with regards to needing to be read.  One starts to read it and says "I get the point already!"  Anyway URLs can go past this 80th column, just be sure to wrap after the end of the href.

Indentation: Traditional thought is when you open a tag there should be an indentation underneath the item.  I believe there are exceptions to this.  For example a stray `<div>` that is used as a container or to mark a logical division between items.  This could be placed at the beginning of a chunk of code, an extra line break should be applied before and after the `div` tags.
ex:
```</section>

   <div>
   <p> some sort of text would go here I guess... </p>
   <p> some more text maybe </p>
    </div>

   <section>```

I'm not sure what else we should have.  HTML can quickly become a mess.  If you have any style ideas that you would like to suggest feel free to comment here!  I'm sure there are also templates for styles for each language and I think we should check into that as well.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant