designflowcss

v2.0.0

Published

a month ago

A framework for designers with pre-configured CSS and JS files.

Downloads

0High
0Medium
0Low

charlesmallya

css framework design

1. Introduction

Project Overview

DesignFlow CSS is a lightweight, easy-to-use CSS framework designed to help developers rapidly prototype user interfaces while maintaining their creative freedom. Unlike other frameworks that may require complex configurations for advanced animations and effects, DesignFlow allows users to achieve stunning visuals with minimal effort. Whether you're a beginner or an experienced developer, DesignFlow empowers you to "Stay Creative" without compromising on design quality.

Tagline

"Stay Creative" – DesignFlow CSS ensures that you don’t lose your unique touch while building fast and responsive UIs.

Key Features

Basic Shapes: Quickly create and style common shapes like rectangles, circles, and lines.
Visual Effects: Effortlessly apply popular effects like Glassmorphism and Neumorphism with simple class names.
Animations: Implement smooth and captivating animations without writing complex keyframes.
Customization Flexibility: Seamlessly integrate DesignFlow with your custom CSS for enhanced creativity.
Beginner-Friendly: Easy to learn and use, even for those new to CSS frameworks.

2. Getting Started

Installation

To start using DesignFlow CSS, you have two options: download the files directly or install via npm. Choose the method that best fits your workflow.

Option 1: Direct Download

Step 1: Download the Files
- Download the designflow.css and designflow.js files from the official repository (or provided download link).
- Place them in your project’s directory, preferably in a css or assets folder for better organization.

Step 2: Link the Files in Your HTML

Include the DesignFlow CSS and JS files in the <head> section of your HTML document:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>🐣DesignFlow | QuickStart</title>
    <!-- 🐣DesignFlowCss -->
    <link rel="stylesheet" href="path/to/designflow.css" />
    <link rel="stylesheet" href="path/to/your/normal.css" />
    <script src="path/to/designflow.js" defer></script>
  </head>
  <body>
    <!-- Your content goes here -->
  </body>
</html>

Option 2: Install via npm

Step 1: Install DesignFlow CSS

i. Open your terminal and run the following command to install DesignFlow CSS via npm:

npm install designflowcss

ii. After the installation, you should see normal.css and quickstart.html files in the root of your project directory, ready for use

*Note: The normal.css and quickstart.html files are automatically copied to your project's root directory, providing a ready-made setup to get started quickly.*

Basic Usage

Once you have linked the DesignFlow files, you can start using the classes provided by the framework to style your elements.

Example: Creating a Simple Centered Heading html

<section class="home flex items-center justify-center">
  <div class="fsz-30px fade-in-first"><strong>🐣Design</strong>FlowCss</div>
</section>

In this example:

flex items-center justify-center: Centers the content both vertically and horizontally.
fsz-30px: Sets the font size to 30px.
fade-in-first: Adds a smooth fade-in animation to the text.

By following these steps, you can quickly set up a project with DesignFlow and begin prototyping your UI with ease.

Here's what you should be able to see when everything is setup correctly:

Preview:

Slide 3 GIF

3. Core Features

DesignFlow CSS is built to empower developers and designers to rapidly prototype UIs while maintaining creative freedom. Below are some of the core features that make DesignFlow stand out:

1. Simple and Intuitive Classes

DesignFlow CSS offers a collection of simple, intuitive classes that make it easy to apply styles without the need for extensive custom CSS. Whether you're a beginner or an experienced developer, you can quickly implement design elements with minimal effort.

Example: Basic Layout

<div class="flex items-center justify-between p-20px">
  <div class="box shadow-lg">Box 1</div>
  <div class="box shadow-lg">Box 2</div>
</div>

flex: Enables flexbox for the container.
items-center: Vertically centers the content.
justify-between: Distributes items evenly with space between.
p-20px: Adds 20px padding.

2. Built-in Effects and Animations

DesignFlow CSS includes built-in effects like Glassmorphism and Neumorphism, as well as animations that can be applied with just a single class.

Example: Glassmorphism Card

<div class="glass p-40px m-20px">
  <h2 class="fsz-24px">Welcome to DesignFlow</h2>
</div>

glass: Applies a frosted glass effect.
p-40px and m-20px: Adds padding and margin for spacing.
fsz-24px: Sets the font size to 24px.

3. Quick Prototyping

The framework is designed with rapid prototyping in mind. You can swiftly create and test layouts, effects, and interactions without writing a single line of custom CSS.

Example: Neumorphism Button

<button class="neumorphism fsz-18px p-10px">Click Me</button>

neumorphism: Gives the button a soft, raised look.
fsz-18px: Sets the font size to 18px.
p-10px: Adds 10px padding around the text.

4. Customization and Flexibility

While DesignFlow CSS is powerful out-of-the-box, it’s also highly customizable. You can easily override or extend the default styles with your own custom CSS to match your project’s needs.

Example: Overriding Styles

/* Custom Styles */
.custom-btn {
    background-color: #ff5733;
    border-radius: 8px;
}

<button class="custom-btn fsz-20px p-15px">Custom Button</button> .custom-btn:
Adds a custom background color and border radius.

4. Semantic Classes

One of the key concepts behind DesignFlow CSS is the use of semantic classes. These classes are named to represent the function or role of the element in your UI, making your HTML more meaningful and easier to work with. By using semantic class names, you can improve the clarity of your code and create a more maintainable and scalable design system.

i. What Are Semantic Classes?

Semantic classes are class names that reflect the purpose or identity of the element they are styling. Instead of using arbitrary or purely stylistic names, semantic classes describe what the element is or does.

Example:

<div
  class="card bgw flex w-410px h-100px items-center gap-20px p-10px radius-10px shadow-smr cursor-pointer fade-in-first"
>
  <img src="img/user-1.svg" alt="user-image" width="72" />
  <div class="details linel:1px,#ccc pl-10px">
    <strong class="tpr">Footprint Arts</strong>
    <p class="tsc text-sm">Lorem ipsum dolor sit amet consectetur.</p>
  </div>
  <div class="time textsz-12px flex flex-col items-center gap-3px">
    <p>16:47pm</p>
    <div
      class="unread w-20px h-20px bgpr text-white flex justify-center rounded"
    >
      2
    </div>
  </div>
</div>

In this example:

card describes the element as a card component.
details groups the text and description of the card.
time specifies the area where the time is displayed.
unread indicates the section that shows unread messages.

Preview:

Card GIF

ii. Benefits of Using Semantic Classes

Clarity: Your HTML becomes self-explanatory, making it easier to understand the structure and purpose of each element.
Maintainability: It’s easier to manage and update your styles when your class names reflect the role of the elements they are applied to.
Scalability: As your project grows, semantic class names help you maintain a consistent naming convention, making your codebase more scalable.

iii. Examples of Semantic Classes in DesignFlow

Here are some examples of how semantic classes can be used in various contexts within DesignFlow CSS:

a. Layout Grouping:

<div class="biggroup flex mb-10px">
  <div class="group flex-1">
    <h1 class="fsz-72px ff-Heading1 fade-in-first">DealBook Summit</h1>
    <p class="fsz-26px ff-Heading2 fade-in-second">
      Business. Politics. Culture. Where it all connects.
    </p>
    <p class="fsz-26px ff-Heading2 decoration-underline fade-in-second">
      November 29, 2023
    </p>
    <p class="fsz-26px ff-Heading2 fade-in-second">New York City</p>
  </div>
  <button
    class="button px-20px py-10px bgc-transparent self-center fade-in-first"
  >
    LEARN MORE
  </button>
</div>

In this example:

biggroup: Groups multiple sections into a larger container.
group: Represents a smaller grouping within the biggroup.
button: Clearly indicates a button element, simplifying identification.

here's a quick preview of this code:

Preview:

Layout-1 GIF

b. Title and Input Fields:

<div class="title flex items-center justify-between">
  <h1>Share</h1>
  <div class="icon">▼</div>
</div>
<div class="input mt-20px bgc-#eee flex p-8px gap-10px radius-8px mb-25px">
  <img src="img/search-icon.svg" alt="search-icon" />
  <input
    type="text"
    placeholder="Search"
    class="outline-none bgc-transparent border-none text-sm"
  />
</div>

In this example:

title: Indicates a title section.
icon: Represents an icon within the title.
input: Defines a styled input area for user interaction.

c. Applying Semantic Classes in Your Projects

When using DesignFlow CSS,

consider adopting semantic class names to keep your HTML clear and organized.
Name your classes based on the component’s function, such as header, footer, content, or sidebar.
This practice helps you and your team quickly grasp the structure and purpose of each part of your project.

4. Core Design Principles

DesignFlow CSS is built on several core design principles that ensure its effectiveness and versatility. Understanding these principles will help you make the most of the framework and apply it effectively in your projects.

i. Flexibility and Customization

DesignFlow CSS is designed to be highly flexible, allowing users to adapt the framework to their specific needs. Whether you're working on a simple landing page or a complex web application, you can easily customize the framework to fit your project’s requirements.

ii. Simplicity and Ease of Use

One of the main goals of DesignFlow CSS is to simplify the process of designing and prototyping. The framework provides easy-to-use utility classes and predefined styles to accelerate development without sacrificing creativity.

Example:

<div class="container p-20px">
  <h1 class="fsz-36px">Welcome to DesignFlow</h1>
  <button class="button bgc-#f7f7f7 text-white">Get Started</button>
</div>

Here, container, p-20px, fsz-36px, button, bgc-#f7f7f7, and text-white make it easy to apply consistent styles with minimal effort.

5. Advanced Features

DesignFlow CSS includes several advanced features to help you create more complex and visually appealing designs. These features are designed to be easy to implement and customize.

i. Complex Animations

DesignFlow CSS supports complex animations that can be easily integrated into your projects. Use predefined animation classes or create your own custom animations to add dynamic effects.

Example:

<div class="animated-element bounce-in">
  <p>Watch me bounce!</p>
</div>

ii. Built-in Animations

DesignFlow CSS has cool built-in animations that can be easily integrated into your projects with the use of just class-names.

Example:

<div class="animated-element fade-in-first">
  <p>Watch me fade-in!</p>
</div>

In this example, fade-in-first is a custom animation class that applies a fade-in effect to the element.

iii. Basic Shapes

DesignFlow CSS not only simplifies basic styling but also provides powerful classes for creating shapes and responsive layouts tailored to specific devices. Below are some of the advanced features that make your design process even more efficient.

DesignFlow CSS includes predefined classes to easily create common geometric shapes such as rectangles, circles, and squares. These classes save time and ensure consistency in your designs.

a.) Rectangle (`.rect:`)

Create a rectangle with custom dimensions.

<div class="rect:200px,100px,blue"></div>

200px: Sets the width to 200px.
100px: Sets the height to 100px.
blue: Applies a primary background color.

Preview:

Rectangle GIF

b.) Circle (.circle:)

Create a perfect circle by applying equal width and height, with a border-radius of 50%.

<div class="circle:300px,pink"></div>

300px: Sets both the width and height to 100px.
pink: Applies a background-color.

Preview:

Circle GIF

c.) Square (.sq:)

Create a square with equal width and height.

<div class="sq:200px,blue"></div>

200px: Sets both the width and height to 150px.
blue: Applies an accent background color.

Preview:

Square GIF

iv. Quick Mobile Dimensions

DesignFlow CSS offers specific classes for laying out your designs on popular mobile devices, ensuring a seamless user experience across various screen sizes.

a.) iPhone 14 Layout (.iphone14)

This class optimizes the layout for the iPhone 14 screen size, applying the dimensions of iphone14 quickly on your container.

<div class="iphone14 bgc-white p-10px centered-col">
  <h2>iPhone 14 Layout</h2>
  <p>This layout is tailored for iPhone 14.</p>
</div>

bgc-white: Applies a white background color.
p-10px: Adds 10px padding.
centered-col: Centers the text horizontally.

Preview:

iPhone GIF

b.) Mobile Layout (.mobile)

Similar to the iPhone 14 class, but optimized for the Generic Mobile dimensions.

<div class="mobile bgc-#000 p-10px centered-col">
  <h2 class="text-white">Generic mobile</h2>
  <p>This layout is optimized for Generic</p>
</div>

bgc-#000: Applies a dark background color.
text-white: Sets the text color to white.
p-10px: Adds 10px padding.
centered-col: Centers the text horizontally.

Preview:

Mobile GIF

7. Best Practices

To make the most out of DesignFlow CSS, consider the following best practices:

Use Semantic Classes: Keep your HTML clean and understandable by using semantic class names.
Customize Responsibly: Use the framework’s customization features to adapt styles while maintaining consistency.
Optimize Performance: Keep an eye on performance by avoiding unnecessary styles and ensuring efficient usage of classes.

6. Contributing to DesignFlow CSS

If you’d like to contribute to the development of DesignFlow CSS, please follow these guidelines:

Fork the Repository: Start by forking the DesignFlow CSS repository on GitHub.
Create a Branch: Make your changes in a separate branch.
Submit a Pull Request: Describe your changes and submit a pull request for review.

7. Getting Help

If you have any questions or need support, feel free to reach out through the following channels:

GitHub Issues: Report bugs or request features.

Email: Contact us directly for more personalized help.

[[email protected]] [linkedin.com/in/charles-mallya-a26530280]

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

1. Introduction

Project Overview

Tagline

Key Features

2. Getting Started

Installation

Option 1: Direct Download

Option 2: Install via npm

Basic Usage

Here's what you should be able to see when everything is setup correctly:

3. Core Features

1. Simple and Intuitive Classes

2. Built-in Effects and Animations

3. Quick Prototyping

4. Customization and Flexibility

4. Semantic Classes

i. What Are Semantic Classes?

ii. Benefits of Using Semantic Classes

iii. Examples of Semantic Classes in DesignFlow

4. Core Design Principles

i. Flexibility and Customization

ii. Simplicity and Ease of Use

5. Advanced Features

i. Complex Animations

ii. Built-in Animations

iii. Basic Shapes

a.) Rectangle (.rect:)

b.) Circle (.circle:)

c.) Square (.sq:)

iv. Quick Mobile Dimensions

a.) iPhone 14 Layout (.iphone14)

b.) Mobile Layout (.mobile)

7. Best Practices

6. Contributing to DesignFlow CSS

7. Getting Help

a.) Rectangle (`.rect:`)