Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/monsara/witcher
HTML layout and styling of a responsive web page with copy code functionality by pressing a button copy code. Web page based on a semantic responsive markup on BEM methodology.
https://github.com/monsara/witcher
bem css flexbox gulp html javascript media-queries responsive-web-design sass
Last synced: 26 days ago
JSON representation
HTML layout and styling of a responsive web page with copy code functionality by pressing a button copy code. Web page based on a semantic responsive markup on BEM methodology.
- Host: GitHub
- URL: https://github.com/monsara/witcher
- Owner: monsara
- License: mit
- Created: 2020-06-15T19:03:04.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2023-01-05T11:40:02.000Z (about 2 years ago)
- Last Synced: 2024-11-07T01:12:04.928Z (3 months ago)
- Topics: bem, css, flexbox, gulp, html, javascript, media-queries, responsive-web-design, sass
- Language: CSS
- Homepage: https://monsara.github.io/witcher/
- Size: 14.8 MB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 13
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# witcher
https://monsara.github.io/witcher/
Layout and styling of the web page. Web page based on a semantic responsive
markup on BEM methodology.
## Browser Support
New browsers — Firefox, Chrome, Opera, Microsoft Edge and IE 11, newer versions
of Android/iOS, etc.
## Used techniques
### HTML/CSS
- Valid, semantic, cross-browser layout
- Responsive web design
- CSS Flexbox
- CSS Media Queries
- Mobile first
- Fexible images
- Optimized and minified images
- BEM methodology
- Sass (mixins, variables, SCSS modules)
### JavaScript
- Copy code text to the clipboard by clicking on the copy code button
## Instruments
- Git
- Npm
- Gulp
- Chrome DevTools
- VS Code
## Developing
The project uses the basic gulp-builder for layout
[Gulp Starter Kit](https://github.com/luxplanjay/gulp-starter-kit)
- Collects and optimizes HTML, Sass, JS, images and fonts
- Uses gulp-rigger to work with html chunks
- Includes configuration files for various linters
- All errors are logged to the console
- Adds vendor prefixes
- Optimization Media Queries
- There is a development and assembly mode in prod
- Automatic Deployment on GitHub Pages
[Instruction for use Gulp Starter Kit](https://github.com/luxplanjay/gulp-starter-kit)
### Run site locally
Before using the Gulp Starter Kit, make sure that Gulp and Node.js are installed
on your computer
To build the site on your PC, run the following commands in the terminal:
- Clone the repository on your computer
```shell
git clone https://github.com/monsara/generator-hub.git
```
- Go to the project folder
```shell
cd generator-hub
```
- Install dependencies
```shell
npm install
```
- Run the build project
```shell
npm start
```
- In the browser tab go to [http://localhost:1234](http://localhost:1234)