https://github.com/monsara/synth-feed-section
Layout, add adaptive styles and some JS logic for section with user profile and feed cards
https://github.com/monsara/synth-feed-section
adaptive adaptive-layouts bem css css-grid gulp html javascript responsive sass scss twig webpack
Last synced: 3 months ago
JSON representation
Layout, add adaptive styles and some JS logic for section with user profile and feed cards
- Host: GitHub
- URL: https://github.com/monsara/synth-feed-section
- Owner: monsara
- Created: 2021-04-18T14:18:20.000Z (about 5 years ago)
- Default Branch: main
- Last Pushed: 2021-04-20T22:47:13.000Z (about 5 years ago)
- Last Synced: 2025-05-16T10:40:52.656Z (about 1 year ago)
- Topics: adaptive, adaptive-layouts, bem, css, css-grid, gulp, html, javascript, responsive, sass, scss, twig, webpack
- Language: SCSS
- Homepage: https://monsara.github.io/synth-feed-section/
- Size: 671 KB
- Stars: 0
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Feed section
Layout, add adaptive styles and some JS logic for section with user profile and feed cards
Design: https://www.figma.com/file/Vc1w97I4xEftbLDujdXwrp/swivl_test?node-id=0%3A2
GitHup Page: https://monsara.github.io/synth-feed-section/
GitHup Page (version 2 for adaptive feed grid): https://monsara.github.io/synth-feed-section-2/
## Browser Support
New browsers — Firefox, Chrome, Safari
## Used techniques
### HTML/CSS
- Valid, semantic, cross-browser layout
- Responsive web design
- CSS Flexbox
- CSS Grid
- Desktop first
- BEM methodology
- Sass (mixins, variables, SCSS modules)
- Twig templates
### JavaScript features
- Show/hide dropdowns
- Change dropdown position on mobile screes
- Higlight acitve nav link
- Seting margins for feed cards in IE browser
## Instruments
- Git
- Npm
- Node.js
- Gulp
- Webpack
- Chrome DevTools
- VS Code
## Developing
### Run site locally
Before using, 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/synth-feed-section.git
```
- Go to the project folder
```shell
cd synth-feed-section
```
- Install dependencies
```shell
npm install
```
- Run dev-server and let magic happen
```shell
gulp
```
- Bbuild project from sources
```shell
gulp build
```
- In the browser tab go to [http://localhost:3000](http://localhost:3000)
### For dev usage example:
{# variable example #}
{{title}}
{# partial example #}
{% include "partials/_header.twig" %}
{# mixin example #}
{{mixins.icon('facebook')}}
{# data usage example #}
{% import "data/data.twig" as tests %}
{% for test in tests.list %}
{% endfor %}
{# end of example #}