CSS: Frameworks and Tools

Introduction to CSS for beginner

for Personal Educational Purpose.

Jakarta, Indonesia
11 October, 2020
 About Epsi

Yet, another underachiever.

But hey, I have my own blog.

11 October, 2020 CSS: Frameworks and Tools 2

epsi-rns.gitlab.io
 Frontend: HTML, CSS, JS

What is this rubbish?

11 October, 2020 CSS: Frameworks and Tools 3

epsi-rns.gitlab.io
A page is a document consist of:
More Reference: [va_lesson4.pdf]

Structure HTML Tag: Structure and Formatting

structure = elements in hierarcy fashioned

Presentation Stylesheet: Rule, Layout, Box Model

rule = selector + declaration
box model, position
layout: flex, grid, float+calc, table

Behaviour Javascript

Content Text and Image (or other media)

11 October, 2020 CSS: Frameworks and Tools 4

epsi-rns.gitlab.io
 Learning Plain HTML Step by Step?
Tips Modern
Hit the w3school book first. Web Framework
Enjoy the journey. Svelte, React, Vue.

Backend Web Framework

Laravel, Flask, RoR, Koa, Express.

Static Site Generator

Complete website, without complicated backend.

Templating Engine
Combine with Task Runner.

Basic HTML
www.w3schools.com/html/

Learn how to google, make a screenshot, read documentation, and english.

11 October, 2020 CSS: Frameworks and Tools 5
epsi-rns.gitlab.io
 Learning CSS Step by Step?
Tips Custom CSS
Hit the w3school book first. No Frameworks, or
Enjoy the journey. Tailwind CSS

CSS Tools
Task Runner or Bundler

CSS Preprocessors
To create additional custom CSS.

Frameworks CSS
Such as Bulma, Materialize CSS, or Semantic UI.

Basic CSS
www.w3schools.com/css/

Learn how to google, make a screenshot, read documentation, and english.

11 October, 2020 CSS: Frameworks and Tools 6
epsi-rns.gitlab.io
 Where to Put?

Placement
●
Inline, or
●
Internal, or
●
External.

Yet another humble

oldschool case.
[HTML - Stylesheet]
11 October, 2020 CSS: Frameworks and Tools 7
epsi-rns.gitlab.io
 CSS Frameworks

11 October, 2020 CSS: Frameworks and Tools 8

epsi-rns.gitlab.io
 Issue in oldschool CSS Development
Reinvent the wheel
Different stylesheet for each project.
In need of code reuse.
Debugging
Most of the time, debugging.
The horror while testing in different browser.

No standard for teamwork

Waste of time, thinking of nice name for classes.

Can we have a generic one?

11 October, 2020 CSS: Frameworks and Tools 9

epsi-rns.gitlab.io
 Why CSS Framework?
Save Man Hours
Deliver preview quickly.

Reduce Debugging and Test

Already well tested. Hence reduce bug.

Official Documentation
Ready to read.

Community Friendly
Known solution for recurring case.

Modularity
Built on top of CSS preprocessor: Sass, Less, or Stylus.
Tailwind on top of PostCSS even more modular.

11 October, 2020 CSS: Frameworks and Tools 10

epsi-rns.gitlab.io
 Direct Advantage to Developer

Easy to layout
Grid system or such.

Ready to use
Reset, element, component, helper.

Predefined Properties
Color, and such.

11 October, 2020 CSS: Frameworks and Tools 11

epsi-rns.gitlab.io
 Disadvantage

Learning Time
Require More Cups of Caffeine.

Bloated
Unless utilize modular feature,
exclude unneeded artefact.

Disadvantage for Beginner Feels Like Witchery

Basic Design Provided This things work,
Every site made, will have similar looks. and nobody knows why.

11 October, 2020 CSS: Frameworks and Tools 12

epsi-rns.gitlab.io
 When not Using CSS Framework?

You want to write your own

This is technically make sense, for custom design,
to make something that suitable for your need.

Legacy Project
You step up into a team.

AMP
This require embedded stylesheet.

11 October, 2020 CSS: Frameworks and Tools 13

epsi-rns.gitlab.io
 Step by Step Examples?
Bulma Materialize CSS
[Bulma + SASS] [Materialize CSS + SCSS]
[Bulma + Custom SASS]
(Material Design)

Semantic UI Bootstrap
[Semantic UI + Custom LESS] [Bootstrap + Custom SASS]
(Material Design) (Open Color)

11 October, 2020 CSS: Frameworks and Tools 14

epsi-rns.gitlab.io
 Tool: Preprocessor!
What is this CSS preprocessor rubbish?
In short: CSS with superpowers!
Just the tool we desire.
11 October, 2020 CSS: Frameworks and Tools 15
epsi-rns.gitlab.io
 The CSS Frustration

CSS code get ugly from Always rewrite, for any Modularization affect HTTP
time to time changes perfomance.
●
Nomore clean code. No variables in old browser. Multiple files require more HTTP
requests.
●
Hard to read.
●
Hard to maintain.

In short
Developing with CSS without tools is not scalable for large project.

11 October, 2020 CSS: Frameworks and Tools 16

epsi-rns.gitlab.io
 Direct Advantage to Developer

Modify custom properties Ready to alter You can claim

Color, and such. Reset, element, component yourself as a coder
This is a joke. Yes, there is a
compilation process.

11 October, 2020 CSS: Frameworks and Tools 17

epsi-rns.gitlab.io
 Why CSS Preprocessor?
Sass, Less or Stylus
Modularity
Let's get organized.
Cleaner code.

Stylesheet
Easier to Maintain Stylesheet

Basic Coding
import partials, variables, interpolation,
mixins, function arguments
Made for Developer
Simplified declaration.
While compiled css is,
made for machine (web browser).

11 October, 2020 CSS: Frameworks and Tools 18

epsi-rns.gitlab.io
 When not Using CSS Preprocessor?
You want to use unmodifed version
of CSS Frameworks.
Such as using CDN.

Else
I'm still thinking...

11 October, 2020 CSS: Frameworks and Tools 19

epsi-rns.gitlab.io
 Last 2019 State
Implementation Tailwind CSS
SASS has wide implementation in many PostCSS with Tailwind CSS is a rising star.
language
PostCSS itself is more than just
Most common are: dart-sass, node-sass, and Preprocessor.
deprecated ruby-sass

Supported in both Gulp and Grunt.

And bundler: webpack, rollup, and parcel.

LESS is less used Else

I do not know about this one: Stylus

11 October, 2020 CSS: Frameworks and Tools 20

epsi-rns.gitlab.io
 Which One Should I Choose?
Choose what
works for you!

I don't know.
I'm just a blogger.

Just like you. I'm still learning.

11 October, 2020 CSS: Frameworks and Tools 21

epsi-rns.gitlab.io
 Preprocessor Coding Examples?
Custom SASS
[SASS: Loop - Spacing Class]

Custom LESS
[LESS: Loop - Spacing Class]
[LESS: Conditional - Color Class]

Custom PostCSS
[PostCSS: Loop - Spacing Class]

11 October, 2020 CSS: Frameworks and Tools 22

epsi-rns.gitlab.io
 Respect!

Special thank you for

the smart guys/girls,
behind these
CSS preprocessor project.

11 October, 2020 CSS: Frameworks and Tools 23

epsi-rns.gitlab.io
 CSS supporting Technologies

11 October, 2020 CSS: Frameworks and Tools 24

epsi-rns.gitlab.io
 Supporting Technologies
Bundler Task Runner
[Webpack]

[Grunt]

[Rollup]
Gulp,
Brunch,
Brocolli.
[Parcel]
11 October, 2020 CSS: Frameworks and Tools 25
epsi-rns.gitlab.io
 Not Covered Yet?
More about CSS supporting Technologies

PostCSS Custom CSS Tailwind

(Without Framework)
Along with their plugins. Along with repository example.
Along with repository example.

Notes:
This presentation will likely to change.
Depend on the growth of my knowledge.

11 October, 2020 CSS: Frameworks and Tools 26

epsi-rns.gitlab.io
 Summary

11 October, 2020 CSS: Frameworks and Tools 27

epsi-rns.gitlab.io
 Summary
Along with Local Communities
CSS Framework
[Bulma], [Tailwind CSS], Semantic UI,
Materialize CSS, [Custom CSS].
Local Communities:[@belajarhtmlcss], [@FrontEndID].

CSS Preprocessor
SASS, LESS, PreCSS (via PostCSS)
Local Community: [@css_tools_id].

Useful Tools
Task Runner: Gulp, Grunt,
Bundler: Webpack, Parcel, Roller
Local Community: [@css_tools_id].

11 October, 2020 CSS: Frameworks and Tools 28

epsi-rns.gitlab.io
 What is Next?
Leverage to SSG!
[Introduction to SSG for beginner]
Learn to make a fully mature website
without the burden of complicated backend.
11 October, 2020 CSS: Frameworks and Tools 29
epsi-rns.gitlab.io
 Questions?

Don’t be shy!

11 October, 2020 CSS: Frameworks and Tools 30

epsi-rns.gitlab.io
 The End

Thank You for Your Time.

11 October, 2020 CSS: Frameworks and Tools 31

epsi-rns.gitlab.io