AtHeartEngineer/wakuconnect.dev
1
0
Fork 0
mirror of https://github.com/vacp2p/wakuconnect.dev.git synced 2026-01-09 15:28:03 -05:00
Code Issues Packages Projects Releases Wiki Activity

Initial project

Browse Source
This commit is contained in:
Pawel
2021-09-13 11:15:50 +02:00
commit 138335349e
11 changed files with 202774 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
.gitignore vendored Normal file
View File

@@ -0,0 +1,4 @@
.DS_Store
node_modules
/dist
.idea

65
README.md Normal file
View File

@@ -0,0 +1,65 @@
# Tailwind CSS Boilerplate
Tailwind CSS boilerplate for HTML projects. Bare-bones HTML starter template with Tailwind CSS, PostCSS, Gulp, Browsersync & Imagemin.
The main purpose of this boilerplate is to simplify the configuration of Tailwind CSS for beginners.
## How to use this Tailwind CSS Boilerplate
1. Clone the repository:
```bash
git clone git@github.com:salttechno/tailwindcss-boilerplate.git <YOUR_PROJECT_NAME>
cd <YOUR_PROJECT_NAME>
```
Or else simply download boilerplate's zip file from [this link](https://github.com/salttechno/tailwindcss-boilerplate).
2. Install the dependencies:
```bash
# if you are using npm
npm install
# OR if you are using Yarn
yarn
```
3. Start the development server:
```bash
# if you are using npm
npm run dev
# OR if you are using Yarn
yarn run dev
```
Now you should be able to see the project running at [localhost:3000](http://localhost:3000).
4. Open `./index.html` in your editor (VS Code recommended) and start editing!
## Optimizing for production
Tailwind CSS output needs to be optimized for the production use. The development version for the CSS file is almost 4MB which is not good for production websites. [Read this for more details](https://tailwindcss.com/docs/optimizing-for-production). This boilerplate **helps you generate the production version** of your CSS file easily & quickly.
We have configured `purge` option for PostCSS & Tailwind CSS. To build optimized version of your custom CSS, simply run:
```bash
# if you are using npm
npm run build
# OR if you are using Yarn
yarn run build
```
For optimizing your images, simply run:
```bash
# if you are using npm
npm run build-images
# OR if you are using Yarn
yarn run build-images
```

1
_config.yml Normal file
View File

@@ -0,0 +1 @@
theme: jekyll-theme-slate

183925
assets/css/styles.css Normal file
View File

File diff suppressed because it is too large Load Diff

46
gulpfile.js Normal file
View File

@@ -0,0 +1,46 @@
const { watch, series, src, dest } = require("gulp");
var browserSync = require("browser-sync").create();
var postcss = require("gulp-postcss");
const imagemin = require("gulp-imagemin");
// Task for compiling our CSS files using PostCSS
function cssTask(cb) {
return src("./src/*.css") // read .css files from ./src/ folder
.pipe(postcss()) // compile using postcss
.pipe(dest("./assets/css")) // paste them in ./assets/css folder
.pipe(browserSync.stream());
cb();
}
// Task for minifying images
function imageminTask(cb) {
return src("./assets/images/*")
.pipe(imagemin())
.pipe(dest("./assets/images"));
cb();
}
function browsersyncServe(cb) {
browserSync.init({
server: {
baseDir: "./",
},
});
cb();
}
function browsersyncReload(cb) {
browserSync.reload();
cb();
}
// Watch Files & Reload browser after tasks
function watchTask() {
watch("./**/*.html", browsersyncReload);
watch(["./src/*.css"], series(cssTask, browsersyncReload));
}
// Default Gulp Task
exports.default = series(cssTask, browsersyncServe, watchTask);
exports.css = cssTask;
exports.images = imageminTask;

14
index.html Normal file
View File

@@ -0,0 +1,14 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="assets/css/styles.css" rel="stylesheet" />
<title>DApp Connect</title>
</head>
<body>
<div class="container mx-auto py-12">
<h1 class="text-4xl font-bold text-gray-900">Initial project</h1>
</div>
</body>
</html>

18666
package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

28
package.json Normal file
View File

@@ -0,0 +1,28 @@
{
"name": "dapp-connect",
"version": "1.0.0",
"description": "DApp Connect - landing page",
"main": "index.html",
"scripts": {
"dev": "gulp",
"build": "NODE_ENV=production gulp css",
"build-images": "gulp images"
},
"keywords": [
"tailwindcss",
"boilerplate",
"gulp",
"postcss",
"browsersync",
"imagemin"
],
"devDependencies": {
"autoprefixer": "^10.2.4",
"browser-sync": "^2.26.14",
"gulp": "^4.0.2",
"gulp-imagemin": "^7.1.0",
"gulp-postcss": "^9.0.0",
"postcss": "^8.2.6",
"tailwindcss": "^2.0.3"
}
}

6
postcss.config.js Normal file
View File

@@ -0,0 +1,6 @@
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
};

8
src/styles.css Normal file
View File

@@ -0,0 +1,8 @@
@tailwind base;
@tailwind components;
body {
@apply bg-white text-gray-700 font-sans;
}
@tailwind utilities;

11
tailwind.config.js Normal file
View File

@@ -0,0 +1,11 @@
module.exports = {
purge: ["./src/**/*.css", "./**/*.html"],
darkMode: false,
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
};