{"id":13394082,"url":"https://github.com/serudda/steroidesign","last_synced_at":"2025-04-05T08:06:43.704Z","repository":{"id":95970353,"uuid":"96546667","full_name":"serudda/steroidesign","owner":"serudda","description":"Themes based on the biggest StartUps (buttons, color palette, components, etc.) ready to use in your own projects.","archived":false,"fork":false,"pushed_at":"2017-07-25T14:37:25.000Z","size":1696,"stargazers_count":778,"open_issues_count":1,"forks_count":39,"subscribers_count":30,"default_branch":"master","last_synced_at":"2025-03-29T13:07:09.582Z","etag":null,"topics":["design","design-tools","sass","sideproject","starter-kit","startup","styled-components","theme"],"latest_commit_sha":null,"homepage":null,"language":"HTML","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/serudda.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}},"created_at":"2017-07-07T14:29:23.000Z","updated_at":"2025-02-08T18:32:40.000Z","dependencies_parsed_at":null,"dependency_job_id":"d6d7dad2-1f19-483e-a53d-6befe9e1bbbc","html_url":"https://github.com/serudda/steroidesign","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/serudda%2Fsteroidesign","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/serudda%2Fsteroidesign/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/serudda%2Fsteroidesign/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/serudda%2Fsteroidesign/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/serudda","download_url":"https://codeload.github.com/serudda/steroidesign/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247305934,"owners_count":20917208,"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":["design","design-tools","sass","sideproject","starter-kit","startup","styled-components","theme"],"created_at":"2024-07-30T17:01:08.360Z","updated_at":"2025-04-05T08:06:43.685Z","avatar_url":"https://github.com/serudda.png","language":"HTML","funding_links":[],"categories":["HTML","theme"],"sub_categories":[],"readme":"\u003ch3 align=\"center\"\u003e\n\t\u003cimg width=\"200\" src=\"https://cdn.rawgit.com/sergioruizdavila/startups-themes/f14c6e27/www/assets/images/Steroidesign.png\" alt=\"Steroidesign\"\u003e\n\u003c/h3\u003e\n\n\u003ch1 align=\"center\" style=\"border:0;\"\u003e\n\t\u003cb\u003eMake your projects look as good 💎 as the big ones 💪🏻\u003c/b\u003e\n\u003c/h1\u003e\n\n\u003cbr\u003e\n\n\u003ch3 align=\"center\"\u003e\n\t🚀 Join to the \u003ca href=\"http://eepurl.com/cWWRrD\"\u003eSteroidesign Weekly\u003c/a\u003e newsletter! 🚀 \n\t\u003cbr\u003e We'll submit a new theme every week (we know it's crazy, but it's not impossible 😵).\n\u003c/h3\u003e\n\u003ch3 align=\"center\"\u003eShow us your interest by signing up, so we'll know that there are people interested in this.\u003c/h3\u003e\n\n\u003cbr\u003e\n\n\u003cp align=\"center\"\u003e\n\tMade with ❤ \u0026 ☕ by \n\t\t\u003ca href=\"https://www.twitter.com/rosa7082\" target=\"_blank\"\u003e@rosa7082\u003c/a\u003e \n\t\t\u0026 \n\t\t\u003ca href=\"https://www.twitter.com/seruda\" target=\"_blank\"\u003e@seruda\u003c/a\u003e \n\t\tin \n\t\t\u003ca href=\"https://www.google.com/maps/place/Portland,OR\" target=\"_blank\"\u003ePortland, OR\u003c/a\u003e\n\t\t.\n\u003c/p\u003e\n\n\u003cbr\u003e\n\n## Problem\n\nWhenever we start a new project, we spend a lot of time looking for inspiration on hundreds of websites, we take a little of each, and so we build our beloved Frankenstein 🤖. Our most important references are the most well-known Startups (Airbnb, Medium, Product Hunt, etc) as they have invested a lot of time in analyzing the best practices of design, validation of ideas, calls to action, hook, etc. And over time have been creating standards and trends.\n\n\u003cbr\u003e\n\n## Solution\n\nSince many are looking for these sites, we decided to create a skeleton of HTML styles and components based on these big companies, themes that are 100% editable and adaptable to your own palette color or styles, adding your own magic 🔮!. So that your product remains authentic and unique.\n\n**With this, we do not seek to copy the big companies, but to obtain inspiration and have its base for our own projects.**\n\nThe themes include the basic elements in a website: buttons, labels, links, typography, form elements, box components, search bar, navbars, etc, etc, etc.\n\nContributions are more than welcome.\n\n\u003cbr\u003e\n\n## Contents\n\n- [Base Methodology](#base-methodology)\n- [Installation and use](#installation-and-use)\n- [Themes](#themes)\n\t- [Airbnb](https://github.com/sergioruizdavila/startups-themes/blob/master/Airbnb.md) **(Done v.1.0.0)**\n\t- [Medium](#medium) (In Progress)\n\t- [Product Hunt](#product-hunt) (Coming soon)\n\t- [Asana](#asana) (Coming soon)\n\t- [Suggest us the next one](#suggest-us-the-next-one)\n- [License](#license)\n\n\u003cbr\u003e\n\n## Base methodology\n\nFor our own components, follow the BEM (Block, Element, Modifier) method for writing \u0026 organising CSS. BEM helps keep our CSS logical and predictable. The naming convention follows this pattern:\n\n```css\n.block {}\n.block__element {}\n.block__element--modifier {}\n```\n\n- ```.block``` represents the higher level of an abstraction or component.\n\n- ```.block__element``` represents a descendent of .block that helps form .block as a whole.\n\n- ```.block--modifier``` represents a different state or version of .block.\n\n### more references:\n\n- [http://getbem.com/introduction/](http://getbem.com/introduction/)\n- [https://www.toptal.com/css/introduction-to-bem-methodology](https://www.toptal.com/css/introduction-to-bem-methodology)\n\n\u003cbr\u003e\n\n---\n\n\u003cbr\u003e\n\n\n## Installation and use\n\n\u003ch3 align=\"center\"\u003e\n\t\u003cimg src=\"https://raw.githubusercontent.com/sergioruizdavila/startups-themes/develop/www/assets/images/compare%20themes.png\" alt=\"compare\"\u003e\n\u003c/h3\u003e\n\n\u003cbr\u003e\n\n### Install\n\nReally you don´t need an **'installation'**, you just could clone the project, take the 'theme' folder and you are able to start. The only tools that you need to use these themes are:\n\n- **Sass**\n- **Boostrap v3.3.7** *(to keep row and column structure, but you can feel free to use another library for that, the only issue is that you could see the components examples in index HTML a little bit wrong, because we use bootstrap to arrange each component inside row and column grids).*\n\n\u003cbr\u003e\n\n#### If you want to run the demo page, you should follow this steps:\n\n**1:** Install NodeJS v6 or latest (Not sure if there is any problem with previous versions, but this is the one we use).\n\n**2:** On terminal (inside root directory) run the following commands:\n\n1. Clone the project.\n\n```\ngit clone https://github.com/sergioruizdavila/startups-themes.git projectname\n```\n\n2. Install gulp, bower and express components: \n```shell\nnpm install\n```\n\n3. Install basic components such as boostrap, jquery, animate.css:\n```shell\nbower install\n```\n4. Launch a local server in order to see styles guideline:\n```shell\ngulp start\n```\n\n**3:** Open your favorite browser, and browse to:\n\n**http://localhost:8080/**\n\nThere you can see whole styles guidelinein in a demo page.\n\n\u003cbr\u003e\n\n\n### How to use?\n\nIt's very simple, you have to copy the **theme** folder into your own project, inside you will find all styles organized by **components**, and a folder named **core** which contains all global styles and variables (e.g. main palette, helper classes, font family, etc.).\n\n\u003ch3 align=\"center\"\u003e\n\t\u003cimg src=\"https://cdn.rawgit.com/sergioruizdavila/startups-themes/56d23613/www/assets/images/structure_files.png\" alt=\"structure files\"\u003e\n\u003c/h3\u003e\n\n**The file structure is:**\n\n- ***components:*** A folder containing all styles of each component (buttons, links, forms, paragraphs, inputs, etc.)\n\n- ***core:*** Here are all the base styles of your project, here you find a file named **_global.scss** which contains all the global variables, helper classes, and base classes to reset the styles of some global elements such as the body, H tags, labels, etc.\n\n- ***app.scss:*** This is the parent file which contains a reference to all other styles: \n\n\u003ch3 align=\"center\"\u003e\n\t\u003cimg src=\"https://cdn.rawgit.com/sergioruizdavila/startups-themes/d6b7a6e5/www/assets/images/app_file.png\" alt=\"app file\"\u003e\n\u003c/h3\u003e\n\n- **app.min.css:** It's the final result after running a small task in Gulp, compile it, concatenates and minifies every style in a single file. This is the file you should add in the **\u003c head \u003e** html section.\n\n```html\n\u003c! your vendors \u003e\n\u003clink rel=\"stylesheet\" href=\"/build/css/vendor.min.css\"\u003e\n\n\u003c! theme styles \u003e\n\u003clink rel=\"stylesheet\" href=\"/theme/app.css\"\u003e\n```\n- **app.css**: If you don't use Sass or another preprocessor, don't worry you can take this file and include it into your own project, and you could use any of the components freely.\n\n\u003cbr\u003e\n\nYou can also see examples of all components on **index.html**. You will see all the components organized by groups, you can simply take the component you need, and take it to your own project.\n\nAny questions please write us: [@rosa7082](https://www.twitter.com/rosa7082) \u0026 [@seruda](https://www.twitter.com/seruda)\n\n**Enjoy it!**\n\n\u003cbr\u003e\n\n## Themes\n\n### Airbnb\nStatus: **[See components (v1.0.0)](https://github.com/sergioruizdavila/startups-themes/blob/master/Airbnb.md)**\n\nWe used this theme in other own project: [http://www.waysily.com](http://www.waysily.com)\n\n\u003ch3 align=\"center\"\u003e\n\t\u003cimg width=\"500\" src=\"https://cdn.rawgit.com/sruda/steroidesign/967bcd2f/www/assets/images/waysily-example.png\" alt=\"compare\"\u003e\n\u003c/h3\u003e\n\n### Medium\nStatus: ***In Progress***\n\n### Product Hunt \nStatus: ***Coming soon***\n\n### Asana \nStatus: ***Coming soon***\n\n\u003cbr\u003e\n\n## Suggest us the next one\n\nWe started working on the themes that we believe would be the most beautiful and complete. But if you want us to start in a more great one, just let us know: [@rosa7082](https://www.twitter.com/rosa7082) \u0026 [@seruda](https://www.twitter.com/seruda), or by email: [Rosita](mailto:rosa.alvarez.maza@gmail.com) \u0026 [Sergio](mailto:sergioruizdavila@gmail.com). You can write us if you'd like to talk to us.\n\n\u003cbr\u003e\n\n## License\n\n[![CC0](http://mirrors.creativecommons.org/presskit/buttons/88x31/svg/cc-zero.svg)](https://creativecommons.org/publicdomain/zero/1.0/)\n\n**Important:** Themes are not a copy, we write styles and structure from scratch, based on our own file structure and our own way of organizing styles (based n the [BEM methodology](https://en.bem.info/)), what we want with this is to create a 'skeleton' that can be used, edited, modified and replaced in any project.\n\nWe are not responsible for misinterpretation or inappropriate use of this content and information. In the same way, we will not be responsible for the damages caused directly or indirectly by the using of this material. In no way are we liable for the consequences of the improper or negligent use of this material.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fserudda%2Fsteroidesign","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fserudda%2Fsteroidesign","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fserudda%2Fsteroidesign/lists"}