CSS Linter

Ruby Capstone Project --> Build your own linter

Explore the docs »

- Report Bug - Request Feature -

Table of Contents

• About the Project
  • Built With
  • Rules
  • Usage
  • Automated Test
• Video Presentation
• Contributors
• Contributing
• Acknowledgements
• License

About The Project

This is the Ruby Capstone Project required at the end of Ruby module in Microverse Curriculum. Specifically is a CSS Linter with the purpose to check for spacing, indentation and format errors.

Rules

Indentation

• 2 space indentation rule

bad code:

  img {
  width: 700px;
  max-width: 100%;
}

good code:

  img {
    width: 700px;
    max-width: 100%;
  }

Line Format

• One line checking
• Line missing between css blocks

bad code:

p {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 14px;
}
a {
  color: #111111;
  font-size: 16px;
}

good code:

p {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 14px;
}

a {
  color: #111111;
  font-size: 16px;
}

Spacing

• Checking for missing spacing after : or ,
• Checking for missing spacing after { or }
• Checking for line break after { or } and after each property declaration

bad code:

a,p{color: #111111; font-size: 16px;}
div{color: #222222; font-size: 18px;}

good code:

a {
  color: #111111;
  font-size: 16px;
}

div {
  color: #222222;
  font-size: 18px;
}

Usage

The CSS Linter does basic syntax checking, as well as applying a set of rules to the code and throws back an error if bad syntax is found. The throwback error is being printed out indicating the line and column of the specific syntax issue.

Examples

• Wrong Indentation, expected n spaces
• Spacing, expected single space before '{' and '('
• Spacing, expected single space after ')' and ':' and ','
• Line Format, Expected line break after '{' and '}' and ';'
• Line Format, Expected one empty line after '}'

To test out CSS Linter you need to:

• have Ruby installed on your computer
• download or clone this repo:
  • Clone with SSH:

  git@github.com:rammazzoti2000/Ruby-capstone-project.git
  

  • Clone with HTTPS:

  https://github.com/rammazzoti2000/Ruby-capstone-project.git
  

• Navigate to root directory of the repo and run:

$ bin/main path_to_file.css (path_to_file being the file you want to check for linters)

Automated Test

• Run the command and see the output

$ bundle exec rspec

Built With

This project was built using these technologies.

• Ruby
• Rspec
• Rubocop
• Atom

Video Presentation

Check out full presentation here

Potential future features

• Extend the linter to more complex syntax
• Improve the terminal interaction
• Make it an installable gem

Contributors

👤 Alexandru Bangau

• LinkedIn: Alexandru Bangau
• GitHub: @rammazzoti2000
• E-mail: bangau.alexandru@gmail.com

🤝 Contributing

Contributions, issues and feature requests are welcome! Feel free to check the issues page

Show your support

Give a ⭐ if you like this project!

Acknowledgements

• Microverse
• The Odin Project
• Ruby Documentation

📝 License

This project is MIT licensed.