CSS for Developers

CSS for Developers
MD. Sayyedul Islam
Software Engineer
Nascenia Ltd.

CSS Box Model
All HTML elements can be considered as boxes. It includes:
Content (text, images)
Padding
Border
Margin
div {
border: 25px solid orange;
padding: 25px;
margin: 25px;

CSS3 Box Sizing
By default, the width and height of an element is calculated like this:
width + padding + border = actual width of an element
height + padding + border = actual height of an element
.div1 {
width: 300px;
height: 100px;
border: 1px solid blue;
padding: 20px;
}
Calculated width: 300(original width) + 40(padding-left: 20 + padding-right: 20) + 2(border-left: 1 + border-
right: 1) = 342px
Calculated height: 100(original height) + 40(padding-top: 20 + padding-bottom: 20) + 2(border-top: 1 +
border-bottom: 1) = 142px

CSS3 Box Sizing (continued..)
.div2 {
width: 300px;
height: 100px;
border: 1px solid blue;
padding: 20px;
box-sizing: border-box;
}
Make it global:
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
}
:after, :before {
}

Float & Clear
<div class="box-section">
<div class="box pull-left">Div 1</div>
</div>
.box {
width: 50%;
height: 100px;
padding: 20px;
}
.pull-left {
float: left;
}
.box-section {
padding: 20px;
background: orange;
}

Float & Clear (continued..)
Solution 1:
<div class="box-section">
<div class="clear"></div>
</div>
.clear {
clear: both;
}
Solution 2 (better):
<div class="box-section clearfix">
</div>
.clearfix:before,
.clearfix:after {
display: table;
content: " ";
}
.clearfix:after {
clear: both;
}

CSS Pseudo-elements
A CSS pseudo-element is used to style
specified parts of an element.
Some pseudo-elements are:
:first-letter
:first-line
:selection
:before
:after
<h1>This is a heading</h1>
h1:before {
content: url('smiley.gif');
}
<ul>
<li><a href=”#”>Home</a></li>
<li><a href=”#”>About Us</a></li>
<li><a href=”#”>Contact</a></li>
</ul>
li:after {
content: '/';
}

CSS Pseudo-classes
A pseudo-class is used to define a special state of an element.
Some pseudo-classes are:
:hover
:focus
:first-child
:last-of-type
:not(selector)
:nth-child(n)
:nth-of-type(n)

The Difference Between :nth-child and :nth-of-type
<section>
<h1>Words</h1>
<p>One</p>
<p>Two</p>
<p>Three</p>
<p>Four</p>
</section>
:nth-child(n) - p:nth-child(2)
Selects every <p> element that is the second child of its
parent
:nth-of-type(n) - p:nth-of-type(2)
Selects every <p> element that is the second <p>
element of its parent
p:nth-child(2) { color: red; }
p:nth-of-type(2) { color: red; }

Some CSS Selectors
<div id="container">
<ul>
<li> List Item
<ul>
<li> Child </li>
</ul>
</li>
<li> List Item </li>
</ul>
</div>
#container ul {
border: 1px solid white;
}
#container > ul {
border: 1px solid white;
}
The difference between the standard X Y and X > Y is
that the latter will only select direct children.

Some CSS Selectors (continued..)
ul + p {
color: red;
}
X + Y will select only the element that is placed
immediately after the former element.
ul ~ p {
color: red;
}
X ~ Y will select, referring to our example above,
any p elements, as long as they follow a ul

Position
Mainly, there are 4 values:
Static: Default value. Elements render in order, as they appear in the document
flow
Relative: The element is positioned relative to its normal position
Absolute: The element is positioned directly in relation to their containing
parent whom is relatively or absolutely positioned.
Fixed: The element is positioned relative to the browser window

Position: static
Considering this HTML:
<div class="box-set">
<div class="box box-1">Box 1</div>
</div>
CSS:
.box-set {
background: #eaeaed;
position: static;
}
.box {
position: static;
}

Position: relative & absolute
.box-set {
}
.box-1 {
left: 10px;
top: 10px;
}
.box-2 {
bottom: 10px;
left: 70px;
}
.box-3 {
left: 130px;
top: 10px;
}
.box-4 {
bottom: 10px;
left: 190px;
}
.box-set {
min-height: 160px;
position: relative;
}
.box {
position: absolute;
}
.box {
position: relative;
}

Position: fixed
.box-set {
min-height: 160px;
}
.box {
position: fixed;
}

Z-Index
.box-set {
min-height: 160px;
position: relative;
}
.box {
position: absolute;
}
.box-1 {
left: 10px;
top: 10px;
}
.box-2 {
bottom: 10px;
left: 70px;
z-index: 3;
}
.box-3 {
left: 130px;
top: 10px;
z-index: 2;
}
.box-4 {
bottom: 10px;
left: 190px;
z-index: 1;
}

Display
<div>
Sample text………... <span class="different-
text">Max und Moritz</span> …….. Sample text
</div>
.different-text { display: inline; }
.different-text { display: inline-block; }
.different-text { display: block; }

Flexible Box Model
<div class="container">
<div class="box">1</div>
</div>
.container {
display: flex;
}
.box {
width: 200px;
height: 200px;
margin: auto;
}

Flexible Box Model (continued..)
Order:
.box:nth-child(1) {
order: 2;
}
.box:nth-child(2) {
order: 3;
}
.box:nth-child(1) {
order: 1;
}

Equal Length Columns:
<div class="column-container">
<div class="column">
<p>Sample text...</p>
</div>
</div>
</div>
</div>
.column-container {
display: flex;
align-items: stretch;
}
.column {
width: 33%;
padding: 20px;
}

Vertical Centering:
<div class="box vertical-center-container">
Sample Text
</div>
CSS Flexible box Reference:
https://css-tricks.com/snippets/css/a-guide-to-flexbox
https://paulund.co.uk/css-flexbox
.vertical-center-container {
display: flex;
align-items: center;
}

CSS calc() Function
<div class="row">
<div class="col-sm-2">
<img src="images/person.jpg" alt="Person"
class="person-img img-responsive" />
</div>
</div>
</div>
.person-img {
width: 50px;
}

CSS calc() Function (continued..)
<div class="clearfix">
<div class="person-img-block pull-left">
<img src="images/person.jpg" alt="Person"
class="person-img img-responsive" />
</div>
<div class="person-info pull-left">
</div>
</div>
.person-img-block {
width: 50px;
margin-right: 20px;
}
.person-info {
width: calc(100% - 70px);
}

<div class="row">
<div class="col-sm-6 col-sm-offset-3">
<div class="content">
</div>
</div>
</div>
.content {
padding: 20px 25px;
border: 1px solid #eee;
background-color: #f1f1f1;
color: #333;
}

<div class="content">
</div>
.content {
width: 500px;
margin-left: calc((100% - 500px)/2);
padding: 20px 30px;
border: 1px solid #eee;
color: #333;
}

PX, EM or REM?
px: The pixels are an absolute unit of measurement. In
practice, they aren’t the same length everywhere because
different devices treat them differently, but on each device a
pixel is always the same.
em: Relative to the font-size of the element (2em means 2
times the size of the current font).
rem: Relative to font-size of the root element.

PX, EM or REM? (continued..)
Rems are better.
Px are still safe.
Reference:
https://benfrain.com/just-use-pixels
http://engageinteractive.co.uk/blog/em-vs-rem-vs-px
https://zellwk.com/blog/media-query-units
https://alastairc.ac/2017/04/px-em-or-rem-media-queries-different-conclusion

Legible Font Sizes
body {
font-size: 16px;
}
h2 {
font-size: 32px; /* 200% of the baseline */
}
.large {
font-size: 20px; /* 125% of the baseline */
}
.medium-small {
font-size: 13.6px; /* 85% of the baseline */
}
body {
font-size: 1rem; /* 16px */
}
h2 {
font-size: 2rem; /* 32px */
}
.large {
font-size: 1.25rem; /* 20px */
}
.medium-small {
font-size: 0.85rem; /* 13.6px */
}
Reference:
https://developers.google.com/speed/docs/insights/UseLegibleFontSizes

Web Fonts (font-face)
Deepest Possible Browser Support:
@font-face {
font-family: 'MyWebFont';
src: url('webfont.eot'); /* IE9 Compat Modes */
src: url('webfont.eot?#iefix') format('embedded-
opentype'), /* IE6-IE8 */
url('webfont.woff2') format('woff2'), /* Super Modern
Browsers */
url('webfont.woff') format('woff'), /* Pretty Modern
Browsers */
url('webfont.ttf') format('truetype'), /* Safari,
Android, iOS */
url('webfont.svg#svgFontName') format('svg'); /*
Legacy iOS */
font-weight: normal;
font-style: normal;
}
Practical Level of Browser Support:
@font-face {
font-family: 'MyWebFont';
src: url('myfont.woff2') format('woff2'),
url('myfont.woff') format('woff');
font-style: normal;
}
body {
font-family: 'MyWebFont', Fallback, sans-serif;
}

Web Fonts (font-face) (continued..)
<p>All of us have been through the dreaded
experience of <strong>sleepless
nights</strong> before the exam day.</p>
body {
font-family: 'Roboto-Regular';
}
strong {
font-family: 'Roboto-Bold';
}
Correct Way:
b, strong {
font-family: 'Roboto-Bold';
}

Google Web Fonts
<link
href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,600,600i,700"
rel="stylesheet">
body {
font-family: 'Open Sans', sans-serif;
font-weight: 400;
}
.semibold {
font-weight: 600;
}
b, strong, .bold {
font-weight: 700;
}
i {
font-style: italic;
font-weight: 400;
}
.semibold-italic {
font-style: italic;
font-weight: 600;
}

Media Query
@media (max-width: 1199px) {
}
@media (min-width: 1025px)
and (max-width: 1199px) {
}
}
}
}
}
Breakpoints:
Extra small devices /
Phones: (<768px)
Small devices / Tablets:
(≥768px)
Medium devices / Desktops:
(≥992px)
Large devices / Desktops:
(≥1200px)

Media Query (continued..)
}
}
@media (max-device-width: 480px)
and (orientation: landscape) {
}
@media (min-width: 768px) {
}
}
}
}

Media Query (continued..)
/* ==== Non-Mobile First Method ==== */
/* Extra small devices / Phones */
}
}
}
/* ==== Mobile First Method ==== */
/* Small devices / Tablets */
}
/* Medium devices / Desktops */
}
/* Large devices / Desktops */
}

Benefits of CSS Preprocessors (LESS, SASS etc.)
$variables
$color-green: #91ea42;
.text-green {
color: $color-green;
}
.button-green {
background: $color-green;
}
@imports
@import 'partials/sidebar.scss';
@mixins
@mixin border-radius($radius) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
-ms-border-radius: $radius;
border-radius: $radius;
}
.box {
@include border-radius(10px);
width: 100px;
height: 100px;
}
//compiled to:
.box {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
border-radius: 10px;
width: 100px;
height: 100px;
}

CSS Preprocessors (LESS, SASS etc.) (continued..)
@extend
.button {
display: block;
border-radius: 3px;
padding: 16px;
}
.button-green {
@extend .button;
color: $text-light;
background: $color-green;
}
//compiled to
.button, .button-green {
display: block;
border-radius: 3px;
padding: 16px;
}
.button-green {
color: #ccc;
background: #91ea42;
}

CSS Preprocessors (LESS, SASS etc.) (continued..)
When to use @extend; when to use a mixin
@extend should be used only when the rulesets which are being tried to DRY out are inherently and
thematically related.
Reference:
http://vanseodesign.com/css/sass-mixin-or-extend
https://csswizardry.com/2014/11/when-to-use-extend-when-to-use-a-mixin

Helper Classes for Margin & Padding
<div class="box">
</div>
.box {
margin: 20px 10px 20px;
padding: 15px;
}
.box {
margin: 20px 30px 30px;
padding: 20px;
}
}
<div class="
box xs-mt-20 xs-mx-10 xs-mb-20 xs-p-15
sm-mx-30 sm-mb-30 sm-p-20">
</div>
.xs-mt-20 {
margin-top: 20px;
}
.xs-mb-20 {
margin-bottom: 20px;
}
.xs-p-15 {
padding: 15px;
}
@media (min-width:
768px) {
.sm-mx-30 {
margin-left: 30px;
margin-right: 30px;
}
}

Helper Classes for Margin & Padding (continued..)
LESS & SASS library
http://aslanbakan.com/en/blog/less-space-responsive-css-margin-and-padding-helper-classes
https://gist.github.com/jimujing/a1fe8ae825b63f0846a0edaff9e260d4
Custom Helper Classes:
p : padding,
pt : padding-top,
pr : padding-right,
pb : padding-bottom,
pl : padding-left,
px : (padding-left, padding-right),
py : (padding-top, padding-bottom),
m : margin,
mt : margin-top,
mr : margin-right,
mb : margin-bottom,
ml : margin-left,
mx : (margin-left, margin-right),
my : (margin-top, margin-bottom)

Bootstrap Grid (column spacing)
<div class="row">
<div class="col-sm-8 article-content">
</div>
<div class="col-sm-4 right-sidebar">
</div>
</div>
.article-content {
}
.right-sidebar {
border: 3px solid #333;
}

Bootstrap Grid (column spacing) (continued..)
<div class="row">
<div class=" article-content">
</div>
</div>
<div class="right-sidebar">
</div>
</div>
</div>
.article-content {
padding: 25px 15px 30px;
}
.right-sidebar {
padding: 20px 15px 10px;
border: 3px solid #333;
}
Reference:
http://www.helloerik.com/the-subtle-magic-behind-why-the-bootstrap-3-grid-works

CSS Reset
Documentation:
https://github.com/shannonmoeller/reset-css
gem: https://github.com/adamstac/meyer-reset
Overwriting reset.css & adding custom css:
body {
font-size: 16px;
line-height: 1.2;
}
* {
}
:after, :before {
}
N.B. If we use framework like bootstrap, we won’t need that reset.css or custom reset. But, we should set
base font & line-height at boddy according to google developer’s guide.

CSS for Developers

More Related Content

CSS for Developers

Editor's Notes