Semantic UI - Overview

   
   
 semantic ui  css  
 frontend  
Article Series

Repository Overview: CSS Framework.

Repository Overview: Static Site Generator.

Table of Content

Preface

Goal: A Semantic UI with Custom Less Experiment.

Franken Semantic UI CSS step by step, from pure html+css, to less, so any beginner can use this guidance. Using custom spacing helper, color from materialize CSS, and a little bit Bulma.

Repository

Custom Helper

Chapter Step by Step

Tutor 01

Adding Semantic UI CSS

  • Without Semantic UI CSS

  • Using CDN

  • Using Local

Tutor 01

Tutor 02

Using Semantic UI: Navigation Bar

  • Simple

  • Full Featured (with jQuery)

  • Using Icon (compatible with FontAwesome)

Tutor 02

Tutor 03

Custom Less

  • Custom maximum width class

  • Responsive using Semantic UI’s

Tutor 03

Tutor 04

Helper Class

  • Custom Less Spacing Helper

  • Custom Less Color Helper (Ported from Materialize CSS)

Tutor 04

Tutor 05

HTML Box using Semantic UI

  • Main Blog and Aside Widget

Tutor 05

Tutor 06

Finishing

  • Blog Post Example

Tutor 06

Begin The Guidance

Thank you for cloning the repository.