{"id":18593098,"url":"https://github.com/monsara/synth-feed-section","last_synced_at":"2026-04-09T12:44:18.745Z","repository":{"id":250035796,"uuid":"359163280","full_name":"monsara/synth-feed-section","owner":"monsara","description":"Layout, add adaptive styles and some JS logic for section with user profile and feed cards","archived":false,"fork":false,"pushed_at":"2021-04-20T22:47:13.000Z","size":687,"stargazers_count":0,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-05-16T10:40:52.656Z","etag":null,"topics":["adaptive","adaptive-layouts","bem","css","css-grid","gulp","html","javascript","responsive","sass","scss","twig","webpack"],"latest_commit_sha":null,"homepage":"https://monsara.github.io/synth-feed-section/","language":"SCSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/monsara.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-04-18T14:18:20.000Z","updated_at":"2021-04-20T22:51:19.000Z","dependencies_parsed_at":"2024-07-24T21:12:58.256Z","dependency_job_id":null,"html_url":"https://github.com/monsara/synth-feed-section","commit_stats":null,"previous_names":["monsara/synth-feed-section"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/monsara/synth-feed-section","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/monsara%2Fsynth-feed-section","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/monsara%2Fsynth-feed-section/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/monsara%2Fsynth-feed-section/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/monsara%2Fsynth-feed-section/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/monsara","download_url":"https://codeload.github.com/monsara/synth-feed-section/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/monsara%2Fsynth-feed-section/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":259512316,"owners_count":22869384,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["adaptive","adaptive-layouts","bem","css","css-grid","gulp","html","javascript","responsive","sass","scss","twig","webpack"],"created_at":"2024-11-07T01:11:23.569Z","updated_at":"2025-12-30T22:36:27.963Z","avatar_url":"https://github.com/monsara.png","language":"SCSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Feed section\n\nLayout, add adaptive styles and some JS logic for section with user profile and feed cards\n\nDesign: https://www.figma.com/file/Vc1w97I4xEftbLDujdXwrp/swivl_test?node-id=0%3A2\n\nGitHup Page: https://monsara.github.io/synth-feed-section/\n\nGitHup Page (version 2 for adaptive feed grid): https://monsara.github.io/synth-feed-section-2/\n\n## Browser Support\n\nNew browsers — Firefox, Chrome, Safari\n\n## Used techniques\n\n### HTML/CSS\n\n-   Valid, semantic, cross-browser layout\n-   Responsive web design\n-   CSS Flexbox\n-   CSS Grid\n-   Desktop first\n-   BEM methodology\n-   Sass (mixins, variables, SCSS modules)\n-   Twig templates\n\n### JavaScript features\n\n-   Show/hide dropdowns\n-   Change dropdown position on mobile screes\n-   Higlight acitve nav link\n-   Seting margins for feed cards in IE browser\n\n## Instruments\n\n-   Git\n-   Npm\n-   Node.js\n-   Gulp\n-   Webpack\n-   Chrome DevTools\n-   VS Code\n\n## Developing\n\n### Run site locally\n\nBefore using, make sure that Gulp and Node.js are installed on your computer\n\nTo build the site on your PC, run the following commands in the terminal:\n\n-   Clone the repository on your computer\n\n```shell\ngit clone https://github.com/monsara/synth-feed-section.git\n```\n\n-   Go to the project folder\n\n```shell\ncd synth-feed-section\n```\n\n-   Install dependencies\n\n```shell\nnpm install\n```\n\n-   Run dev-server and let magic happen\n\n```shell\ngulp\n```\n\n-   Bbuild project from sources\n\n```shell\ngulp build\n```\n\n-   In the browser tab go to [http://localhost:3000](http://localhost:3000)\n\n### For dev usage example:\n\n    {# variable example #}\n    \u003ch1\u003e{{title}}\u003c/h1\u003e\n\n\n    {# partial example #}\n    {% include \"partials/_header.twig\" %}\n\n    {# mixin example #}\n    {{mixins.icon('facebook')}}\n\n\n    {# data usage example #}\n    \t{% import \"data/data.twig\" as tests %}\n\n    \t{% for test in tests.list %}\n    \t\u003cli\u003e{{test.title}}\u003c/li\u003e\n    \t{% endfor %}\n    {# end of example #}\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmonsara%2Fsynth-feed-section","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmonsara%2Fsynth-feed-section","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmonsara%2Fsynth-feed-section/lists"}