Learn and Discover Open Source with Daily Genuine Experience. From Coding, Front End, Back End, Database, and Static Site Generator.
 
 

Preface

Goal: A Semanitc 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

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.