CSS Linter

Content

About   |    Description   |    Screenshots   |    Installing   |    Built with   |    Setup   |    Live Demo   |    Code examples Author

About

This project is a capstone project developed as a completion of Ruby section of Microverse main curriculum. It is a css lint tool intended to showcase Ruby programming Skills. The project has also been enhanced by adding Rspec tests to check each and every method written works as it was intended

Description

This tool provides useful css practices detecting the folllowing errors:

Empty line at the end of the css file(s)

Unnecssary trailing spaces at the end of lines in a css file(s).

Missing space before opening curly bracket

Inconsistent indentation

Missing semicolon

Screenshots

Screenshot of linter passing with no errors

Screenshot of linter displaying errors

🔧 Built with

• Ruby 2.7.0
• Rspec gem
• Colorize gem

🔴 Live Demo

Click here in order to see a Live Demo of this project.

🔨 Setup

• Fork the repo to your remote repository.
• Clone or download the repository to a local directory on your computer.
• To make the ministylelint file executable, using your terminal go to the project directory in your local machine and run the following commands
  • cd css-linter/bin (changes directory into the bin folder)
  • sudo chmod 755 ministylelint (this command adds execute permissions to the file)
  • ln -s $PWD/ministylelint /usr/local/bin (this creates a softlink, or an alias in OS X terms and enables you to run the file without prefixing it with the ruby command )
• To use the tool, run the following commands:
  • ministylelint <filename> Eg: ministylelint styles/style_without_error.css and this checks only the specified file
  • ministylelint (this checks all the css files in the working directroy)
  • For quick test, run the following commands
    • ministylelint styles/style_with_errors_1.css
  • If all fails
    • you should be in the root directory of the project and run these commands
    • ruby bin/ministylelint styles/style_without_error.css (to check one file)
    • ruby bin/ministylelint (to check multiple files)

🛠 Installing

• The following command works if you have ruby and bundler installed in your machine.
  • bundle install

Good and Bad code examples

Good Code example

Here is an example of good code with correct usage of syntax, spaces and indentation.

.newsletter-signup {
  font: bold 18px/18px 'Roboto Condensed', sans-serif;
  padding: 20px;
  background-color: #f4f5f6;
  max-width: 300px;
  margin: 0 auto 30px;
}

Bad Code example -empty line at the end of the css file(s)

.newsletter-signup {
  font: bold 18px/18px 'Roboto Condensed', sans-serif;
  padding: 20px;
  background-color: #f4f5f6;
  max-width: 300px;
  margin: 0 auto 30px;
}

Bad Code example -missing semicolon

.newsletter-signup{
  font: bold 18px/18px 'Roboto Condensed', sans-serif;
  padding: 20px;
  background-color: #f4f5f6
  max-width: 300px;
  margin: 0 auto 30px;
}

🔨 Testing

To run the tests described for each method:

• change directory to the root of the project (cd into the project folder)
• from terminal run the command rspec
• to run a specific test rspec ./spec/space_scan_spec.rb:70 (here 104 is the line number of the method)

Result should be similar to:

SpaceScanner

#space_before_curly_bracket_scan

should return nil if there is a space before the opening curly bracket.

should return an error message if there is a space before the opening curly bracket

#trailing_space_scan

should return an error messages if there is a trailing space.

should return nil if there is no trailing space

✒️ Author

👤 Temesghen Tekeste

• Github: @temesghentekeste
• Twitter: @temesghentekes1
• Linkedin: temsghen-tekeste-bahta-8b5243193

🤝 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.org
• The Odin Project