Here's a quick demo of some things you can do with this tool kit. If you know what you're doing, feel free to delete everything and start from scratch. If not, allow us to introduce some of the features of Darkwave:

DW is a "batteries-included" tool kit for quickly developing data-driven web applications. It's a pragmatic configuration of helpful libraries, light application boilerplate, and a turn-key solution for user authentication and management. It also establishes sensible conventions you can use to quickly build custom CRUD apps or SaaS projects to suit your individual needs.

What's included?

Optional included libraries:

Boilerplate functionality!

  • Full authentication process - login, register, forgot pw
  • Sample blank application starter (you're looking at it)
  • User management system which also provides full-stack examples of how to use DW for CRUD operations, form handling, photo uploading, and more

Resources

Basic UI Components

Additional Resources

  • Subnav - When using the default base template and components, a subnav can be easily added using a simple PHP array. See the /demo section of the index controller and the subnav section of the base template.
  • HBS helpers - Slime-render provides a couple custom HBS helpers and makes it easy to add your own. See the initialize_handlebars_helpers() section of the slime-render class for an example. The HBS Cookbook provides more information for building simple and block custom helpers.
  • More BS components - There are A LOT of Bootstrap components out there. The official BS examples and BS cheatsheet are good places to start.
  • Customizing Tabler - Tabler is designed to be easily customized with css variables added to the :root element. See the Tabler docs for a customization example, and tabler.css for the default variable names and values.

Form Elements

Select
Select multiple
@
.domain.com
https://domain.com/users/
.domain.com
Invalid feedback
38% Complete
Radios
Inline Radios
Radio Buttons
Checkboxes
Inline Checkboxes
Button Checkboxes
Toggle switches
Custom File Input

Colors

bl
az
in
pu
pi
re
or
ye
li
gr
te
cy
da
mu
bl
az
in
pu
pi
re
or
ye
li
gr
te
cy
da
mu
bl
az
in
pu
pi
re
or
ye
li
gr
te
cy
da
mu

Modals

Bootstrap provides excellent support and configuration options for modal components. However, the process of using them programmatically with JS is cumbersome and involved, so we've developed an abstraction function that writes the required markup as needed and accepts JSON parameters for configuration.

See the DW JS utility library for more information on how to use and configure the dw.modal() function.

The Tabler Preview also provides some more modal configuration examples.

Here's a simple demo of some of the kinds of modals you can make. If you inspect the source, you'll notice they're all triggered with JS onclick events.

Other Dialogs

Tooltips

Placeholder text to demonstrate some inline links with tooltips. This is now just filler, no killer. Content placed here just to mimic the presence of real text. And all that just to give you an idea of how tooltips would look when used in real-world situations. So hopefully you've now seen how these tooltips on links can work in practice, once you use them on your own site or project.

Popovers

Offcanvas

Start offcanvas

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab assumenda ea est, eum exercitationem fugiat illum itaque laboriosam magni necessitatibus, nemo nisi numquam quae reiciendis repellat sit soluta unde. Aut!

End offcanvas

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab assumenda ea est, eum exercitationem fugiat illum itaque laboriosam magni necessitatibus, nemo nisi numquam quae reiciendis repellat sit soluta unde. Aut!

Top offcanvas

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab assumenda ea est, eum exercitationem fugiat illum itaque laboriosam magni necessitatibus, nemo nisi numquam quae reiciendis repellat sit soluta unde. Aut!

Bottom offcanvas

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab assumenda ea est, eum exercitationem fugiat illum itaque laboriosam magni necessitatibus, nemo nisi numquam quae reiciendis repellat sit soluta unde. Aut!

Toasts

Alerts

Warning!

To be honest, if it's wrong, I don't want to be right. I don't wanna talk if you're not gonna talk to me nice.

ERROR - Please fill out any missing fields and try submitting again.
EXCELLENT - You successfully read this important alert message.
Heads up - This alert needs attention, but it's not super important.
HEY - This is a generic alert message. Got it? OK you can close this now.
HEY - This is a generic alert message. Got it? OK you can close this now.
HEY - This is a generic alert message. Got it? OK you can close this now.

Typograpy

Walk on promised roads

I could take a joke

Have you ever seen a ghost pop out like a toast? You woke up late, the breakfast's closed. You know I don't brag, but I'm about to boast. Fabrics on my body, it's designer probably. Can't you see I'm litty? Rollin' like a trolley?

Won't come to your party 'cause your friends are boring. I'll be in the city walking around like a tourist.

When you look at me and hate on me, I'm a mirror. If you look at me and don't like me what doesthat say about you? I am King Nothing, I am nothing, take a bunch of empty words and make them mean something. I've been getting no gifts for a while, is Christmas coming? I'm a good boy on the track, no cussing.

Please do not give me any more flak, I am struggling. I'm about to start crying in my bed, evil words spin around my head.

I'm going Trash Star crazy. I'm Bladee, she call me Bladey.[1] Angel or demon maybe...I'm trying do what I can. Can you please comprehend me? Why can't you understand?

I'll shine some glory on your life.

𓆩♡𓆪

I am not anyone, I'm just some air inside the air. A piece of sand in all the sand, drop of water in the ocean. It may not seem that way, but I can promise you it's that. But enough of that, I'm coming back...
I jump right back into the trash

Benjamin Reichwald

Use the <abbr> tag like this: kthxbi

Select some text, then press + C to copy. To paste, press + V

Use NPX to get a quick DW clone: npx degit jyoungblood/darkwave#0.6.1 .

// preformatted text block — no syntax highlighting tho ¯\_(ツ)_/¯

const notify = function(message){
  alert(message);
}

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Text color

This is an example of 'text-primary'
This is an example of 'text-secondary'
This is an example of 'text-success'
This is an example of 'text-warning'
This is an example of 'text-danger'
This is an example of 'text-info'
This is an example of 'text-dark'
This is an example of 'text-light'
This is an example of 'text-blue'
This is an example of 'text-azure'
This is an example of 'text-indigo'
This is an example of 'text-purple'
This is an example of 'text-pink'
This is an example of 'text-red'
This is an example of 'text-orange'
This is an example of 'text-yellow'
This is an example of 'text-lime'
This is an example of 'text-green'
This is an example of 'text-teal'
This is an example of 'text-cyan'
This is an example of 'text-muted'

Antialiasing

Text with antialiasing
Text without antialiasing

Ordered list

  1. Spiderr
  2. Icedancer
  3. The Fool
  4. Crest
  5. 333
  6. Gluee
  7. Exeter
  8. Good Luck
  9. Eversince
  10. Red Light
  11. rip bladee

Unordered list

  • Icedancer
  • Eversince
  • Red Light
  • The Fool
  • Crest
    • Desire is a Trap
    • Faust
  • 333
  • Exeter
  • Gluee
  • Spiderr

Inline list

  • Spiderr
  • Icedancer
  • The Fool
  • Crest
  • 333
  • Gluee
  • Exeter
  • Good Luck
  • Eversince
  • Red Light

Description List

Spiderr
I am slowly but surely losing hope
Icedancer
Mallwhore Freestyle
Red Light
Steve Jobs

Unstyled list

  • This is a list.
  • It appears completely unstyled.
  • Structurally, it's still a list.
  • However, this style only applies to immediate child elements.
  • Nested lists:
    • are unaffected by this style
    • will still show a bullet
    • and have appropriate left margin
  • This may still come in handy in some situations.

Tables

Bootstrap Default Table

Type Column heading Column heading Column heading
Default Column content Column content Column content
Default Column content Column content Column content
Default Column content Column content Column content
Default Column content Column content Column content
Primary Column content Column content Column content
Secondary Column content Column content Column content
Success Column content Column content Column content
Danger Column content Column content Column content
Warning Column content Column content Column content
Info Column content Column content Column content
Dark Column content Column content Column content
Light Column content Column content Column content

Responsive Table

Name Title Email Role
Paweł Kuna UI Designer, Training paweluna@howstuffworks.com User Edit
Jeffie Lewzey Chemical Engineer, Support jlewzey1@seesaa.net Admin Edit
Mallory Hulme Geologist IV, Support mhulme2@domainmarket.com User Edit
Dunn Slane Research Nurse, Sales dslane3@epa.gov Owner Edit
Emmy Levet VP Product Management, Accounting elevet4@senate.gov Admin Edit
Maryjo Lebarree Civil Engineer, Product Management mlebarree5@unc.edu User Edit
Egan Poetz Research Nurse, Engineering epoetz6@free.fr Admin Edit
Kellie Skingley Teacher, Services kskingley7@columbia.edu Owner Edit
HOT TIP - See the DW Users screen for a good example of a sortable and striped responsive table.

Misc Elements

Tabbed Sections

I stay out of sight, it's a satellite life. Got a shadow ice knife, Gucci lenses on my eyes. Bank account match my clothing size. That explains the price of my shoes. I got news, you can get cut up like fruit. Bladee one sound like Akon when I make songs. Say some wrong, you may run, you get rained on.

Someone rather than no one, I got no one. I was so wrong, waiting so long. You were no one, hold on. I should go home to the chrome zone. No ozone, sold my soul, now my soul's gone.

I hold the map, I got the keys to the city. GTB, I see machines in the city. Helicopters when we leave in December. On my LG, call my team, we assemble. I'm beyond, I don't believe in the system. You can sing, I press delete, I don't listen. I got items, I'm complete for no reason. Got no meaning, pull the card, get a reading.

Thaiboy Goon, I got that weed in my system. You can sing, I press delete, I don't listen. I got cash, I pull up clean for no reason. On my iPhone, call my team, now I'm beaming. Thaiboy Goon, I make the scene when I'm dreaming. GTBSBE, we riding with no ceiling. Yung Thaiboy Goon, I'm posted in the building. You can sing, I press delete, I don't listen.

Pagination

Badges

Primary Secondary Success Danger Warning Info Dark Light

Accordion

This is the first item's accordion body. It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.

This is the second item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.

This is the third item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.

List Groups