framecss Code
Brought to you by:
bnelsofc
Menu
▾
▴
Tree [877df7] main / History
| File | Date | Author | Commit |
|---|---|---|---|
| .github | 2023-09-18 |
Nelsen Niko
|
[48bfeb] Create jekyll-docker.yml |
| data | 2024-02-04 |
Nelsen Niko
|
[6c510c] Add files via upload |
| dist | 2024-02-04 |
Nelsen Niko
|
[4f707f] Update README.md |
| LICENSE | 2023-09-12 |
Nelsen Niko
|
[b6382a] Add files via upload |
| README.md | 2024-02-05 |
Nelsen Niko
|
[877df7] Update README.md |
| docs.html | 2023-09-12 |
Nelsen Niko
|
[b6382a] Add files via upload |
| fcols-design.html | 2023-09-12 |
Nelsen Niko
|
[b6382a] Add files via upload |
| float.html | 2023-09-12 |
Nelsen Niko
|
[b6382a] Add files via upload |
| grid1.html | 2023-09-12 |
Nelsen Niko
|
[b6382a] Add files via upload |
| grid2.html | 2023-09-12 |
Nelsen Niko
|
[b6382a] Add files via upload |
| grid3.html | 2023-09-12 |
Nelsen Niko
|
[b6382a] Add files via upload |
| index.html | 2023-09-12 |
Nelsen Niko
|
[b6382a] Add files via upload |
| starter.html | 2023-09-12 |
Nelsen Niko
|
[b6382a] Add files via upload |
| template.1.1.5.html | 2024-02-04 |
Nelsen Niko
|
[5af304] Add files via upload |
| versi1.1.5.html | 2024-02-04 |
Nelsen Niko
|
[5af304] Add files via upload |
Read Me
Framecss adalah Framework CSS Indonesia
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 :
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
Framecss.CSS
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/nelsenpro/framecss/data/frame.1.1.5.css">
Framecss.JS
<script src="https://cdn.jsdelivr.net/gh/nelsenpro/framecss/data/frame.js" defer="true"></script>
Slider.JS
<script src="https://cdn.jsdelivr.net/gh/nelsenpro/framecss/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.4
npm i getframecss
Github
git clone https://github.com/nelsenpro/framecss.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/framecss/data/frame.1.1.5.css">
<script src="https://cdn.jsdelivr.net/gh/nelsenpro/framecss/data/frame.min.js" defer="true"></script>
<script src="https://cdn.jsdelivr.net/gh/nelsenpro/framecss/data/slider.js" defer="true"></script>
<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
