{"id":15041310,"url":"https://github.com/vincentntang/freshpoint","last_synced_at":"2025-09-23T18:10:27.413Z","repository":{"id":99599349,"uuid":"156734590","full_name":"vincentntang/freshpoint","owner":"vincentntang","description":"🌴 A minimalist sass boilerplate used with your favorite UI library","archived":false,"fork":false,"pushed_at":"2023-04-29T19:52:50.000Z","size":560,"stargazers_count":5,"open_issues_count":10,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-14T20:15:41.579Z","etag":null,"topics":["sass","sass-boilerplate","sass-files","sass-framework","sass-functions","sass-library","sass-mixins","scss"],"latest_commit_sha":null,"homepage":"","language":"CSS","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/vincentntang.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"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}},"created_at":"2018-11-08T16:16:34.000Z","updated_at":"2023-03-08T03:04:24.000Z","dependencies_parsed_at":"2023-07-31T02:17:23.995Z","dependency_job_id":null,"html_url":"https://github.com/vincentntang/freshpoint","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/vincentntang/freshpoint","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vincentntang%2Ffreshpoint","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vincentntang%2Ffreshpoint/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vincentntang%2Ffreshpoint/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vincentntang%2Ffreshpoint/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/vincentntang","download_url":"https://codeload.github.com/vincentntang/freshpoint/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vincentntang%2Ffreshpoint/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":276623778,"owners_count":25675352,"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","status":"online","status_checked_at":"2025-09-23T02:00:09.130Z","response_time":73,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["sass","sass-boilerplate","sass-files","sass-framework","sass-functions","sass-library","sass-mixins","scss"],"created_at":"2024-09-24T20:45:56.324Z","updated_at":"2025-09-23T18:10:27.351Z","avatar_url":"https://github.com/vincentntang.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"![](./docs/images/freshpoint-logo.png)\n\n## Inspiration\n\n... yet another CSS Framework? We have really great frameworks like bootstrap, bulma, material-ui, tailwinds CSS and so much more. Why this one?\n\nFreshpoint is a minimalist sass framework designed to be used with other UI libraries, but can be used standlone too. Even with using other UI libraries, you'll run into bottlenecks on what it can do, and write custom styles regardless.\n\nFreshpoint takes an opinionated approach on how to organize those custom styles. It includes utilities that are most commonly used for making any responsive fullpage applications and nothing more.\n\nWorks alongside with frameworks like React, Vue, Angular, etc. Just copy the `src/sass` directory into your project\n\nCore Features:\n\n- Variables for declaring common breakpoints\n- Helper mixins for scoping media queries to classes\n- Opinionated 3 folder structure for organizing scss\n- Utility functions for responsive padding/margin classes\n- Utility functions for responsive text sizing classes\n\n# Getting Started\n\n- Quick Start\n- Sass Integration\n\n# Install\n\nDownload Node.js\n\n```\nnpm install --global gulp-cli\nnpm install\n```\n\nThen run\n\n```\ngulp\n```\n\n# Configuration\n\nUnder the variables file, you'll find declarations for \n\n1. Breakpoints\n2. Color variables\n\nBreakpoints are based on same naming conventions as Bootstrap\n\n```scss\n/**********************************************/\n/* BREAKPOINTS (based on bootstrap) */\n/* 576,768,992,1200,1600*/\n/**********************************************/\n$sm-max: 575px;\n$sm-min: 576px;\n$md-max: 767px;\n$md-min: 768px;\n$lg-max: 991px;\n$lg-min: 992px;\n$xl-max: 1199px;\n$xl-min: 1200px;\n$xxl-max: 1599px;\n$xxl-min: 1600px; // not part of bootstrap\n```\n\n# Examples:\n\nScoping Media Queries to new styles\n\n```scss\n.my-custom-class {\n  @include sm-max {\n    background-color: red; // only apply below 576px;\n  }\n  @include xl-min {\n    background-color: pink; // apply above 1200px;\n  }\n}\n\n.my-custom-class2 {\n  @include custom-min(900px){\n    border: 1px solid red; // apply if the screen width is greater than 900px;\n  }\n}\n\n.my-custom-class3 {\n  @include custom-minmax(600px, 700px){\n    border: 1px solid blue; // between 600 and 700px apply this border color\n  }\n}\n\n.my-custom-class4 {\n  @include custom-max(500px){\n    border: 3px dotted black; // below 500px apply border\n  }\n}\n```\n\nUtility Padding / Margin Functions\n\n- `pt-` - padding top\n- `pb-` - padding bottom\n- `pl-` - padding left\n- `pr-` - padding right\n- `px-` - padding left/right\n- `py-` - padding top / bottom\n- `p-` - padding all 4 sides\n- `mt-` - margin top\n- `mb-` - margin bottom\n- `ml-` - margin left\n- `mr-` - margin right\n- `mx-` - margin left/right\n- `my-` - margin top / bottom\n- `m-` - margin all 4 sides\n\nExamples of using utility classes. The number denoted at the end is multipled by 2 to get the amount of margins it changes\n\n```html\n\u003cdiv class=\"mt-4\"\u003e\n  This adds margin-top of 8px\n\u003c/div\u003e\n\n\u003cdiv class=\"pb-8\"\u003e\n  This adds padding-bottom of 16px\n\u003c/div\u003e\n\n\u003cdiv class=\"px-0\"\u003e\n  This adds padding-left and padding-right of 0px\n\u003c/div\u003e\n\n\u003cdiv class=\"m-3\"\u003e\n  This adds margins all around of 6px\n\u003c/div\u003e\n```\n\nExamples of using utility classes\n\nSee [_utility-single.scss](https://github.com/vincentntang/freshpoint/blob/master/src/sass/base/_utility-single.scss) for more examples, feel free to add your own single prop css classes here too\n\n```html\n\u003cdiv class=\"text-left\"\u003e\n  Text Aligns Left\n\u003c/div\u003e\n\n\u003cdiv class=\"d-flex\"\u003e\n  Applies flexbox on div element\n\u003c/div\u003e\n```\n\n# Directory Structure\n\n```\nsrc/\n└── scss/\n    ├── base/\n    │   ├── _media-queries_.scss          -\u003e Utility mixins for media queries scoped inside classes\n    │   ├── _normalize.scss               -\u003e Base resets for HTML\n    │   ├── _reset.scss                   -\u003e Box model defaults\n    │   ├── _typography.scss              -\u003e Typography\n    │   ├── _variables.scss               -\u003e Variable Declarations\n    │   ├── _utility-multi.scss           -\u003e Helper Classes for margin/paddings and text for responsiveness\n    │   ├── _utility-single.scss          -\u003e Single Use Utility Classes\n    │   └── _vendor-overrides_.scss       -\u003e Put Bootstrap / Material UI Overrides here etc if you use another UI framework\n    ├── pages/\n    │   ├── _home.scss                    -\u003e Home Page specific Styles on `/` route\n    │   ├── _login.scss                   -\u003e /login specific styles\n    │   └── _register.scss                -\u003e /register specific styles\n    └── reusable/\n        └── _profile-menu.scss            -\u003e Add your component styles here in reusable\n        main.scss\n```\n\nFolder Struct:\n\n- Base is used for utility / initializations for sass\n- Pages are specific to routes, generally kept to a minimum\n- Reusable is any specific component styling\n\n# Adding New Files\n\n`Main.scss` is the main import for all other files. You can add additional reference files here\n\n```scss\n//==============================================================================\n// Configuration\n//==============================================================================\n\n@import 'base/variables';\n@import 'base/media-queries';\n@import 'base/normalize';\n@import 'base/reset';\n@import 'base/typography';\n@import 'base/utility-multi';\n@import 'base/utility-single';\n@import 'base/vendor-overrides';\n\n//==============================================================================\n// Pages\n//==============================================================================\n\n@import 'pages/home';\n@import 'pages/login';\n@import 'pages/register';\n\n//==============================================================================\n// Reusable Components\n//==============================================================================\n\n@import 'reusable/profile-menu';\n```\n\n# Liscense\n\nThe code is open source and available under the [MIT Liscense](https://opensource.org/licenses/MIT)\n\nBuilt and maintained by [Vincent Tang](https://vincentntang.com)","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvincentntang%2Ffreshpoint","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvincentntang%2Ffreshpoint","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvincentntang%2Ffreshpoint/lists"}