Framecss

Mulai

CDN

NPM simply uses

Template

Header dan Footer Layout

Float Layout

Grid 1 Layout

Grid 2 Layout

Grid 3 Layout

Grid konten

Grid 4

Grid 4 col

Grid konten

Grid 4 col

Grid konten

Grid 4 col

Grid konten

Grid 4 col

Grid konten

Grid 3

Grid 3 col

grid konten

Grid 3 col

grid konten

Grid 3 col

grid konten

Grid 2

Grid 2 col

grid konten

Grid 2 col

Grid konten

Grid 1

Grid 1 col

grid konten

Padding

Ada Penyesuaian Padding "pd"

Margin

Ada Penyesuaian Margin "mg"

Radius

Ada Penyesuaian Border Radius "r"

Typography

lihat Coloring
lihat Background Color
lihat Fonts
lihat Ukuran
lihat Linklist

framecss3 Typografi "i"

framecss3 Typografi "b"

framecss3 Typografi "rt-kanan"

framecss3 Typografi "tebal"

framecss3 Typografi "miring"

framecss3 Typografi "rata"

framecss3 Typografi "justify"

framecss3 Typografi "rt-tengah"

framecss3 Typografi "u"

framecss3 Typografi "up"

framecss3 Typografi "dotted"

frameCSS3 TypoGRAfi "low"

Ketinggian

Ada Penyesuaian Tinggi "t", "h"

Lebar

Ada Penyesuaian Lebar "w", "l"

Ukuran

Ada Penyesuaian Ukuran "u", "fs"

Accordion

Ada Accordion Panel

framecss adalah framework CSS...

Efek Gambar

Ada Efek : invert, shadow, hue-rotate, brightness, contrast, saturate, opacity, sepia, invert, grayscale, blur

Fonts

Ada Fonts

paragraf ini font = helvetica

paragraf ini font = arial

paragraf ini font = time new roman

paragraf ini font = verdana

paragraf ini font = georgia

paragraf ini font = trebuchet

paragraf ini font = tahoma

paragraf ini font = frank

paragraf ini font = garamond

paragraf ini font = segoe

paragraf ini font = cursive

paragraf ini font = kelly cursive

paragraf ini font = forte cursive

paragraf ini font = brush

paragraf ini font = monospace

paragraf ini font = cnmonospace

Halaman

Ada Pagination

« 1 2 3 »

Slideshow

Ada Slideshow foto

swiffy-sliders

swiffy-sliders tutorial This link..>

Linklist

Ada Linklist "ol" dan "ul"..

ul class a = normal
ul class a = normal

ol class a = normal
ol class a = normal

ul class a = circle
ul class a = circle

ul class a = square
ul class a = square

ul class a = upper-roman
ul class a = upper-roman

ul class a = lower-alpha
ul class a = lower-alpha

Card

Ada Card..

Blockquote

Ada Blockquote

blockquote class= kutipan

blockquote class= blockquote dan tag "p"

blockquote class= kutipan bg-fnote1 pd8 r8

blockquote class= kutipan bg-fnote2 pd8 r8

blockquote class= kutipan bg-fnote3 pd8 r8

blockquote class= kutipan bg-fnote4 pd8 r8

blockquote class= kutipan bg-fnote5 pd8 r8

blockquote class= kutipan bg-fnote6 pd8 r8

blockquote class= kutipan bg-fnote7 pd8 r8 putih

blockquote class= kutipan bg-fnote8 pd8 r8

blockquote class= kutipan bg-fnote9 pd8 r8 putih

blockquote class= kutipan bg-fnote10 pd8 r8 putih

<blockquote class="kutipan">
    blockquote class= kutipan
</blockquote>
<blockquote class="blockquote">
    <p>
        blockquote class= blockquote dan tag "p"
    </p>
</blockquote>

<blockquote class="kutipan bg-fnote1 pd8 r8">
    blockquote class= kutipan bg-fnote1 pd8 r8
</blockquote>
<blockquote class="kutipan bg-fnote2 pd8 r8">
    blockquote class= kutipan bg-fnote2 pd8 r8
</blockquote>
<blockquote class="kutipan bg-fnote3 pd8 r8">
    blockquote class= kutipan bg-fnote3 pd8 r8
</blockquote>
<blockquote class="kutipan bg-fnote4 pd8 r8">
    blockquote class= kutipan bg-fnote4 pd8 r8
</blockquote>
<blockquote class="kutipan bg-fnote5 pd8 r8">
    blockquote class= kutipan bg-fnote5 pd8 r8
</blockquote>
<blockquote class="kutipan bg-fnote6 pd8 r8">
    blockquote class= kutipan bg-fnote6 pd8 r8
</blockquote>
<blockquote class="kutipan bg-fnote7 pd8 r8 putih">
    blockquote class= kutipan bg-fnote7 pd8 r8 putih
</blockquote>
<blockquote class="kutipan bg-fnote8 pd8 r8">
    blockquote class= kutipan bg-fnote8 pd8 r8
</blockquote>
<blockquote class="kutipan bg-fnote9 pd8 r8 putih">
    blockquote class= kutipan bg-fnote9 pd8 r8 putih
</blockquote>
<blockquote class="kutipan bg-fnote10 pd8 r8 putih">
    blockquote class= kutipan bg-fnote10 pd8 r8 putih
</blockquote>

Gambar

Ada Konten Gambar

<div class="foto-grid4col">
    <div class="ft-grid4col-items">
        <img class="img-konten" src="" alt="" />
        <div class="ket">
            ini gambar 1 foto
        </div>
        
    </div>
    
</div>

Form

Ada Form cari/filter..grid 1 Layout

Ada Form cari data tabel

Ada Form login

Login Page

<section class="login-container">
    <div class="login-content">
        <h2 class="">Login Page</h2>
        <form id="#" method="get" action="#">
            <label class=""><b>User Name</b></label>
            <input type="text" name="Uname" class="Uname" placeholder="Username"> <br /> <br />
            <label class=""><b>Password</b></label>
            <input type="password" name="Pass" class="Pass" placeholder="Password"> <br /> <br />
            <button class="log" type="submit">Login</button>
            <br /> <br /> <br />
            <hr />
            <input type="checkbox" id="check">
            <span class="">Remember me</span>
            <hr />
            <br />
            <p class="">
                Lupa <a href="#">Password ?</a>
            </p>
        </form>
    </div>
</section>

<div class="login-container">
    <div class="login-content bg-merah">
        <h2 class="putih">Login Page</h2>
        <form id="#" method="get" action="#">
            <label class="bg-kuning putih"><b>User Name</b></label>
            <input type="text" name="Uname" class="Uname pink" placeholder="Username"> <br /> <br />
            <label class="bg-hijau putih"><b>Password</b></label>
            <input type="password" name="Pass" class="Pass pink" placeholder="Password"> <br /> <br />
            <button class="log" type="submit">Login</button>
            <br /> <br /> <br />
            <hr />
            <input type="checkbox" id="check">
            <span class="putih">Remember me</span>
            <hr />
            <br />
            <p class="putih">
                Lupa <a class="kuning" href="#">Password ?</a>
            </p>
        </form>
    </div>
</div>

Navigasi

Contoh 1

Beranda Berita Hubungi Tanya Unduh

> Code 1

Contoh 2

Beranda Berita Hubungi Tanya Unduh

> Code 2

Contoh 3

Beranda Berita Hubungi Tanya Unduh

> Code 3

Contoh 4

Beranda Berita Hubungi Tanya Unduh

> Code

navigasi lain:

nav-kuning; onclick="kuningFunction()"

nav-biru; onclick="biruFunction()"

nav-ping; onclick="pingFunction()"

Navigasi Dropdown

Blok

Contoh 1

Welcome to Framecss

versi 3 Alpha

Indonesia

> Code

tambah bg-NamaWarnaBackground, misalnya bg-merah, bg-biru, bg-oren

Welcome to Framecss

versi 3 Alpha

Indonesia

> Code

Contoh lainnya

Welcome to Framecss

versi 3 Alpha

Indonesia

> Code

class blok lainnya: blok-ping, blok-kuning, blok-ungu, blok-magenta, blok-teal

Modals

Contoh 1

> Code

Contoh 2

> Code

Contoh lainnya:

> Code

<div id="myModal-mag" class="modalmag">
    <div class="modalmag-content-mag">
        <div class="modalmag-header-mag">
            <span class="closemag">×</span>
            <h2>Modal Header</h2>
        </div>
        <div class="modalmag-body-mag">
            <p>
                Some text in the Modal Body
            </p>
            <p>
                Some other text...
            </p>
        </div>
        <div class="modalmag-footer-mag">
            <h3>Modal Footer</h3>
        </div>
    </div>
</div>

<div id="myModal-oren" class="modaloren">
    <div class="modaloren-content-oren">
        <div class="modaloren-header-oren">
            <span class="closeoren">×</span>
            <h2>Modal Header</h2>
        </div>
        <div class="modaloren-body-oren">
            <p>
                Some text in the Modal Body
            </p>
            <p>
                Some other text...
            </p>
        </div>
        <div class="modaloren-footer-oren">
            <h3>Modal Footer</h3>
        </div>
    </div>
</div>

<div id="myModal-merah" class="modalmerah">
    <div class="modalmerah-content-merah">
        <div class="modalmerah-header-merah">
            <span class="closemerah">×</span>
            <h2>Modal Header</h2>
        </div>
        <div class="modalmerah-body-merah">
            <p>
                Some text in the Modal Body
            </p>
            <p>
                Some other text...
            </p>
        </div>
        <div class="modalmerah-footer-merah">
            <h3>Modal Footer</h3>
        </div>
    </div>
</div>

Button

Contoh Button Grup Horizontal

> Code

Contoh Button Grup Vertikal

grup vertikal : animasi bg- berubah

> Code

Contoh Button

> Code

<button class="tombol layang-merah u10px" type="submit">Tombol</button>
<button class="tombol-kuning r12" type="submit">tombol-kuning</button>
<button class="tombol-ping r8px layang" type="submit">tombol-ping</button>
<button class="tombol-magenta u25px layang-hijau" type="submit">tombol-magenta</button>

<button class="btn" type="submit">btn</button>
<button class="btn success" type="submit">btn success</button>
<button class="btn danger" type="submit">btn danger</button>
<button class="btn info" type="submit">btn info</button>
<button class="btn warning" type="submit">btn warning</button>
<button class="btn default" type="submit">btn default</button>

<button class="button putih bg-merah" type="submit">button</button>
<button class="button success" type="submit">button success</button>
<button class="button danger" type="submit">button danger</button>

Button Loading

Code..

Tabel

Contoh

no	nama
1	nelsen
2	niko

> Code

Contoh 2

no	nama
1	nelsen
2	niko

> Code 2

Contoh lainnya:

> Code

Warna

Contoh 1

class=" "		warna
Indonesia	Inggris	warna
hijau	green
oren	orange
kuning	yellow
biru	blue
merah	red
ping	pink
ungu	purple
coklat	brown
hitam	black
putih	white
magenta	magenta
olive	olive
emerald	emerald
amber	amber
teal	teal
lime	lime
steel	steel
cobalt	cobalt
mauve	mauve
taupe	taupe
crimson	crimson
contoh : class="red" []; class="hijau" []; class="oren" [] .... untuk Background, tambahkan "bg-" didepan nama warna. contoh : bg-hijau, bg-magenta, bg-ungu, bg-blue, bg-purple..

> Code

Contoh

class=" "		warna
Indonesia	Inggris	warna
bs-hijau	bs-green
bs-oren	bs-orange
bs-kuning	bs-yellow
bs-biru	bs-blue
bs-merah	bs-red
bs-ping	bs-pink
bs-ungu	bs-purple
bs-teal	bs-teal
bs-abu	bs-gray
bs-indigo	bs-indigo
bs-cyan	bs-cyan
contoh : class="bs-merah" []; class="bs-hijau" []; class="bs-oren" [] .... untuk background: tambahkan "l" didepan "bs-".. contoh lbs-indigo, lbs-merah, lbs-ping

> Code

Background

Contoh 1 : gunakan "bg-"

bg-hijau, teks putih, padding 5 px

bg-kuning, teks hitam, padding 3 px

bg-ungu, teks putih, padding 8 px, radius 12px

> Code

Contoh 2: gunakan "lbs-"

lbs-biru, teks putih, padding 5 px

lbs-kuning, teks hitam, padding 3 px

lbs-ungu, teks putih, padding 8 px, radius 8px

> Code

Contoh Background Gradient

Framecss 3 Background Color sublime-light

Framecss 3 Background Color dusty-grass

Framecss 3 Background Color kye-meh

Framecss 3 Background Color amin

Framecss 3 Background Color megatron

Framecss 3 Background Color ohhappiness

Framecss 3 Background Color lawrencium

Framecss 3 Background Color crystalline

Framecss 3 Background Color premium-dark

Framecss 3 Background Color pink-fish

Framecss 3 Background Color fresh-air

Framecss 3 Background Color cherry-blossom

Framecss 3 Background Colorsl sea-lord

> Code

Animasi

Contoh

ini animasi animate__animated animate__bounce

ini animasi animate__animated animate__pulse

ini animasi animate__animated animate__flash

ini animasi animate__animated animate__rubberBand

> Code : tambahkan animate__animated + animate__NAMA-ANIMASI

> Code

nama class :

animate__bounce

animate__flash

animate__pulse

animate__rubberBand

animate__shakeX

animate__shakeY

animate__headShake

animate__tada

nama lainnya:

1. Attention seekers

bounce

flash

pulse

rubberBand

shakeX

shakeY

headShake

swing

tada

wobble

jello

heartBeat

2. Back entrances

backInDown

backInLeft

backInRight

backInUp

3. Back exits

backOutDown

backOutLeft

backOutRight

backOutUp

4. Bouncing entrances

bounceIn

bounceInDown

bounceInLeft

bounceInRight

bounceInUp

5. Bouncing exits

bounceOut

bounceOutDown

bounceOutLeft

bounceOutRight

bounceOutUp

6. Fading entrances

fadeIn

fadeInDown

fadeInDownBig

fadeInLeft

fadeInLeftBig

fadeInRight

fadeInRightBig

fadeInUp

fadeInUpBig

fadeInTopLeft

fadeInTopRight

fadeInBottomLeft

fadeInBottomRight

7. Fading exits

fadeOut

fadeOutDown

fadeOutDownBig

fadeOutLeft

fadeOutLeftBig

fadeOutRight

fadeOutRightBig

fadeOutUp

fadeOutUpBig

fadeOutTopLeft

fadeOutTopRight

fadeOutBottomRight

fadeOutBottomLeft

8. Flippers

flip

flipInX

flipInY

flipOutX

flipOutY

9. Lightspeed

lightSpeedInRight

lightSpeedInLeft

lightSpeedOutRight

lightSpeedOutLeft

10. Rotating entrances

rotateIn

rotateInDownLeft

rotateInDownRight

rotateInUpLeft

rotateInUpRight

11. Rotating exits

rotateOut

rotateOutDownLeft

rotateOutDownRight

rotateOutUpLeft

rotateOutUpRight

12. Specials

hinge

jackInTheBox

rollIn

rollOut

13. Zooming entrances

zoomIn

zoomInDown

zoomInLeft

zoomInRight

zoomInUp

14. Zooming exits

zoomOut

zoomOutDown

zoomOutLeft

zoomOutRight

zoomOutUp

15. Sliding entrances

slideInDown

slideInLeft

slideInRight

slideInUp

Sliding exits

slideOutDown

slideOutLeft

slideOutRight

slideOutUp

Icons

Icons menggunakan Fontsawesome 5

> Code

Contoh

> Code

button to top

Modal Header

Some text in the Modal Body

Some other text...

Modal Header

Some text in the Modal Body

Some other text...

Modal Header

Some text in the Modal Body

Some other text...

Modal Header

Some text in the Modal Body

Some other text...

Menu :

Mulai

Grid konten

Grid 4 col

Grid 4 col

Grid 4 col

Grid 4 col

Grid 3 col

Grid 3 col

Grid 3 col

Grid 2 col

Grid 2 col

Grid 1 col

Login Page

Navigasi

Blok

Welcome to Framecss

Welcome to Framecss

Welcome to Framecss

Modals

Button

Button Loading

Code..

Tabel

Warna

Background

Framecss 3 Background Color sublime-light

Framecss 3 Background Color dusty-grass

Framecss 3 Background Color kye-meh

Framecss 3 Background Color amin

Framecss 3 Background Color megatron

Framecss 3 Background Color ohhappiness

Framecss 3 Background Color lawrencium

Framecss 3 Background Color crystalline

Framecss 3 Background Color premium-dark

Framecss 3 Background Color pink-fish

Framecss 3 Background Color fresh-air

Framecss 3 Background Color cherry-blossom

Framecss 3 Background Colorsl sea-lord

Animasi

Icons

Modal Header

Modal Footer

Modal Header

Modal Footer

Modal Header

Modal Footer

Modal Header

Modal Footer

Modal Header

Modal Footer

Breadcrumb

Code

Kunjungi Github Fcss Github ><