ocelot-Social-Community/Ocelot-Social
1
0
Fork 0
mirror of https://github.com/Ocelot-Social-Community/Ocelot-Social.git synced 2026-01-13 16:34:39 +00:00
Code Issues Packages Projects Releases Wiki Activity
Ocelot-Social/gitbook-docs/webapp/scss.html
Tirokk 8ab725cd44 Update plug-in for 'tabs' to 'tabs2'
2023-08-15 14:47:29 +00:00

590 lines
20 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE HTML>
<html lang="" >
<head>
<meta charset="UTF-8">
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>SCSS · Ocelot.Social – Developer Documentation</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="description" content="">
<meta name="generator" content="GitBook 3.2.3">
<meta name="author" content="busFaktor() e.V.">
<link rel="stylesheet" href="../gitbook/style.css">
<link rel="stylesheet" href="../gitbook/gitbook-plugin-hints/plugin-hints.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="../gitbook/gitbook-plugin-tabs2/tabs.css">
<link rel="stylesheet" href="../gitbook/gitbook-plugin-search-pro/search.css">
<link rel="stylesheet" href="../gitbook/gitbook-plugin-splitter/splitter.css">
<link rel="stylesheet" href="../gitbook/gitbook-plugin-chapter-fold/chapter-fold.css">
<link rel="stylesheet" href="../gitbook/gitbook-plugin-highlight/website.css">
<link rel="stylesheet" href="../gitbook/gitbook-plugin-fontsettings/website.css">
<meta name="HandheldFriendly" content="true"/>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="apple-touch-icon-precomposed" sizes="152x152" href="../gitbook/images/apple-touch-icon-precomposed-152.png">
<link rel="shortcut icon" href="../gitbook/images/favicon.ico" type="image/x-icon">
<link rel="next" href="vue.html" />
<link rel="prev" href="html.html" />
</head>
<body>
<div class="book">
<div class="book-summary">
<div id="book-search-input" role="search">
<input type="text" placeholder="Type to search" />
</div>
<nav role="navigation">
<ul class="summary">
<li class="chapter " data-level="1.1" data-path="../">
<a href="../">
Introduction
</a>
</li>
<li class="chapter " data-level="1.2" data-path="../edit-this-documentation.html">
<a href="../edit-this-documentation.html">
Edit this Documentation
</a>
</li>
<li class="chapter " data-level="1.3" data-path="../neo4j/">
<a href="../neo4j/">
Neo4J
</a>
</li>
<li class="chapter " data-level="1.4" data-path="../backend/">
<a href="../backend/">
Backend
</a>
<ul class="articles">
<li class="chapter " data-level="1.4.1" data-path="../backend/graphql.html">
<a href="../backend/graphql.html">
GraphQL
</a>
</li>
<li class="chapter " data-level="1.4.2" data-path="../backend/neo4j-graphql-js.html">
<a href="../backend/neo4j-graphql-js.html">
neo4j-graphql-js
</a>
</li>
</ul>
</li>
<li class="chapter " data-level="1.5" data-path="./">
<a href="./">
Webapp
</a>
<ul class="articles">
<li class="chapter " data-level="1.5.1" data-path="components.html">
<a href="components.html">
Components
</a>
</li>
<li class="chapter " data-level="1.5.2" data-path="html.html">
<a href="html.html">
HTML
</a>
</li>
<li class="chapter active" data-level="1.5.3" data-path="scss.html">
<a href="scss.html">
SCSS
</a>
</li>
<li class="chapter " data-level="1.5.4" data-path="vue.html">
<a href="vue.html">
Vue
</a>
</li>
</ul>
</li>
<li class="chapter " data-level="1.6" data-path="../testing.html">
<a href="../testing.html">
Testing Guide
</a>
<ul class="articles">
<li class="chapter " data-level="1.6.1" data-path="../cypress/">
<a href="../cypress/">
End-to-end tests
</a>
</li>
<li class="chapter " data-level="1.6.2" data-path="testing.html">
<a href="testing.html">
Frontend tests
</a>
</li>
<li class="chapter " data-level="1.6.3" data-path="../backend/testing.html">
<a href="../backend/testing.html">
Backend tests
</a>
</li>
</ul>
</li>
<li class="chapter " data-level="1.7" data-path="../DOCKER_MORE_CLOSELY.html">
<a href="../DOCKER_MORE_CLOSELY.html">
Docker More Closely
</a>
</li>
<li class="chapter " data-level="1.8" >
<a target="_blank" href="https://github.com/Ocelot-Social-Community/Ocelot-Social-Deploy-Rebranding/blob/master/deployment/README.md">
Deployment
</a>
</li>
<li class="chapter " data-level="1.9" data-path="../CONTRIBUTING.html">
<a href="../CONTRIBUTING.html">
Contributing
</a>
</li>
<li class="chapter " data-level="1.10" data-path="../cypress/features.html">
<a href="../cypress/features.html">
Feature Specification
</a>
</li>
<li class="chapter " data-level="1.11" data-path="../CODE_OF_CONDUCT.html">
<a href="../CODE_OF_CONDUCT.html">
Code of conduct
</a>
</li>
<li class="chapter " data-level="1.12" data-path="../LICENSE.html">
<a href="../LICENSE.html">
License
</a>
</li>
</ul>
</nav>
</div>
<div class="book-body">
<div class="body-inner">
<div class="book-header" role="navigation">
<!-- Title -->
<h1>
<i class="fa fa-circle-o-notch fa-spin"></i>
<a href=".." >SCSS</a>
</h1>
</div>
<div class="page-wrapper" tabindex="-1" role="main">
<div class="page-inner">
<div id="book-search-results">
<div class="search-noresults">
<section class="normal markdown-section">
<h1 id="scss---code-guidelines">SCSS - Code Guidelines</h1>
<h2 id="we-use-classes-over-tags-and-ids">We use classes over tags and ids</h2>
<p>Never apply styles to <code>tags</code> or <code>ids</code> &#x2013; use <code>classes</code> instead!</p>
<p>Why?</p>
<ul>
<li>HTML tags are responsible for the document <em>structure</em>, not the looks</li>
<li>targeting HTML tags comes with performance issues</li>
<li>ids are responsible for identifying a unique element, not for styling it</li>
<li>ids have higher specificity than classes and therefore don&apos;t play well together</li>
<li>classes can be combined and reused while ids are unique</li>
</ul>
<p>For more background see the following articles on <a href="https://frontstuff.io/you-need-to-stop-targeting-tags-in-css" target="_blank">why not to style tags</a> and <a href="https://dev.to/clairecodes/reasons-not-to-use-ids-in-css-4ni4" target="_blank">why not to style ids</a>.</p>
<h2 id="we-use-design-tokens-instead-of-magic-numbers">We use design tokens instead of magic numbers</h2>
<p>In order to achieve a consistent look and feel we use a set of pre-defined <code>design tokens</code> to style our components, for example <code>colors</code>, <code>sizes</code> and <code>box-shadows</code>. These tokens are stored as <code>SCSS variables</code> and reused throughout the app.</p>
<p>So, instead of typing <em>pixel values</em> or <em>hex codes</em> make sure you use design tokens such as <code>height-header</code> or <code>color-input-border</code>.</p>
<h2 id="we-name-our-classes-after-components">We name our classes after components</h2>
<p>Our SCSS styles live within the corresponding component (see the <a href="https://vuejs.org/v2/guide/single-file-components.html" target="_blank">Vue.js docs for single-file components</a> for reference) and should therefore carry the same <em>unique</em> name.</p>
<p>Why?</p>
<ul>
<li>it clearly ties the styles to the one component</li>
<li>having unique class names means styles will not be accidentally overwritten in other files</li>
<li>we can avoid using <code>scoped CSS</code> which <a href="https://vue-loader.vuejs.org/guide/scoped-css.html#also-keep-in-mind" target="_blank">comes with performance caveats</a></li>
</ul>
<h2 id="we-use-variants-instead-of-overriding-styles">We use variants instead of overriding styles</h2>
<p>Components will sometimes need to look different depending on the context in which they are used &#x2013; a button might for example be <code>green</code> when it represents a call to action and <code>red</code> when it triggers a destructive action. Rather than making the <code>rounded-button</code> component <code>green</code> by default and then overriding the <code>color</code> for, say, the <code>delete-account</code> action &#x2013; use variants! Pass the <code>rounded-button</code> a prop, such as <code>color: danger</code>, and then apply the respective <code>variant class</code>.</p>
<p>Name variant classes with a dash prefix, such as <code>-danger</code>, then target them like this:</p>
<pre><code class="lang-scss"><span class="hljs-selector-class">.rounded-button</span> {
<span class="hljs-comment">/* other css styles */</span>
&amp;<span class="hljs-selector-class">.-danger</span> {
<span class="hljs-attribute">color</span>: <span class="hljs-variable">$color-danger</span>;
}
}
</code></pre>
<h2 id="we-style-within-the-component-we-position-when-we-use-it">We <em>style</em> within the component, we <em>position</em> when we use it</h2>
<p>In order to make components truly reusable it is important to limit their styles to, well, their actual <em>styling</em>. What color are they, how big is the text, what happens on <code>hover</code>, do they have a rounded border &#x2013; all that is part of it.</p>
<p>Margins, alignment and positioning on the other hand need to be defined in the <em>parent</em> because the same component might sometimes be aligned to the left, sometimes to the right and sometimes float above other content. For more details see the <a href="https://rscss.io/layouts.html" target="_blank">rscss guidelines</a>.</p>
<p>To do that, use the <code>child selector</code>, like this:</p>
<pre><code class="lang-scss"><span class="hljs-selector-class">.login-form</span> {
<span class="hljs-comment">/* other css styles */</span>
&gt; <span class="hljs-selector-class">.rounded-button</span> {
<span class="hljs-attribute">margin</span>: <span class="hljs-variable">$margin-small</span>;
justify-self: flex-end;
}
}
</code></pre>
<p>A special case are dimensions like <code>width</code> and <code>height</code>. If it is important that a component always has the same dimensions (the height of a button should be consistent, for example) define it <em>within the component</em> itself, if a component should have flexible dimensions (a card, for example, could stretch over the whole screen in one place and be limited to a certain width in another) define the dimensions <em>in the parent</em>.</p>
<h2 id="recommended-reads">Recommended reads</h2>
<p>For a deeper dive into the WHY and HOW have a look at the following resources which the above guidelines are based on:</p>
<ul>
<li><a href="https://rscss.io/index.html" target="_blank">rscss &#x2013; reasonable system for css stylesheet structure</a></li>
<li><a href="https://csswizardry.net/talks/2014/11/itcss-dafed.pdf" target="_blank">itcss &#x2013; inverted triangle architecture for css</a></li>
</ul>
</section>
</div>
<div class="search-results">
<div class="has-results">
<h1 class="search-results-title"><span class='search-results-count'></span> results matching "<span class='search-query'></span>"</h1>
<ul class="search-results-list"></ul>
</div>
<div class="no-results">
<h1 class="search-results-title">No results matching "<span class='search-query'></span>"</h1>
</div>
</div>
</div>
</div>
</div>
</div>
<a href="html.html" class="navigation navigation-prev " aria-label="Previous page: HTML">
<i class="fa fa-angle-left"></i>
</a>
<a href="vue.html" class="navigation navigation-next " aria-label="Next page: Vue">
<i class="fa fa-angle-right"></i>
</a>
</div>
<script>
var gitbook = gitbook || [];
gitbook.push(function() {
gitbook.page.hasChanged({"page":{"title":"SCSS","level":"1.5.3","depth":2,"next":{"title":"Vue","level":"1.5.4","depth":2,"path":"webapp/vue.md","ref":"webapp/vue.md","articles":[]},"previous":{"title":"HTML","level":"1.5.2","depth":2,"path":"webapp/html.md","ref":"webapp/html.md","articles":[]},"dir":"ltr"},"config":{"plugins":["-lunr","-search","-sharing","hints","tabs2","theme-simple@git+https://github.com/plugins-zander/gitbook-plugin-theme-simple.git","search-pro@git+https://github.com/plugins-zander/gitbook-plugin-search-pro.git","splitter@git+https://github.com/plugins-zander/gitbook-plugin-splitter.git","edit-link@git+https://github.com/plugins-zander/gitbook-plugin-edit-link.git","gtag@git+https://github.com/plugins-zander/gitbook-plugin-gtag.git","chapter-fold@git+https://github.com/plugins-zander/gitbook-plugin-chapter-fold.git","copy-code-button@git+https://github.com/plugins-zander/gitbook-plugin-copy-code-button.git"],"styles":{"ebook":"styles/ebook.css","epub":"styles/epub.css","mobi":"styles/mobi.css","pdf":"styles/pdf.css","print":"styles/print.css","website":"styles/website.css"},"pluginsConfig":{"chapter-fold":{},"splitter":{},"search-pro":{},"hints":{"danger":"fa fa-exclamation-circle","info":"fa fa-info-circle","tip":"fa fa-mortar-board","working":"fa fa-wrench"},"sitemap-general":{"prefix":"https://zlogs.net/gitbook-action/"},"fontsettings":{"theme":"white","family":"sans","size":2},"gtag":{"token":""},"tabs2":{},"highlight":{},"theme-simple":{"showLevel":false,"styles":{"ebook":"styles/ebook.css","epub":"styles/epub.css","mobi":"styles/mobi.css","pdf":"styles/pdf.css","print":"styles/print.css","website":"styles/website.css"}},"copy-code-button":{},"edit-link":{"label":"EDIT","base":"https://github.com/Ocelot-Social-Community/Ocelot-Social/edit/master/"},"theme-default":{"styles":{"website":"styles/website.css","pdf":"styles/pdf.css","epub":"styles/epub.css","mobi":"styles/mobi.css","ebook":"styles/ebook.css","print":"styles/print.css"},"showLevel":false}},"theme":"default","author":"busFaktor() e.V.","pdf":{"pageNumbers":true,"fontSize":12,"fontFamily":"Arial","paperSize":"a4","chapterMark":"pagebreak","pageBreaksBefore":"/","margin":{"right":62,"left":62,"top":56,"bottom":56}},"structure":{"langs":"LANGS.md","readme":"README.md","glossary":"GLOSSARY.md","summary":"SUMMARY.md"},"variables":{},"title":"Ocelot.Social – Developer Documentation","gitbook":"3.2.3","description":"Developer Documentation by Gitbook-Action"},"file":{"path":"webapp/scss.md","mtime":"2019-10-29T12:41:28.000Z","type":"markdown"},"gitbook":{"version":"3.2.3","time":"2023-08-15T14:47:24.081Z"},"basePath":"..","book":{"language":""}});
});
</script>
</div>
<script src="../gitbook/gitbook.js"></script>
<script src="../gitbook/theme.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="../gitbook/gitbook-plugin-tabs2/tabs.js"></script>
<script src="../gitbook/gitbook-plugin-search-pro/jquery.mark.min.js"></script>
<script src="../gitbook/gitbook-plugin-search-pro/search.js"></script>
<script src="../gitbook/gitbook-plugin-splitter/splitter.js"></script>
<script src="../gitbook/gitbook-plugin-edit-link/plugin.js"></script>
<script src="../gitbook/gitbook-plugin-gtag/plugin.js"></script>
<script src="../gitbook/gitbook-plugin-chapter-fold/chapter-fold.js"></script>
<script src="../gitbook/gitbook-plugin-copy-code-button/toggle.js"></script>
<script src="../gitbook/gitbook-plugin-fontsettings/fontsettings.js"></script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink