Lately I had to develop the front-end part of a mobile app, the mockup was challenging and I had to figure out a few tricks for CSS.
But before sharing these tricks with you, I’ll make a short introduction to some SCSS functionalities.
Variables
SCSS allows the use of variables, which can be declared prepending the $ sign.
What are exactly variables? They are basically a container where you can put a value to be used in different parts of the project.
Example
$primary-color : #790f26;
$padding-default : 0 15px 10px;
.class {
color : $primary-color;
padding : $padding-default;
}
Nesting
In SCSS it is possible to nest classes one within the other, just like we do in html.
We can’t do this with plain CSS, SCSS allows us to follow the html structure closely and thus write our styles more easily.
Example
<div class="wrap-image">
<img src="img/home/service-background.jpg" class="img-istructions">
<p class="text-image">
Example text <span>example</span>
</p>
</div>
.wrap-image {
.img-istructions {
...
}
.text-image {
...
span {
...
}
}
}
Mixin
A mixin allows for groups of CSS declarations that you want to reuse throughout the site.
Example
@mixin translate ($x, $y) {
-webkit-transform : translate($x, $y);
-ms-transform : translate($x, $y);
transform : translate($x, $y);
}
.class {
@include translate(-50%, -50%);
}
//transform in css
.class {
-webkit-transform : translate(-50%, -50%);
-ms-transform : translate(-50%, -50%);
transform : translate(-50%, -50%);
}
@mixin transition($property, $duration, $easing) {
-webkit-transition: $property $duration $easing;
-moz-transition: $property $duration $easing;
-ms-transition: $property $duration $easing;
-o-transition: $property $duration $easing;
transition: $property $duration $easing;
}
.class {
@include transition(all, 0.3s, ease-in-out);
}
//transform in css
.class {
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: $all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
Import
To keep the code more manageable SCSS has an option to import that serves to divide SCSS in more files, and then concatenate them to run a single file.
Example
//File _menu.scss
nav {
margin: 0;
padding: 0;
}
//File application.scss
@import 'menu';
body {
font : 10px Arial, sans-serif;
background-color : #303030;
}
Css file compiled
nav {
margin: 0;
padding: 0;
}
body {
font : 10px Arial, sans-serif;
background-color : #303030;
}
This was a brief introduction to SCSS.
Now some nifty Tricks.
Footer Sticky
First there is the question of the list footer Sticky
Example
SCSS
$footer-height : 200px;
// Set container
.container {
min-height : 100%;
position : relative;
padding : 0;
// Set content
.content {
left : 0;
height : 100%;
width : 100%;
position : relative;
padding-bottom : $footer-height;
}
// Set footer
.footer {
position : absolute;
bottom : 0;
left : 0;
width : 100%;
height : $footer-height;
}
}
The trick is to set the container in position absolute and min-height 100%,
for the container instead height is set to 100% and padding-bottom set height of the footer.
Arrow tab
The second trick is to add the tab indicator to an arrow as below
Example
SCSS
$color-gray-smoke : #303030;
.arrow_box {
position : relative;
background : $color-gray-smoke;
&:after {
// position
top : 100%;
left : 50%;
border : solid transparent;
content : " ";
height : 0;
width : 0;
position : absolute;
// Color
border-color : rgba(48, 48, 48, 0);
border-top-color : $color-gray-smoke;
// size arrow
border-width : 15px;
margin-left : -15px;
}
}
In this project we used the Bootstrap framework, so the styles mentioned above should have the following classes to make sure that when you click on the arrow tab they get active.
.nav-tabs {
li.active {
...
...
&:after {
...
...
}
}
}
Data attribute
The third round is to crop images and add a number to the images after the text with the data attribute
Example
HTML
<div class="wrap-image">
<img src="img/home/service-background.jpg" class="col-xs-12 img-responsive img-istructions text-center">
<span class="text-center col-xs-12 text-box text-round-image" data-number=“1">
Example text
</span>
</div>
SCSS
@mixin translate ($x, $y) {
-webkit-transform : translate($x, $y);
-ms-transform : translate($x, $y);
transform : translate($x, $y);
}
.wrap-image {
position : relative;
display : table;
width : 300px;
height : auto;
text-align : center;
color : #fff;
.image {
// Css cropped circle image
border-radius: 50%;
}
.text-round-image {
// border top and bottom
border : 1px solid #fff;
border-style : solid none;
display : table-cell;
font-size : 2em;
// position
top : 50%;
position : absolute;
@include translate(-50%, 0);
width : 290px;
}
.text-box:after {
// data attribute
content : attr(data-number);
// position
position : absolute;
top : 110%;
text-align : center;
display : block;
left : 50%;
@include translate(-50%, 0);
// Size
height : 38px;
width : 38px;
// border
border : 2px solid #fff;
border-radius : 50%;
// Fonts
font-size : 1.6em;
font-weight : normal;
line-height : 1.1em;
}
}
Vertical Align
The fourth is to center text vertically
HTML
<div class="element">
<p>Example text</p>
</div>
SCSS
.element {
display : table;
height : 250px;
width : 250px;
background : black;
margin : 20px;
text-align : center;
p {
display : table-cell;
margin : 0;
color : white;
vertical-align : middle;
}
}Thanks for reading.
Leave a Reply