designsystemsoss/eccentrictouch

Modern. Scalable design support

Eccentric Touch - Modern. Scalable design support

Table of Contents

1. About The Project
2. Built With
3. Getting Started
4. Usage
5. Contributing
6. License

About the project

A modern library which will make your code more reliable and easy to go with. The Eccentric touch is a CSS library where you can easily find styles for html elements. It will optimize your time and provide you with a lot of options to choose from. Instead of writing an enormous amount of CSS, you can just pick a design of your choice and use it in your code. And, VOILA!! It sounds super serene.

Built with

These library is designed with the use of technologies like:-

• HTML
• CSS/SCSS

Getting started

To begin with, you need to set up the project locally on your device.Before using our project, one must have a text editor. We recommend you the Visual Code Studio. Follow the steps given below for Installation of Git:-

1. Download Git from the browser.
2. Setup git on your device.
3. Once git is ready to go, set the author name and email of the user.
4. Author name: git config --global user . name “yourname”.
5. Email address: git config --global user.email “youremail”.
   There you go, Git terminal is all set to be used.

Usage

This CSS library is useful in many ways:-

1. It provides direct Access to various components such as buttons, typography,links etc.
2. With the use of the SCSS framework, animations have become more interesting.
3. It brings a more standardized practice for web development.
4. It can fast-track your web development effort as it allows you to use predefined web elements.

Contributing

Contribution is what makes open source amazing place to learn, inspire and insightful. All the Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change. Steps to be followed while contributing:-

1. Fork the Project.
2. Create your Feature Branch git checkout -b branch_name.
3. Add the files git add .
4. Commit your Changes git commit -m "<type>: Add message about your changes (mention-issue-ID)".
5. Push to the Branch git push origin branch_name.
6. Open a Pull Request.

License

This project is Licensed by [MIT].

eccentrictouch's Issues

[Component Feature]: Button Group component to be added

Is your feature request related to a problem? Please describe.
We need to implement a button group feature as well in the library.

Describe the solution you'd like
The code/feature implementation will look something like this

<div class="btn-group">
  <button>Apple</button>
  <button>Samsung</button>
  <button>Sony</button>
</div>

The division will be holding all the buttons inserted in it.

Useful Links

• Read this article and you'll get an idea (https://www.w3schools.com/howto/howto_css_button_group.asp)

CSS Implementation for Checkboxes

This is a feature request v2.0 (Sprint 02). This project needs all possible CSS Properties and here we have a feature request to implement Checkboxes. We need to implement this feature as shown below.

Refer to this document for detailed info.

Also, Let's work together, Join our discord server: https://discord.gg/8JVG5rwW

Button onfocus border issues

Describe the bug
The button on focusing is removing the borders of the secondary button.

[DOCS]: Update README file

Is your feature request related to a problem? Please describe.
A Need to change some of the sections in the README and update them according to the new features.

Things to add

• Project Introduction
• Version Releases
• How to contribute
• Community Guidelines

[Documentation] Content for README file needed

Message

This project doesn't have a proper README file till now.

Issue Description

This project doesn't have a proper README file till now. We need content which a new contributor can refer to in order to get started with contribution. The content should contain all the necessary points listed below:

• Introduction (Nice Description)
• Getting Started
• How to use?
• How to setup
• Versions/Supporting Platforms
• Events
• Additional Information

Add a pointer cursor on the buttons

Is your feature request related to a problem? Please describe.
When the pointer is hovered on the buttons on homepage, pointer should be cursor type.

[NEW CONTRIBUTOR, OPEN THIS]: Need to add contributors name/details in the README.md file

If you have raised a valid/helpful issue, discussion idea, and raised a PR with valuable code changes then congrats!! You have contributed to this project. Now as you have done your first contribution in this project, we are giving you a chance to highlight yourself.

Add your GitHub profile photo, Any personal profile URL of your choice, and an emoji that you like.

Just like the above image, you can add a personalized card. Just go to the README.md and do the respective changes and Raise a PR.

Thanks & Congrats on Contributing to this Project. Let's make the Open Source Community Strong :)

CSS Implementation for Textboxes

This is a feature request v2.0 (Sprint 02). This project needs all possible CSS Properties and here we have a feature request to implement text boxes. We need to implement this feature as shown below.

• Textboxes
• Textareas

Refer to this document for detailed info.

Also, Let's work together, Join our discord server: https://discord.gg/8JVG5rwW

Padding Methods

[DOCS]: Input/Form elements are not correct in the documentation

Describe the bug
The form elements have not inherited the CSS properties which are in the Code.

[Designing] Logo needed for Eccentric Touch

Description

We need a clean logo for Eccentric Touch Project.

Add font family classes

Create a set of classes to directly access the font families of eccentric touch.

[FEATURE]: Implementation of Accordion

Description

An accordion menu is a vertically stacked list of headers that can be clicked to reveal or hide content associated with them.

Implementation (Design)

Input Elements Design

Is your feature request related to a problem? Please describe.
Need to design a set of all input type elements.

Describe the solution you'd like
Write structured class-based methods to implement all these features. Also, Test your methods in the respective test files, for this issue, it'll be src/lib/components/componentTest.htm

CSS Implementation for Select options

Is your feature request related to a problem? Please describe.

This is a feature request v2.0 (Sprint 02). This project needs all possible CSS Properties and here we have a feature request to implement select options. We need to implement this feature as shown below.

Refer to this document for detailed info.

Also, Let's work together, Join our discord server: https://discord.gg/8JVG5rwW

CSS for radio buttons

Is your feature request related to a problem? Please describe.
This is just an addition to the buttons section.

Describe the solution you'd like
Creating radio buttons keeping in mind the color palette

[Docs]: Add a How to Contribute Section in the README

Is your feature request related to a problem? Please describe.
There should a section to explain to new open source contributors that How to start contributing to this project. From Forking, Cloning to Making Bug Reports, Feature requests. Create short-concise but informative content for this section.

Add dark mode toggle button

Please can you assign this to me under LGM SOC'21?

[Testing] Testing CSS Class Methods

Hello Fellow Testers, Looking for bugs? We have so many of them and we need you to resolve them.

Describe the bug
There are so many CSS Class methods which needs to be tested before production.

How to get started?

1. Go to src/lib/...
2. Select a feature folder for which you want to write tests for.
3. Write Test Methods for different scenarios in the respective HTML Module of that folder.
4. See for errors. If found any, Report a ne issue. Else, Write complete tests and submit with screenshots of the output.

Expected Updates

1. Test Modules with Clean Code.
2. Screenshots of the test case results.

Looking forward to get amazing test updates.

Button CSS is not working

CSS Button Method for this property is not working. Although, There's no such typo error in the codebase.

CSS Method

This is the implementation that is not working

And the Implementation Output is

Add Layout Feature in the Project

Adding Layout feature in this project can be a good idea like adding padding, margin, display and justify content etc.

[FEATURE]: Implementation of Progress Bars

Description
CSS for implementing progress bars is needed. The length of the progress with be operated by various classes defining various lengths for the progress bars.

How to implement this feature
There will be 2 divisions, one inside another. The parent div will act as a complete bar and the internal div will be operated accordingly by using the width property in CSS.

[FEATURE]: Implementation of Progress Bars

Description

CSS for implementing progress bars is needed. The length of the progress with be operated by various classes defining various lengths for the progress bars.

How to implement this feature

There will be 2 divisions, one inside another. The parent div will act as a complete bar and the internal div will be operated accordingly by using the width property in CSS.

This is a demo UI of how the progress bars will look like.

Wrong version on the docs.

Describe the bug
When you read on how to link eccentric to your webpage it says it's at version 1.0.

To Reproduce
Steps to reproduce the behavior:

1. Go to https://designsystemsoss.github.io/eccentrictouch.docs/#/?id=documentation-eccentric-touch-v20
2. Click on https://designsystemsoss.github.io/eccentrictouch.docs/#/?id=how-to-link
3. See error

Expected behavior
I think the version should be 2.0 according to the CDN link.

Screenshots

Adding designs of Glass Morphism.

Adding some amazing designs of glass morphism.
It will include Screenshots, videos, Figma/AdobeXd prototypes.

JSDeliver - CDN Link is not working

Describe the bug
After generating a CDN Link for the eccentric.css module, We are unable to fetch the CSS Data.

(JS-0125) Found the usage of undeclared variables

Description

Variable that are not defined but they are being used in the code. This would give a potential errors that may break the code. It might have happen due to mistype of the variable name. <!--more--> Potential ReferenceErrors may result from misspellings of variable and parameter names, or accidental implicit …

Occurrences

There are 24 occurrences of this issue in the repository.

See all occurrences on DeepSource → deepsource.io/gh/DesignSystemsOSS/eccentrictouch/issue/JS-0125/occurrences/

Adding more buttons

Is your feature request related to a problem? Please describe.
The site has four buttons and I want to add four more.

Describe the solution you'd like
Will add more more buttons and will reflect the same in docs

Describe alternatives you've considered
N/A

Additional context

Please assign me this issue under lgm-soc participant

Adding Header Designs

Here we will add various designs for header related content.

Only Header!!!!!

JS Tests for Testing CSS Methods

Is your feature request related to a problem? Please describe.
As we are performing most of the unit tests manually, We need a JS Code to do so.

Describe the solution you'd like
We will create various DOM Objects which will use all the classes and IDs, precisely.

Need to create a complete Style Guide for the Eccentric Touch

Is your feature request related to a problem? Please describe.
This is a component CSS Library and later It'll be having CSS Methods for basic & high-level components too. In Order to make the implementation easy for the users, we need to start working on a Styleguide for our project. Which will be containing things like Implementation, Usage, Variations, Adding external CSS Components into our components, Do's & Dont's, and Overall Best Practices.
The Styleguide will be implemented on the website and in a Markdown file also.

Describe alternatives you've considered
Try Looking to these websites/webpages for more reference.

• https://material.io/design
• https://material.io/components?platform=web

Scroll To Top button

I would like to add a scroll to the top button. Please assign me this issue.

Onclick outline to be removed from primary button components

Describe the bug
The primary buttons are still showing the black outline on-click event. Remove the onf-ocus effect using CSS

Before on-click event

After on-click event

Flex Properties Implementation using SCSS/CSS

Is your feature request related to a problem? Please describe.
Eccentric Touch needs a flex-properties system. Classes with various flex properties (Ex: inline, block, flex, etc).

Need to add some tools such as Lint, Babel etc

We need to add some tools/modules in the project

• ESLints
• Babel Files

Hide Packages

Suggested to hide packages if not using !!

Body Margins to be removed

Describe the bug
The centering body margins to be removed from CSS.

body {
    margin-right: auto;
    margin-left: auto;
    max-width: 1400px;
}

The code snippet given above has to be removed from the main eccentric.scss and eccentric.css modules.

Hide Wiki Tab

Suggested to hide Wiki Tab if not being used !!

Input:Month is not working correctly

Describe the bug
The CSS properties for form/input elements is not being implemented correctly on the input:month component.

The usual components are looking like this

But the input:month component is breaking

The issues are just related to the component's Border Radius and Border

• The border has to be removed
• Border Radius should be 4px

cannot change the default font size of HTML elements in the CDN

Describe the bug
If the user adds the CDN link to their file, then they cannot use the default HTML h1-h6 elements font size so this can be an issue.

Expected behavior
we can make new classes for font sizes so users can use the HTML default size as well as the eccentric touch classes.

Screenshots

Header Design CSS Implementation

Describe the solution you'd like
This issue is for header design sprints. Here all the designs for header v.1.0 will be listed for agile development.

Describe alternatives you've considered
Header Design Tags are listed below:

• Header Designs by @Jaspreet099
• Header Designs by @atharvagadkari05
• Header Designs by @Kp779
• Header Designs by @yashsehgal

Testing Sprints

• Usability Testing
• Scalibility Testing
• Modularity Testing

Additional Details

• This issue is linked to #27
• After completion of this sprint, both #27 and this issue will be closed.

[Component Implementation]: Header Component CSS/JS properties to be added

Is your feature request related to a problem? Please describe.
We need to create a set of linked CSS Properties for our header component. Its implementation should be this easy that the user just has to create a header component using the header tag <header> and an options list using the <li> tag.

This would give the user a Header like this ⬇️

Ignore the logo, which can be added using the float: left; property whereas all the header options will be shifted to the right section using float: right;.

Also, This header component will have a feature of self-modification using JS with CSS/SCSS, of course.
So that, The User doesn't have to create a separate header for responsiveness of the website. In fact, This header will automatically be converted to a Hamburger Menu.

This issue has 3 milestones:

• Header Implementation for Desktop View
• Header Implementation for Mobile Views
• Tests for Header Component should be written

[ISSUE_TEMPLATE]: Need to add 2 new ISSUE_TEMPLATES

Is your feature request related to a problem? Please describe.
We are planning to add 2 new workflows, An issue template for applying for maintainer request and one for joining the Organization.

Create 2 ISSUE_TEMPLATES modules as:

1. maintainer_request.md
2. community_joining.md

Add respective content for the templates.

To add automatic releases

We are planning to add github-action that will automate the releasing process.
This release will be having a properly defined description template.

[Development] Image Responsiveness

Describe the bug
Images library has a flex class that is not showing its actual height and width. You need to write some CSS/SCSS code to fix this issue.

How to change

1. Go to src/lib/images/images.scss
2. Scroll down in the file and find a class named as cartoon_image_container
3. Test that class with different images of different sizes and observe the error and solve this problem.

Desktop (please complete the following information):

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

[Sprint 01]: Secondary Buttons

add color box using HEX colors

can I work on this issue under LGM-SOC'21

Add opacity effects in the buttons

Add opacity effects to the button demo's under the Buttons section in components. It will give the feeling of pressing the button.

Reference below...

I would like to work on this issue under LGMSOC, please assign me...

(JS-0125) Found the usage of undeclared variables

Description

Variable that are not defined but they are being used in the code. This would give a potential errors that may break the code. It might have happen due to mistype of the variable name. <!--more--> Potential ReferenceErrors may result from misspellings of variable and parameter names, or accidental implicit …

Occurrences

There are 12 occurrences of this issue in the repository.

See all occurrences on DeepSource → deepsource.io/gh/DesignSystemsOSS/eccentrictouch/issue/JS-0125/occurrences/

[NEW FEATURES]: More input components CSS Implementation is required

Is your feature request related to a problem? Please describe.
There are so many input features remaining as of now. Such as

Describe the solution you'd like
Some of the input elements are modified and most of them are remaining.