https://github.com/nelsenpro/framecss
Framecss adalah sebuah proyek open source yang menyediakan berbagai macam library CSS untuk keperluan desain aplikasi web dan website. Framecss diciptakan oleh Nelsen Niko.
https://github.com/nelsenpro/framecss
css css-framework css-framework-indonesia framecss nelsenniko webdesign webdevelopment
Last synced: about 2 months ago
JSON representation
Framecss adalah sebuah proyek open source yang menyediakan berbagai macam library CSS untuk keperluan desain aplikasi web dan website. Framecss diciptakan oleh Nelsen Niko.
- Host: GitHub
- URL: https://github.com/nelsenpro/framecss
- Owner: nelsenpro
- License: mit
- Created: 2023-09-12T03:14:34.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-06-03T12:49:00.000Z (12 months ago)
- Last Synced: 2025-03-12T23:05:36.924Z (2 months ago)
- Topics: css, css-framework, css-framework-indonesia, framecss, nelsenniko, webdesign, webdevelopment
- Language: CSS
- Homepage:
- Size: 2.95 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Fitur Framecss Framework adalah
Fitur Framecss adalah Grid Design/Grid System, Padding, Margin, Border Radius, Typography, Ketinggian, Lebar, Ukuran, Tooltip, Akordion, Efek gambar, Fonts, Halaman, Slideshow/Slider Gambar, Linklist, Card, Blockquote, Form, Menu Navigasi, Blok Header, Modals, Button/Tombol, Tabel, Warna, Background Warna, Animasi, Icons, btnTop clik, Breadcrumb
[](https://socket.dev/npm/package/getframecss)
#### 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](https://framecss-framework-nelsen.on.drv.tw/V1.1.5.html) [Demo Template](https://framecss-framework-nelsen.on.drv.tw/template.1.1.5.html)
## Framecss..?
[Dokumentasi](https://framecss-framework-nelsen.on.drv.tw/nelndocs.html) | [Lihat kode CSS](https://cdn.jsdelivr.net/gh/nelsenpro/framecss/data/frame.1.1.5.css) | [Lihat Kode JS](https://cdn.jsdelivr.net/gh/nelsenpro/framecss/data/frame.min.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
```html
```
Framecss.JS
```html
```
Slider.JS
``` html
```
### jQuery.js, D3.js, Chart.js, Typed.js
```html
```
### Another js
```html
```
### NPM
framecss.1.1.4
```txt
npm i getframecss
```
### Github
```txt
git clone https://github.com/nelsenpro/framecss.git
```
### Zip File
[Download Zip](https://github.com/nelsenpro/framecss/archive/refs/heads/main.zip)
### see other source on :
[Gitlab](https://gitlab.com/nelsenpro/frame) | | [NPM](https://www.npmjs.com/package/getframecss) | |
[Sourceforge](https://sourceforge.net/u/bnelsofc/framecss) | |
[Launchpad](https://code.launchpad.net/~nelsenpro/framecss/+git/frame)
## Starter Template
```html
Mulai Framecss
Welcome
```
## Breakpoints :: Media Queries
### Mobile Phones : class="col"
Dibawah 599px = class="col-"
```css
[class*="col-"] {
width: 100%;
}
```
### Tablets : class="col-s-1"
dari 600-767px = class="col-s-1"
```css
@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"
```css
@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
```css
:root {}
```
#### Contoh Mengubah Warna:
###### Warna bawaan Framecss
```css
--red: #e51400;
--green: #60a917;
--blue: #3e65ff;
```
###### Warna sesuai keinginan
```css
--red: #FF0000;
--green: #008000;
--blue: #0000FF;
```
###### Begini caranya
```css
/* 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
```html
teks ini merah
teks ini hijau
teks ini biru
```
## Creator
[Blog](https://goframe-css.blogspot.com/) | [Tiktok](https://www.tiktok.com/@framecss_framework_css) | [Youtube](https://youtube.com/@bnelsofficial4505?si=Wjr0I8h-N2j1wjIM) | [Nelsen Niko](https://wa.me/6285328736706)
## Thanks for :
[Normalize.css]() | [Animate.css]() | [Fontsawesome]() | [StaticSave]() | [W3schools]() | [Swiffy Slider]() | [jQuery.js]() | [D3.js]() | [Chart.js]() | [Plotly.js]() | [Google]()