Skip to content

nelsenpro/minframe

BranchesTags

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

7 Commits
LICENSE
LICENSE
 
 
README.md
README.md
 
 
frame.min.css
frame.min.css
 
 

Repository files navigation

Minframe - Framecss adalah Framework CSS Indonesia - CSS only

Socket Badge

Framecss Framework Open Source

Framecss adalah Framework CSS open source yang Menyediakan berbagai macam library CSS untuk keperluan Desain Aplikasi Web Responsible dan aplikasi web. CLASS bisa menggunakan bahasa Indonesia ataupun Inggris. misalnya : class="button" atau class="tombol" dan hasilnya sama. Singkatnya, Framecss mendukung class dua bahasa yaitu bahasa Indonesia dan bahasa Inggris

Framecss diciptakan dan di kembangkan oleh Nelsen Niko yang terinspirasi oleh beberapa CSS framework lain, seperti Bootstrap, Foundation, dan Bulma. Framecss menawarkan fitur-fitur unggulan seperti responsive design, grid system, custom components, dan theme customization. Framecss cocok digunakan untuk web desainer pemula dalam membuat web yang modern, elegan, dan mudah digunakan. ⭐ framecss css framework, let's go build your design with framecss Framework

Versi :

frame.1.1.5.css Demo Template

Framecss..?

Dokumentasi | Lihat kode CSS | Lihat Kode JS |

Status

Framecss 1.1.4
Nama Deskripsi
Update 15-03-2023
Versi 1.1.4
Lisensi MIT
Framecss 1.1.5
Nama Deskripsi
Update 5-02-2024
Versi 1.1.5
Lisensi MIT

Mulai

CDN

minframe.css

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/nelsenpro/minframe/frame.min.css">

Framecss.JS

<script src="https://cdn.jsdelivr.net/gh/nelsenpro/newframecss/data/frame.js" defer="true"></script>

Slider.JS

<script src="https://cdn.jsdelivr.net/gh/nelsenpro/newframecss/data/slider.js" defer="true"></script>

jQuery.js, D3.js, Chart.js, Typed.js

<script src="https://cdn.jsdelivr.net/gh/nelsenpro/framecss/data/jq.js" type="text/javascript" charset="utf-8"></script>
<script src="https://cdn.jsdelivr.net/gh/nelsenpro/framecss/data/d3.js" type="text/javascript" charset="utf-8"></script>
<script src="https://cdn.jsdelivr.net/gh/nelsenpro/framecss/data/chart.js" type="text/javascript" charset="utf-8"></script>
<script src="https://cdn.jsdelivr.net/gh/nelsenpro/framecss/data/typed.js" type="text/javascript" charset="utf-8"></script>
<script src="https://cdn.jsdelivr.net/gh/nelsenpro/framecss/data/plot.js" type="text/javascript" charset="utf-8"></script>

Another js

<script src="https://cdn.jsdelivr.net/gh/nelsenpro/framecss/data/ftema.js" type="text/javascript" charset="utf-8"></script>
<script src="https://cdn.jsdelivr.net/gh/nelsenpro/framecss/data/cp.js" type="text/javascript" charset="utf-8"></script>

NPM

minframecss.1.1.5

npm i minframecss
npm i getframecss

Github

git clone https://github.com/nelsenpro/minframe.git

Zip File

Download Zip

see other source on :

Gitlab | | NPM | | Sourceforge | | Launchpad

Starter Template

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/nelsenpro/minframe/frame.min.css">
    <title>Mulai Framecss</title>
</head>
<body>
    <h1 class="red">Welcome</h1>
</body>
</html>

Breakpoints :: Media Queries

Mobile Phones : class="col"

Dibawah 599px = class="col-"

[class*="col-"] {
    width: 100%;
}

Tablets : class="col-s-1"

dari 600-767px = class="col-s-1"

@media only screen and (min-width: 600px) {
    /* For tablets: */
    .col-s-1 {
        width: var(--col1);
    }
    .col-s-2 {
        width: var(--col2);
    }
    .col-s-3 {
        width: var(--col3);
    }
    .col-s-4 {
        width: var(--col4);
    }
    .col-s-5 {
        width: var(--col5);
    }
    .col-s-6 {
        width: var(--col6);
    }
    .col-s-7 {
        width: var(--col7);
    }
    .col-s-8 {
        width: var(--col8);
    }
    .col-s-9 {
        width: var(--col9);
    }
    .col-s-10 {
        width: var(--col10);
    }
    .col-s-11 {
        width: var(--col11);
    }
    .col-s-12 {
        width: var(--full);
    }
}

Desktop : class="col-1"

diatas 767px : class="col-1"

@media only screen and (min-width: 768px) {
    /* For desktop: */
    .col-1 {
        width: var(--col1);
    }
    .col-2 {
        width: var(--col2);
    }
    .col-3 {
        width: var(--col3);
    }
    .col-4 {
        width: var(--col4);
    }
    .col-5 {
        width: var(--col5);
    }
    .col-6 {
        width: var(--col6);
    }
    .col-7 {
        width: var(--col7);
    }
    .col-8 {
        width: var(--col8);
    }
    .col-9 {
        width: var(--col9);
    }
    .col-10 {
        width: var(--col10);
    }
    .col-11 {
        width: var(--col11);
    }
    .col-12 {
        width: var(--full);
    }
}

Kamu dapat Mengubah kode

Kode
:root {}

Contoh Mengubah Warna:

Warna bawaan Framecss
--red: #e51400;
--green: #60a917;
--blue: #3e65ff;
Warna sesuai keinginan
--red: #FF0000;
--green: #008000;
--blue: #0000FF;
Begini caranya
    /* mengubah variabel warna sesuai keinginan */
:root {
        --red: #FF0000;
        --green: #008000;
        --blue: #0000FF;
    }
    /* nama class untuk warna font/teks */
    .red,
    .merah {
        color: var(--red);
    }
    .green,
    .hijau {
        color: var(--green);
    }
    .blue,
    .biru {
        color: var(--blue);
    }
HTML nya
<h3 class="merah">teks ini merah</h3>
<p class="green">teks ini hijau</p>
<h5 class="biru">teks ini biru</h5>

Creator

Blog | Tiktok | Youtube | Nelsen Niko

Thanks for :

Normalize.css | Animate.css | Fontsawesome | StaticSave | W3schools | Swiffy Slider | jQuery.js | D3.js | Chart.js | Plotly.js | Google

About

Mindframe Framecss Framework CSS

Resources

Readme

License

MIT license
Activity

Stars

0 stars

Watchers

1 watching

Forks

0 forks
Report repository

Releases

No releases published

Packages

No packages published