minframecss
v1.1.5
Published
Framecss adalah sebuah framework CSS yang menyediakan berbagai macam library CSS untuk keperluan desain aplikasi web dan website. Framecss mendukung class dua bahasa yaitu bahasa Indonesia dan bahasa Inggris, sehingga Anda dapat menggunakan class seperti
Downloads
2
Maintainers
Readme
Minframe - Framecss adalah Framework CSS Indonesia - CSS only
Framecss Framework Open Source
Versi :
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
framecss.1.1.5
npm i minframecss
Github
git clone https://github.com/nelsenpro/minframe.git
Zip File
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