Getting Started

Welcome to AkbarBin UI. This framework helps you build fast, responsive, SEO-friendly, and conversion-focused business websites using HTML, CSS, and Vanilla JavaScript.

In just a few minutes, you'll be able to build your first page using the built-in components.

Prerequisites

Before you begin, make sure you have:

✓ A modern browser (Chrome, Edge, Firefox, Safari)
✓ Visual Studio Code or any other text editor
✓ Basic knowledge of HTML and CSS
✓ No Node.js, npm, or build tools required

Project Structure

Import the CSS in the following order.

my-project/
│
├── index.html
├── css/
│   ├── 01-tokens.css
│   ├── 02-reset.css
│   ├── 03-base.css
│   ├── 04-layout.css
│   ├── 05-utilities.css
│   ├── 06-components.css
│   ├── 07-sections.css
│   ├── 08-responsive.css
│
├── img/
└── js/
          

Import CSS Files

Always import all CSS files in order to ensure that all components work properly.

<link rel="stylesheet" href="css/01-tokens.css">
<link rel="stylesheet" href="css/02-reset.css">
<link rel="stylesheet" href="css/03-base.css">
<link rel="stylesheet" href="css/04-layout.css">
<link rel="stylesheet" href="css/05-utilities.css">
<link rel="stylesheet" href="css/06-components.css">
<link rel="stylesheet" href="css/07-sections.css">
<link rel="stylesheet" href="css/08-responsive.css">
          

Create Your First Section

Here is an example of a simple section using the framework's built-in components.

Welcome

Hello AkbarBin UI

Your first section using AkbarBin UI Framework.

Get Started Documentation

<section class="section">

  <div class="container">

    <div class="section-header">

      <span class="badge badge--primary">
        Welcome
      </span>

      <h2>
        Hello AkbarBin UI
      </h2>

      <p class="section-description">
        Your first section using AkbarBin UI Framework.
      </p>

      <div class="button-group flex-center mt-48">
        <a href="#getting-started" class="btn btn--primary">Get Started</a>

        <a href="#" class="btn btn--secondary">Documentation</a>
      </div>

    </div>

  </div>

</section>
          

Best Practices

Use Design Tokens

Use the provided CSS variables instead of hardcoding values.

Reuse Components

Use built-in components like Buttons, Cards, and Badges before creating new classes.

Semantic HTML

Use the correct HTML elements to make the website structure more SEO-friendly and easier to maintain.

Keep It Simple

This framework is built to be lightweight. Avoid unnecessary CSS.

Next Step

Continue exploring the documentation to learn more about the framework architecture and available components.

Installation
Folder Structure
Design Tokens
Typography
Components
Responsive Utilities

It is recommended to read the documentation in order, starting from Getting Started to Components.

Installation

Import CSS sesuai urutan berikut.

<link rel="stylesheet" href="01-tokens.css">
<link rel="stylesheet" href="02-reset.css">
<link rel="stylesheet" href="03-base.css">
<link rel="stylesheet" href="04-layout.css">
<link rel="stylesheet" href="05-utilities.css">
<link rel="stylesheet" href="06-components.css">
<link rel="stylesheet" href="07-sections.css">
<link rel="stylesheet" href="08-responsive.css">
          

Folder Structure

A clean, predictable, and modular file structure designed to keep the project lightweight and easy to maintain.

css/
  01-tokens.css
  02-reset.css
  03-base.css
  04-layout.css
  05-utilities.css
  06-components.css
  07-sections.css
  08-responsive.css
docs/
  docs.css
  docs.js
  index.html
img/
          

Design Principles

A set of fundamental guidelines that ensure the website remains lightweight, responsive, and easy to maintain by leveraging semantic HTML and reusable design tokens.

Reusable Components

Build with reusable components whenever possible.

Semantic HTML

Use a meaningful HTML structure.

Design Tokens

Avoid hardcoding colors and spacing.

Mobile First

Build the layout starting from mobile sizes.

Performance

A lightweight framework with no dependencies.

SEO Friendly

Supports a good website structure.

Changelog

All notable changes to this project will be documented in this file.

v1.0 - Initial Design System.
Design Tokens
Reset, Base, Layout
Utilities
Components
Responsive

Core Design Tokens

The foundational CSS variables that define the framework's visual identity, including colors, typography, and spacing scales.

Token	Value	Usage
--color-primary	#2F855A	Button, Link, Badge
--space-32	3.2rem	Gap, Margin
--radius-md	1.2rem	Card, Button
--shadow-md	Medium Shadow	Cards

Typography

The structural heading hierarchy and typographic scales optimized for readability, semantic clarity, and clean mobile responsiveness.

Heading 1

Heading 2

Heading 3

Heading 4

The body text uses Plus Jakarta Sans with a comfortable line height for reading.

Color Palette

In the next milestone, this section will visually display all color design tokens along with usage examples.

Layout Pattern

The mobile-first layout structures and grid systems built using semantic HTML to ensure seamless responsiveness across all screen sizes.

1

2

3

Buttons

Buttons are used to execute both primary and secondary actions on the page.

Primary Secondary Outline

<a class="btn btn--primary">Primary</a>
<a class="btn btn--secondary">Secondary</a>
<a class="btn btn--outline">Outline</a>
          

Class	Purpose
.btn	Base button
.btn--primary	Main CTA
.btn--secondary	Alternative CTA
.btn--outline	Low emphasis action

Use only one primary button per section to maintain user focus.

Badges

Badges are used to display labels, categories, or statuses concisely.

Primary Badge Light Badge

<span class="badge badge--primary">Primary Badge</span>
<span class="badge badge--light">Light Badge</span>
          

Use badges for short labels, not as buttons or navigation.

Cards

Cards group related content such as services, portfolios, testimonials, and contact information.

Service

Service card.

Portfolio

Portfolio card.

Testimonial

Testimonial card.

<article class="card service-card">
  ...
</article>
          

Use the .card class as the base for all cards to keep the appearance consistent.

Forms

Forms collect user input using consistent field styles and spacing.

<div class="form-group">
  <label class="form-label">Nama</label>
  <input class="input">
</div>
          

Always use the .form-group class to maintain spacing between fields.

Accordion

Accordions reveal additional information while keeping the page concise.

What is AkbarBin UI?

A CSS framework for business and MSME (UMKM) websites.

Is it mobile-friendly?

Yes, all components are designed to be responsive.

<details>
  <summary>Question</summary>
  <p>Answer</p>
</details>
          

Use accordions to hide information that does not need to be displayed immediately.

Icon Lists

Icon lists present key information in a clear and scannable format.

✔SEO Friendly
✔Responsive Design
✔Manual Coding

Use icon lists to present sequential information or key points.

Stats

Stats are used to visually display numbers or key achievements.

150+

Projects

98%

Happy Clients

10+

Years

24/7

Support

<div class="stat">
  <div class="stat-number">150+</div>
  <div class="stat-label">Projects</div>
</div>
          

Class	Purpose
.stats	Grid container
.stat	Individual statistic
.stat-number	Main value
.stat-label	Description

Only display statistics that genuinely support user trust.

Section Header

Section Headers are used to provide a consistent title and description for each section.

Services

Professional Website

Consistent section heading.

Use one .section-header per section to ensure a consistent page structure.

Utilities

Utility classes provide small layout and spacing adjustments without creating new components.

Center Text

<div class="section text-center">Center Text</div>

Utility	Example
.text-center	Text alignment
.shadow-md	Medium shadow
.rounded-lg	Large border radius
.mb-48	Bottom spacing
.w-full	Full width

Use utilities for minor adjustments. Do not excessively override the main function of a component using utilities.

Hero

A hero section introduces your business, communicates the primary value proposition, and encourages visitors to take immediate action.

Business Website

Build a Professional Business Website

Help local businesses grow with a fast, modern, and SEO-friendly website.

Get Started Learn More

  <section class="hero section">

    <div class="container">

      <div class="hero-layout grid grid--2-cols">

        <div class="hero-content">

          <span class="badge badge--primary">
            ...
          </span>

          <h1 class="hero-title">
            ...
          </h1>

          <p class="hero-description">
            ...
          </p>

          <div class="button-group">
            ...
          </div>

        </div>

        <div class="hero-image">
          ...
        </div>

      </div>

    </div>

  </section>
          

Keep the hero concise and focus on one clear value proposition.

Call to Action (CTA)

Encourage visitors to perform the primary business goal, such as contacting your business or requesting a quotation.

Ready to Grow Your Business?

Let's build a professional website that helps you attract more customers.

Start Your Project

<section class="cta section">
  ...
</section>
          

Use one primary CTA with clear, action-oriented button text.

Business Components

Hero

Headline, CTA, image.

About

Company introduction.

Services

Service cards.

Portfolio

Project showcase.

Testimonials

Customer reviews.

FAQ

Accordion component.

CTA

Primary conversion area.

Contact

Form + map + contact info.

Recommended Landing Page Structure

Hero
About
Services
Portfolio
Why Choose Us
Testimonials
FAQ
CTA
Contact
Footer

Follow this structure as the recommended foundation for business websites and landing pages.

Landing Page Checklist

Hero with a primary CTA
Clear value proposition
Services
Portfolio
Testimonials
FAQ
Contact Form
Google Maps
Footer

Component Inventory v1.0

Framework Overview

Foundation
• Design Tokens
• Reset
• Base

Layout
• Container
• Grid
• Section

Utilities
• Flex
• Spacing
• Text Alignment

Components
• Buttons
• Badges
• Cards
• Forms
• Tables
• Accordions
• Icon Lists
• Stats
• Callouts
• Section Headers

Patterns
• Hero
• CTA
          

Accessibility Guidelines

Rule	Description
Semantic HTML	Use header, main, section, and footer elements.
Alt Text	All images must have alt text.
Label	Inputs must have labels.
Color Contrast	Ensure sufficient contrast between text and background colors.

Performance & SEO

Category	Recommendation
Images	Use WebP and lazy loading.
CSS	Use the core framework, avoid duplication.
HTML	Use the correct heading hierarchy.
Metadata	Add title, meta description, and Open Graph.
Schema	Use JSON-LD according to the business type.