This is WCKD

WCKD UI

alert

If you've just discovered WCKD UI for the first time, welcome! While it's not quite ready yet, rest assured that we're actively working on it. Be sure to check back periodically for updates.

Custom websites with less work

Our mission is to provide a blueprint for better marketing and empower those involved.

What's WCKD UI

Introducing "WCKD UI", a powerful class-based UI framework created and maintained by Cory Marazzo to simplify web development and design. WCKD UI offers a complete toolkit tailored to enhance digital experiences, with a focus on quality, accessibility, and efficiency.

Built on HTML, CSS, and vanilla JavaScript, WCKD UI ensures seamless compatibility across different web environments while keeping things lightweight and performance-optimized. With zero external dependencies, WCKD UI minimizes overhead and simplifies integration into your projects.

What sets WCKD UI apart is its flexible approach to styling. Instead of imposing predefined styles, WCKD UI provides unstyled components, allowing designers and developers to customize UI elements effortlessly to match branding and design preferences.

Download builder

To optimize page load speed, only select the WCKD UI Components that are necessary for your project. The selected components are minified and will be bundled into a single JavaScript and CSS file. For intended functionality, please ensure to download and include the SVG Icons sprite, as some components rely on it.

Select WCKD UI Components to download
  • File Size: 0 KB
  • File Size: 0 KB
  • File Size: 31 KB

Installation

You will need to include the wckd-ui.css and wckd-ui.js files you downloaded in your page. Example:


                   <!DOCTYPE html>
                   <html lang="en">
                   <head>
                       <meta charset="utf-8">
                       <meta name="viewport" content="width=device-width, initial-scale=1">
                       <title>Your page</title>         
                       <link rel="stylesheet" href="/path/to/dist/wckd-ui.css">
                       <link rel="stylesheet" href="/path/to/dist/theme.css">
                   </head>
                   <body>    
                       <!-- Build the page here -->
                       <script src="/path/to/dist/wckd-ui.js"></script>
                   </body>
                   </html>

Copy wckd-icons.svg into your project directory and update the file path in wckd-ui.js

Build the site

Get to know our foundational thinking and how we put it into action across our UI framework and design system.

HTML Structure

  • html HTML (Hypertext Markup Language) is the standard language for creating web pages. It provides a structure for content by using tags, allowing developers to define different elements on a webpage.
    • headThe head tag contains meta-information about the document, such as the title, linked stylesheets, scripts, and other essential elements that aren't directly displayed on the webpage.
    • bodyThe body tag encloses the main content of an HTML document, including text, images, links, and other elements that users interact with and see on a webpage.
      • #header"#header" refers to the top section of a webpage, containing branding, navigation menus, or other key elements that are meant to appear at the top of the page.
      • #page"#page" represents the entire content area of a webpage, encapsulating everything displayed within the browser window.
        • #sidebar"#sidebar" refers to a section on the side of the main content area, often used for supplementary information, navigation menus, or other secondary content.
        • #main "#main" denotes the primary content area of a webpage, excluding headers, footers, and sidebars. It is where the main information or focus of the page resides.
          • .section".section" is a generic class used to group and style related content within the HTML structure, providing a way to organize and visually distinguish different sections of a webpage.
            • .head".head" refers to a specific section within a section, containing a heading or title. It is used to structure and style a distinct part of the content.
            • .columns".columns" is a class that may be applied to structure content into multiple columns, allowing for a more organized and visually appealing layout.
              • .column".column" is used in conjunction with ".columns" to define individual columns within a layout, specifying the arrangement of content side by side.
            • .foot".foot" represents the footer section of a section, usually containing copyright information, links, and other content that appears at the bottom of the section.
      • #footer"#footer" refers to the bottom section of a webpage, containing information like copyright notices, links to privacy policies, and other footer-related content.

CSS Styling

JavaScript Behaviour

Component-Based Architecture

Templating

Accessibility and Usability

Testing and Debugging

Contribute to WCKD

WCKD welcomes contributions from everyone who shares our goals and wants to contribute constructively and respectfully within our community. To find out how to get started, see Contributing information page in our documentation.

On this page