Frameworks and Tools
Introduction to CSS for beginner.
Click download in:
[PDF],
[Impress]
All slides in:
[slides]
About Me ππ»ββοΈ!
Yet, another underachiever π».
But hey, I have my own blog π.
Frontend: HTML, CSS, JS
What is this rubbish ?
A page is a document consist of:
- HTML Tag: Structure and Formatting
(structure = elements in hierarcy fashioned)
- Stylesheet: Presentation
(rule = selector + declaration)
(box model, position)
(layout: flex, grid, float+calc, table)
- Javascript: Behaviour
- Content: Text and Image (or other media)
More Reference: va_lesson4.pdf
Learning HTML Step by Step?:
- Basic HTML:
[www.w3schools.com/html/]
- Templating Engine:
Combine with Task Runner.
- Static Site Generator:
Complete website, without complicated backend.
- Backend Web Framework:
Laravel, Flask, RoR, Koa, Express.
- Modern Web Framework:
Svelte, React, Vue.
Learn how to google, make a screenshot, read documentation, and english.
Learning CSS Step by Step?:
- Basic CSS:
[www.w3schools.com/css/]
- Frameworks CSS:
Such as Bulma, Materialize CSS, or Semantic UI.
- CSS Preprocessors:
Task Runner or Bundler.
- CSS Tools:
Such as Bulma, Materialize CSS, or Semantic UI.
- Custom CSS:
No Frameworks, or
Tailwind CSS
Learn how to google, make a screenshot, read documentation, and english.
Where to put stylesheet π€?
Inline, Internal, or External.
Yet another humble oldschool case.
[HTML - Stylesheet]
Issue in oldschool CSS Development π
- Reinvent the wheel.
Different stylesheet for each project.
In need of code reuse.
- Debugging. Most of the time.
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 π€?
Why CSS Framework π€?
- Save man hours.
Deliver preview quickly.
- Reduce debugging and test.
Already well tested. Hence reduce bug.
- Ready to read, official documentation
- 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.
Direct advantage to developer π€
- Easy to layout
- Ready to use:
reset, element, component, helper
- Predefined properties:
color, and such
Disadvantage π
- Another learning time
- Bloated
unless utilize modular feature.
exclude unneeded artefact
- Feels like witchery.
This things work, and nobody knows why.
Disadvantage for beginner π
- Basic Design Provided:
Every site made, will have similar looks.
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.
- You step into a team with legacy project.
- AMP:
that require embedded stylesheet.
Step by Step Examples π€ ?
Tool: Preprocessor π€ !
What is this CSS prepocessor rubbish π€?
- In short: CSS with superpowers β!
Just the tool we desire.
The CSS Frustration π€
- CSS code get ugly from time to time.
Nomore clean code.
Hard to read.
Hard to maintain.
- Always rewrite, for any changes
No variables in old browser.
- Modularization affect HTTP perfomance. π€§
Multiple files require more HTTP requests.
In short:
Developing with CSS without tools
is not scalable for large project.
Why CSS Preprocessor π€?
Sass, Less or Stylus
- Modularity
Let's get organized.
Cleaner code.
- 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).
Direct advantage to developer π€
- Modify custom properties:
color, and such
- Ready to alter:
reset, element, component
- You can claim yourself as a coder.
This is a joke. βπΌπ€‘π€π½
Yes, there is a compilation process.
When not Using CSS Preprocessor π€?
- You want to use unmodifed version CSS Frameworks.
Such as using CDN.
- Else, I'm still thinking...
Current 2019 State π€
- SASS has wide implementation in many language
Most common are: dart-sass, node-sass, and deprecated ruby-sass
Supported in both Gulp and Grunt.
And bundler: webpack, rollup, and parcel.
- PostCSS with Tailwind CSS is a rising star.
PostCSS itself is more than just Preprocessor.
- LESS is less used.
- I do not know about this one:
Stylus
Which One π€?
- Choose what works for you ππ½!
- I don't know. I'm just a blogger.
- Learning:
@html_css_id
Preprocessor Examples π€ ?
Respect π€ !
Special thank you for the smart guys/girls,
behind these CSS preprocessor project.
CSS supporting Technologies π€?
Task Runner:
Grunt,
Gulp, Brunch, Broccolli.
Bundler:
Webpack,
Rollup,
Parcel.
Just like you. I'm still learning.
Not Covered Yet π€?
More about CSS supporting Technologies
- PostCSS:
Along with their plugins.
- Custom CSS without Framework:
Along with repository example.
- Tailwind:
Along with repository example.
This presentation will likely to change.
Depend on my knowledge growth.
Summary π€?
Along with local communities π€ .
- CSS Framework:
Bulma,
Materialize CSS,
Semantic UI,
Tailwind CSS,
Custom CSS.
Local Communities:
belajarhtmlcss,
FrontEndID
- CSS Preprocessor:
SASS,
LESS,
PreCSS (via PostCSS)
Local Community:
html_css_id
- Useful Tools:
Task Runner: Gulp, Grunt,
Bundler: Webpack, Parcel, Roller
Local Community:
html_css_id
Questions π€?
Don't be shy ππ»ββοΈ!
The End
ππ»
Thank You for Your Time.