Frameworks and Tools

Introduction to CSS for beginner.


Click download in: [PDF], [Impress]

All slides in: [slides]

About Me πŸ™‹πŸ»β€β™‚οΈ!

my photo

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.

Stylesheet: Where to put?

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 🀠.

    What is Next πŸ€”?

    Leverage to SSG!

    Introduction to SSG for beginner.
    Learn to make a fully mature website
    without the burden of complicated backend.

    Questions πŸ€”?

    Don't be shy πŸ™‹πŸ»β€β™‚οΈ!

    The End

    πŸ™‡πŸ»

    Thank You for Your Time.