castlecss-docs/views/style-guidelines.html

Documentation website for CastleCSS

{% set currentPageId = 'guidelines' %}{% set pageTitle = 'About - CastleCSS' %}{% include "inc/header.html" %}

	<!-- Main -->
	<div class="b0_12 b4_14 b4_push_01">
		<div class="p p-b3-3x">
			<div class="block">
				<h1>Style guidelines</h1>
				<p class="intro">The way to structured SCSS</p>
			</div>
			<div class="block">
				<h2>Sass-lint</h2>
				<p>For style verification we use <a href="https://github.com/sasstools/sass-lint" target="_blank">sass-lint</a>. This ensures us to give you guidelines and warnings about writing mistakes in order, whitespace, nesting, etc.</p>
				<p>We have included a sass-lint.yml in the packages and it's connected to the package-json.</p>
				<p>Example in Visual Studio Code:<br />
					<img src="img/output-example.png" class="full-img" alt="">
				</p>
			</div>
			<div class="block">
				<h3>See it directly in your editor</h3>
				<p>Sass-lint has a plugin for almost every editor, this means you just have to download it and you will see the output:</p>
				<ul>
					<li><a href="https://atom.io/packages/linter-sass-lint" target="_blank">Atom</a></li>
					<li><a href="https://github.com/skovhus/SublimeLinter-contrib-sass-lint" target="_blank">Sublime Text</a></li>
					<li><a href="https://github.com/petetnt/brackets-sass-lint" target="_blank">Brackets</a></li>
					<li><a href="https://github.com/idok/sass-lint-plugin" target="_blank">IntelliJ IDEA, RubyMine, WebStorm, PhpStorm, PyCharm</a></li>
					<li><a href="https://marketplace.visualstudio.com/items?itemName=glen-84.sass-lint" target="_blank">Visual Studio Code</a></li>
					<li><a href="https://github.com/gcorne/vim-sass-lint" target="_blank">Vim</a></li>
				</ul>
			</div>
		</div>
	</div>
	<!-- End main -->

{% include "inc/footer.html" %}