Language
Create a new .SCSS file
When creating a new .SCSS file, you need to make a decision on where it belongs. Variables, Mixins, Includes or Pages.
Once you have decided where it belines, create your .SCSS file in there
The file name must be prepended with an underscore "_". This will stop it being compiled as its own .CSS file.
Once the file has been created, for it to be compiled in with the main CSS, it needs to be included in styles.scss
Open styles.scss and in the top of the file, there will be all the other includes. You can include it in the specified area there
DO NOT place it some where random in the files, or include it in a sub file else where. The files must be included within styles.scss so that the other things such as variables and mixins can be hierarchically trickled down through the include structure.
Create page specific styles
To create your page specific styles, you need to first create your .SCSS file. - see Create a new .SCSS file
At the start of your page specific styles, you need to define your <body> class. - see bodyClass for more information
You define your class like so:
.directory__filename
If however, you would like to assign styles specifically to a group of pages (lets say, the profile page for example) you can define just the class directory.
Example:
Each page will have a body class of "profile__[pagename]".
We can use the ^ in CSS to tell it to "select the body where its class starts with 'profile__'"
body[class^="profile__"] {
}
You can then next your page specific CSS within this, and continue to your hearts content.
Clear Floats (clearfix)
No longer do you need to create a random DOM element to clear floats. The time has come where we can simply rethink how it works!
What we will do instead is imagine that the floating objects just need to have a wrapper around them to tell its containing element to hold them properly, like a box.
so you can now just add a class of "group" to a containing dom element.
Q: What is this doing?
A: I'm glad you asked! What this is actually doing is creating a pseudo element of ":after" at the end of the dom element.
Example:
.group:after {
content: "";
display: table;
clear: both;
}
for more information CSS tricks - Clearfix
Use Calc (with and without the mixin)
calc() is your life saver with CSS - you want a 4 column layout with margins? Use maths! width: calc(25% - 10px);
However... some bundlers and SCSS dont work nicely together, and don't like calc() as a whole, so it breaks. There are some work arounds, but basically you need to add some extra stuff in to make it work
default: calc(25% - 10px)
You convert it to a string by wrapping it in ~"". This then becomes
string: ~"calc(25% - 10px)";
Q: What is the bundler doing?
A: The bundler is minifying the code, and removing the space between the % and the equation. This then This then gets rendered as
render: calc(25%- 10px);
which breaks in Chrome. (for some reason, IE is fine with this...)
So to fix this issue, we need to wrap the % sign in ()'s to make it work. This then becomes
Final product: ~"calc((25%) - 10px)";
Q: Ok, so were good now?
A: WRONG! - the bundler doesnt care about you, and if you want to make maths with a "+", then it removes the space again... doesnt care about the ()'s. This then becomes
strong: ~"calc((25%)+ 10px)";
which breaks in Chrome. (for some reason again, IE is still fine with this...)
Q: This sucks... how do we fix it?
A: Well, we need to turn that frown, upside down! ... by hitting it with a double negative. This then becomes
Final Final product: ~"calc((25%) - -10px)";
or...
We just use the mixin i made, and just type .calc(@param, @val1, @equation, @val2)
This would be
.calc(width, 100%, "+", 10px);
Its best to just use the mixin, but if you need to write a longer equation for some reason and calculate many fields, then the mixin wont work. For example, if you want to calculate the body height minus the header and footer
height: calc((100%) - @{headerHeight} - @{footerHeight});
Needless to say, if you arnt using a bundler, the no need to worry... carry on as you were!
Create a panel
The white boxes are called 'panels' in the case of this project. The main use is to hold the content segment.
Each segment will be a 'DIV' with a class of "panel__block"
<div class="panel__block">
<h2 class="panel__title">TITLE</h2>
<div class="panel__content">
<!--panel content goes here-->
</div>
</div>
If the panel__block DOM element is beside a sidebar block, it will automatically fit to the remaining width beside the sidebar.
<section class="main__content">
<div class="sidebar__wrapper">
<h2 class="sidebar__title">OPTIONS</h2>
<!--sidebar content goes here-->
</div>
<div class="panel__block">
<h2 class="panel__title">TITLE</h2>
<div class="panel__content">
<!--panel content goes here-->
</div>
</div>
</section>
Create an icon
<i class="icon"></i>