{"id":21186209,"url":"https://github.com/lotrekagency/lotrek-ui","last_synced_at":"2025-06-21T12:37:30.016Z","repository":{"id":45375094,"uuid":"427336341","full_name":"lotrekagency/lotrek-UI","owner":"lotrekagency","description":"A collection of ready-to-use  UI components written in HTML \u0026 CSS","archived":false,"fork":false,"pushed_at":"2023-04-07T14:45:05.000Z","size":2010,"stargazers_count":6,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-06-12T08:46:42.987Z","etag":null,"topics":["css","css-grid","css-library","html","html-css","html-template","layout-system","layout-template","scss-library","ui","ui-kit"],"latest_commit_sha":null,"homepage":"https://lotrekagency.github.io/lotrek-UI","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/lotrekagency.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","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,"zenodo":null}},"created_at":"2021-11-12T11:30:20.000Z","updated_at":"2022-03-15T20:47:10.000Z","dependencies_parsed_at":"2025-06-12T08:47:57.354Z","dependency_job_id":null,"html_url":"https://github.com/lotrekagency/lotrek-UI","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/lotrekagency/lotrek-UI","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lotrekagency%2Flotrek-UI","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lotrekagency%2Flotrek-UI/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lotrekagency%2Flotrek-UI/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lotrekagency%2Flotrek-UI/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/lotrekagency","download_url":"https://codeload.github.com/lotrekagency/lotrek-UI/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lotrekagency%2Flotrek-UI/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":261126137,"owners_count":23113283,"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":["css","css-grid","css-library","html","html-css","html-template","layout-system","layout-template","scss-library","ui","ui-kit"],"created_at":"2024-11-20T18:22:23.628Z","updated_at":"2025-06-21T12:37:25.002Z","avatar_url":"https://github.com/lotrekagency.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ![Lotrek UI Logo](/static/assets/images/full-logo.svg)\n\nLotrek UI is a collection of ready-to-use UI components and micro layouts written in simple HTML \u0026 CSS to help you build awesome stuff faster.\n\nEach block is easy to customize, tested and responsive.\n\nTo check the demo/docs page please visit:\n\n### https://lotrekagency.github.io/lotrek-UI/\n\n\n## Table of contents\n\n[Using lotrek UI](#using-lotrek-ui)\n\n[Running the demo](#running-the-demo)\n\n[lotrek-ui.css](#lotrek-ui.css)\n\n[Prerequisities](#prerequisities)\n\n[How to contribute](#how-to-contribute)\n\n[Built with](#built-with)\n\n[Copyright and license](#copyright-and-license)\n\n[TODO](#todo)\n\n### Using lotrek UI\nTo use this collection of micro-layouts simply copy the HTML code inside `\u003ctemplate\u003e` in the /components/category/name-of-block.vue file.\n\nRemember to add the lotrek-ui.css stylesheet in your project, which is a very small CSS file (less than 3kb when compressed with GZIP). To do so, simply do the following:\n\n`yarn add lotrek-ui-css`\n\nThen add the CSS file, like this in your javascript file:\n\n`import 'lotrek-ui-css/build/lotrek-ui.css'`\n\n### Running the demo\nThe Lotrek UI Kit has ready-to-use HTML blocks with some starter CSS (and JS when needed). \nEach block is written as a component which can be found in the /components/ path.\n\nThe demo page is localted in the Demo.vue component file: all you need to do is\n\n`yarn install`\n\n`yarn dev`\n\nNow you should be able to view the demo page on http://localhost:3000/\n\nIf you wish to build for production, run:\n\n`yarn generate`\n\n/docs/ will have the production files and assets.\n\n### lotrek-ui.css\nThe CSS bundle file (lotrek-ui.css) to make the raw HTML blocks work is located at the /styles/build/ path.\n\nTo build this file (for publish purposes) simply do the following:\n\n`cd styles`\n\n`yarn css`\n\n### Prerequisities\n\nNode, either npm or yarn. \n\nrollup.js to build the css dist file.\n\n### How to contribute\nTo start contributing make your own branch such as feature/myblock starting from master. \nThen add blocks to the collection by making a vue component files in the /components/`\u003ccategory\u003e` folder. \nStyling is written in SCSS with BEM and mobile-first, so keep naming as clean and faithful to the methodology as possible. All the blocks style files can be found in in the /styles/blocks/`\u003ccategory\u003e` path, so when adding a new block add a new SCSS file here and remember to import it via main.scss.\nOnce you're done with your work, submit a pull request.\n\n### Built with\nNuxtJS, Vue, rollup.js and some good old HTML, CSS and JS.\nResetting CSS with a slightly different version of normalize.css.\nPrismJS for code highlighting.\n\n### Copyright and license\nlotrekagency/lotrek-UI is licensed under the MIT License\n\n### TODO\n• Better demo page\n\n• Better readme","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flotrekagency%2Flotrek-ui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flotrekagency%2Flotrek-ui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flotrekagency%2Flotrek-ui/lists"}