Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
  • Loading branch information
rudransh61 committed Mar 11, 2024
2 parents 10c6b6d + 420e323 commit 7a7a44a
Show file tree
Hide file tree
Showing 355 changed files with 38,387 additions and 43,126 deletions.
24 changes: 24 additions & 0 deletions .github/workflows/code-quality.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
jobs:
codcov:
runs-on: ubuntu-latest

steps:
- name: Checkout
uses: actions/checkout@v2
with:
# Make sure the actual branch is checked out when running on pull requests
ref: ${{ github.head_ref }}

- name: Setup Python
uses: actions/setup-python@master
with:
python-version: 3.7
- name: Generate coverage report
run: |
pip install pytest
pip install pytest-cov
pytest --cov=./api
- name: Check code coverage
uses: codecov/codecov-action@v3
with:
token: ${{ secrets.CODECOV_TOKEN }}
33 changes: 33 additions & 0 deletions .github/workflows/manual.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
# This is a basic workflow that is manually triggered

name: Manual workflow

# Controls when the action will run. Workflow runs when manually triggered using the UI
# or API.
on:
workflow_dispatch:
# Inputs the workflow accepts.
inputs:
name:
# Friendly description to be shown in the UI instead of 'name'
description: 'Person to greet'
# Default value if no value is explicitly provided
default: 'World'
# Input has to be provided for the workflow to run
required: true
# The data type of the input
type: string

# A workflow run is made up of one or more jobs that can run sequentially or in parallel
jobs:
# This workflow contains a single job called "greet"
greet:
# The type of runner that the job will run on
runs-on: ubuntu-latest

# Steps represent a sequence of tasks that will be executed as part of the job
steps:
# Runs a single command using the runners shell
- name: Send greeting
run: echo "Hello ${{ inputs.name }}"
- run: bash build.sh
2 changes: 1 addition & 1 deletion .gitignore
Original file line number Diff line number Diff line change
@@ -1 +1 @@
*node_modules/*
node_modules
40 changes: 40 additions & 0 deletions CODE STRUCTURE.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@

# Code Structure

SCSS is used for NextGenCSS .

The Main SCSS file is ```./src/index.scss```.

Then this SCSS file is converted in CSS file located at ```./src/final/index.css/index.css/```

And this CSS file is minified and stored it into ```./src/index.css``` file.

## Important Note

For converting SCSS into CSS
```bash
$ npm run scss
```

For converting that CSS file into minified CSS
```bash
$ npm run next-gen-css
```

Or for automating both the commands , run ```./build.sh``` only.
```bash
$ ./build.sh
```

## SCSS code file structure

The SCSS code in in ```./src``` directory , And it is divided into different folders

- ```./base``` : It includes all the basic styles for elements , and basic utilities like border , buttons and some optimizations for faster rendering .
- ```./components``` : It custom components like 'box' , 'card' and etc.
- ```./fonts``` : It includes all styles related to fonts
- ```./form``` : It includes all styles for a form
- ```./grid``` : It includes grid system and styles related to them.
- ```./utilities``` : It includes all utility classes like align , display , padding , margin and etc ...
- ```./variables``` : It includes all variables used in all styles and color variables also

90 changes: 68 additions & 22 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,23 +3,30 @@

# NextGenCSS 🔥

<div align="center">
<img src="./logo.png" width="200"/>
<h1>NextGenCSS🔥</h1>
<p>A flexible and fast CSS framework with your custom utility names...</p>

[![MIT License](https://img.shields.io/badge/License-MIT-green.svg)](https://choosealicense.com/licenses/mit/)
[![MIT License](https://img.shields.io/badge/License-MIT-green.svg)](https://choosealicense.com/licenses/mit/)
[![GPLv3 License](https://img.shields.io/badge/License-GPL%20v3-yellow.svg)](https://opensource.org/licenses/)
[![AGPL License](https://img.shields.io/badge/license-AGPL-blue.svg)](http://www.gnu.org/licenses/agpl-3.0)
![SASS](https://img.shields.io/badge/SASS-hotpink.svg?style=for-the-badge&logo=SASS&logoColor=white)
![CSS3](https://img.shields.io/badge/css3-%231572B6.svg?style=for-the-badge&logo=css3&logoColor=white)
</div>

[![GPLv3 License](https://img.shields.io/badge/License-GPL%20v3-yellow.svg)](https://opensource.org/licenses/)
You can change the utility name as you want in a simple click for team....
# Now no need to learn any name of classes and check documentation

[![AGPL License](https://img.shields.io/badge/license-AGPL-blue.svg)](http://www.gnu.org/licenses/agpl-3.0)

![SASS](https://img.shields.io/badge/SASS-hotpink.svg?style=for-the-badge&logo=SASS&logoColor=white)

![CSS3](https://img.shields.io/badge/css3-%231572B6.svg?style=for-the-badge&logo=css3&logoColor=white)
This is a fast easy CSS framework for your next project . It will provide a bunch of features to fast your development process and make writing CSS fast !!!

![](https://github.com/rudransh61/NextGenCSS-/blob/master/neumorphicstyle.gif)
![](https://github.com/rudransh61/NextGenCSS-/blob/master/video_example.gif)

![logo](./logo.png)
![meme](./img1.jpg)

This is a fast easy CSS framework for your next project . It will provide a bunch of features to fast your development process and make writing CSS fast !!!
## !!! Version 0.1 released

**currently under development



Expand All @@ -43,8 +50,14 @@ Learn this CSS library of next generation .

[Documentation](https://nextgencss.gitbook.io/untitled/)



Learn this in 4 minutes , check wiki page for Beginners's Guide
[wiki](https://github.com/rudransh61/NextGenCSS-/wiki/Learn-it-in-4-minutes-...)

** v0.1 released introducing new features :-
- Curve border classes
- Some templates for copy paste
- Navbar Component
# NOTE:- The documentation for v0.1 is not updated yet , we will update it as fast as possible

## Contributing

Expand All @@ -67,6 +80,32 @@ See `CONTRIBUTING.md` for ways to get started.



## How to Use it ?

Firstly , Use it if you want to create custom syntax for you team's CSS classes , or want your own names in a CSS library

To use it Install the project (For installation check below).

Install all dependencies

Then change the file `/src/syntax/_syntax.scss` and change the name of your wish like

```scss
$syntax : (
...other code
padding : "my-padding",
..other code
);

```

And then Run `build.sh` file in root folder
```shell
$ build.sh
```

Now you can copy the file `/src/index.css`
and use it in your project

## Installation

Expand All @@ -91,17 +130,10 @@ cd src

Open the ```index.html``` file in ``` ./example``` directory

Or ,
You can see example project directly from this [codepen](https://codepen.io/rudransh61/pen/bGzLZzY) link

Install dependencies



```bash
- You can see example project directly from this [codepen](https://codepen.io/rudransh61/pen/bGzLZzY) link

- You can also use replit templates [template](https://replit.com/@Rudransh61/NextGenCSS-Starter-Template) link

```

# Main CSS file to Include

Expand All @@ -113,6 +145,7 @@ Install dependencies


For support, contribute with us .
Or sponsor if u want



Expand All @@ -129,7 +162,7 @@ For support, contribute with us .
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/rudransh61/NextGenCSS-/src/index.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/rudransh61/NextGenCSS-/src/index.css" media="print" onload="this.media='all'">
</head>
<body>
<h1>Namaste 🙏</h1>
Expand All @@ -150,6 +183,13 @@ For support, contribute with us .
![example2](example2.png)


## VIDEO


https://github.com/rudransh61/NextGenCSS-/assets/115872354/08cf0c1a-3afa-4269-b8c1-8d1fc48e5900




## Thanks to our Contributors !!!!!
<!-- Copy-paste in your Readme.md file -->
Expand All @@ -158,5 +198,11 @@ For support, contribute with us .
<img src = "https://contrib.rocks/image?repo=rudransh61/NextGenCSS-"/>
</a>

Lets Make it to 100🌟

## Star History

[![Star History Chart](https://api.star-history.com/svg?repos=rudransh61/NextGenCSS-&type=Date)](https://star-history.com/#rudransh61/NextGenCSS-&Date)


Thanks 😁
2 changes: 2 additions & 0 deletions build.sh
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
#!/bin/bash

# go to the src folder
cd ./src

Expand Down
55 changes: 54 additions & 1 deletion example/example2.html
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,8 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/rudransh61/NextGenCSS-/src/index.css">
<link rel="stylesheet" href="../src/index.css" media="print"
onload="this.media='all'">
</head>
<body>
<h1>This is h1 tag</h1>
Expand All @@ -29,5 +30,57 @@ <h6>This is h6 tag</h6>
<li>li 2</li>
<li>li 3</li>
</ol>

<div class="container mg-3">
<div class="column b-dark">
<div class="card">
<h3 class="card-title">Hello</h3>
<p class="card-body">Lorem ipsum, dolor sit amet consectetur adipisicing elit.</p>
</div>
</div>
<div class="column b-dark">
<div class="card">
<h3 class="card-title">Hello</h3>
<p class="card-body">Lorem ipsum, dolor sit amet consectetur adipisicing elit.</p>
</div>
</div>
<div class="column b-dark">
<div class="card">
<h3 class="card-title">Hello</h3>
<p class="card-body">Lorem ipsum, dolor sit amet consectetur adipisicing elit.</p>
</div>
</div>
<div class="column b-dark">
<div class="card">
<h3 class="card-title">Hello</h3>
<p class="card-body">Lorem ipsum, dolor sit amet consectetur adipisicing elit.</p>
</div>
</div>
<div class="column b-dark">
<div class="card">
<h3 class="card-title">Hello</h3>
<p class="card-body">Lorem ipsum, dolor sit amet consectetur adipisicing elit.</p>
</div>
</div>
</div>

<!--Neumorphism -->
<div class="neumorphic-card">
<h2 class="neumorphic-heading">Neumorphic Card</h2>
<p class="neumorphic-paragraph">This is a neumorphic card with some content.</p>
<div class="neumorphic-border">
<!-- Content with neumorphic border -->
<p>This is an example of a neumorphic-bordered section.</p>
</div>
</div>

<button class="neumorphic-button">Neumorphic Button</button>

<input type="text" class="neumorphic-input" placeholder="Neumorphic Input">

<div class="neumorphic-toggle">
<input type="checkbox" id="toggle" />
<label for="toggle" class="neumorphic-toggle-label"></label>
</div>
</body>
</html>
48 changes: 48 additions & 0 deletions example/forms.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="../src/index.css">
</head>

<body>
<div class="center">
<div class="form-container">
<input type="text" class="input" placeholder="Username">
<input type="password" class="input" placeholder="Password">
<button class="button">Submit</button>
<div class="checkbox">
<input type="checkbox" id="checkbox1" class="checkbox">
<label for="checkbox1">Checkbox</label>
</div>
<div class="radio">
<input type="radio" id="radio1" class="radio" name="radioGroup">
<label for="radio1">Radio 1</label>
</div>
<div class="radio">
<input type="radio" id="radio2" class="radio" name="radioGroup">
<label for="radio2">Radio 2</label>
</div>
<select class="select">
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
</select>
<textarea class="textarea" placeholder="Your message"></textarea>
<p class="error-message">This is an error message.</p>
<p class="success-message">This is a success message.</p>
</div>

<button class="btn-secondary">Secondary Button</button>
<button class="btn-danger">Danger Button</button>
<button class="btn-large">Large Button</button>
<button class="btn-small">Small Button</button>
<button class="btn-rounded">Rounded Button</button>
</div>


</body>

</html>
Loading

0 comments on commit 7a7a44a

Please sign in to comment.