Logo

ACODE Simple Framework

This very lightweight CSS/JS framework for lightning fast frontend development. Keep It Simple!!


Breadcrumbs

You can also use <a> to link them

<ul class="breadcrumbs">
    <li>Home<li>
    <li>Parent<li>
    <li>Child<li>
    <li>Here<li>
</ul>

Cards & Colors

Card Title
Card content
.disable text
.accent text
.primary text
.secondary text
.tertiary text
.accent-bg .clickable .card
.primary-bg .card (.toLeft & .shadow2)
.secondary-bg .card (.toCenter & .shadow3)
tertiary-bg .flat .card (toRight)
.truncated .card with very long text: Proin feugiat aliquam tortor, id hendrerit urna semper pulvinar. Nullam iaculis aliquam risus, nec tempus quam condimentum ut. Proin nibh nisl, imperdiet non dictum quis, sodales quis risus. Lorem Ipsum gravida rhoncus

Typo

h1 Heading

h2 Heading

h3 Heading

h4 Heading

h5 Heading
h6 Heading

This is a paragraph. It uses imported Open Sans.

Pre-Formatted text
Default Quote
Accent Quote

All formatting tags are by default: Code, Bold, Strong, Italic, Emphasized, Marked, Small, Deleted Inserted, Subscript, Superscript, etc...


Grid

xs, s, m, l, xl... Too many! No class needed, easy as that! Responsive on 650px

<section>
    <div>1<div>
    <div>2<div>
    <div>3<div>
</section>
1
2
3
4
5
6
7
8
9
10
11
12
1
2
3
4
5
1
2
3
It's flexbox

Images

Images are always responsive!

example

You can add .rounded corners

example

Or make it .circle (check proportions!)

example
example
example
example
example
example

It can be combined on a card

example
Important info about the picture

Buttons

Buttons are full width on grid

Buttons can also be .circle

There's also a FAB (float action button) at the right bottom of this page! check it out!


Icons

Some icons you may need. Do you need more? It's freaking easy to add new icons!

CSS
.icon.yourIcon {
    -webkit-mask-image: url(/inc/img/icon/yourIcon.svg);
    mask-image: url(/inc/img/icon/yourIcon.svg);
}

HTML
<span class="icon yourIcon"></span>
        
Add
Close
Delete
Down
Empty
Filled
Left
Mail
Menu
Message
Ok
Power
Right
Setup
Up
User

Lists

Can be "Style-ed"

Can be "Grid-ed"

  • New York
  • Rent 1 house 1K
  • Rent 2 houses 3K
  • Paris
  • Rent 1 house 2K
  • Rent 2 houses 5K

Forms

Error
Information
Any Date
0

Loaders

Circular

<div class="loading"></div>

Bars

<div class="loadingBar b2">
    <div class="bar"></div>
    <div class="bar"></div>
</div>

Fixed

<div class="loadingFixed">
    <div class="percentage" style="width: 25%"></div>
</div>

Tables

Out of the box

Name Last Name Age Country Phone
Andres Robert 36 Chile +569 5209 4004
Amelie Poisont 24 France +123 4567 8901
Suyeong Choi 47 South Korea +234 5678 9012
Bjorn Lomborg 56 Netherlands +345 6789 0123
Jason Bourne 29 USA +456 7890 1234

Vendor DataTables Plugin

Name Last Name Age Country Phone
Andres Robert 36 Chile +569 5209 4004
Amelie Poisont 24 France +123 4567 8901
Suyeong Choi 47 South Korea +234 5678 9012
Bjorn Lomborg 56 Netherlands +345 6789 0123
Jason Bourne 29 USA +456 7890 1234
Andres Robert 36 Chile +569 5209 4004
Amelie Poisont 24 France +123 4567 8901
Suyeong Choi 47 South Korea +234 5678 9012
Bjorn Lomborg 56 Netherlands +345 6789 0123
Jason Bourne 29 USA +456 7890 1234
Andres Robert 36 Chile +569 5209 4004
Amelie Poisont 24 France +123 4567 8901
Suyeong Choi 47 South Korea +234 5678 9012
Bjorn Lomborg 56 Netherlands +345 6789 0123
Jason Bourne 29 USA +456 7890 1234

Collapsible


Carousel


Modals


Tabs

Content for Tab One
Another content for another tab
Another content for another tab
Final tab!! No js needed, pure css ^_^ (hint: radio button does the trick!)
Smaller Version!!
Another content for another tab
Another content for another tab
Final tab!! No js needed, pure css ^_^ (hint: radio button does the trick!)

Bottom Menu

Add
Chat
Mail
Logout
Add content for tab
Maybe a form to sent a comment
Feed with mails
Good bye message...

JS Helpers

// toggle between classes
toggle.class('id', 'className');
// add classes
add.class('id', 'className');
// remove classes
remove.class('id', 'className');
// on events
on.click('id', handler => {});
on.change('id', handler => {});
on.keyup('id', handler => {});
on.mousedown('id', handler => {});
on.focus('id', handler => {});
on.blur('id', handler => {});
// init specific components by id
init.counter('id');
init.bottomMenu('id');
// init all components
init.checkbox();
init.radio();
init.range();
init.collapse();
// show snackbar
snackbar.show('message', 'classes', duration);
// ajax Promise
ajax.post('/url', {data});

CSS Helpers

/* Fixed header and footer */
.fixed
/* Convert div on a card */
.card
/* Point out buttons */
.sonar
/* pre, div & span resized font */
.d5 -> .d1 (0.5em -> 0.9em)
.x1 -> .x9 (1em -> 3em)
/* Shadows */
.flat
.shadow1 -> .shadow3
/* Flex width */
.f2 -> .f11
/* Icon sizes */
.x2 -> .x9 (1.2em -> 3em)
/* Font weight */
.light, .normal, .bold
/* Text align */
.toLeft, .toCenter, .toRight
/* Attributes */
.unselectable, .truncated, .clickable, .rounded, .hidden, .hideOnSmall, .showOnSmall, .keepOnSmall
/* Separation */
.upperGap, .lowerGap

Use it Now!

<link href="https://simple.acode.cl/cdn/acode.0.1.css" rel="stylesheet" type="text/css">
<script src="https://simple.acode.cl/cdn/acode.0.1.js" type="text/javascript"></script>

Or download it Here

Or check this project out!

Example Themes - change it!

Active Theory

Paypr

Resn

W&CO

Julie Flogeac

Epic

Based on Nayomi Chibana, writer at Visme Visual Learning Center. Visit here