... yet another CSS Framework? We have really great frameworks like bootstrap, bulma, material-ui, tailwinds CSS and so much more. Why this one?
Freshpoint 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.
Freshpoint 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.
Works alongside with frameworks like React, Vue, Angular, etc. Just copy the src/sass
directory into your project
Core Features:
- Variables for declaring common breakpoints
- Helper mixins for scoping media queries to classes
- Opinionated 3 folder structure for organizing scss
- Utility functions for responsive padding/margin classes
- Utility functions for responsive text sizing classes
- Quick Start
- Sass Integration
Download Node.js
npm install --global gulp-cli
npm install
Then run
gulp
Under the variables file, you'll find declarations for
- Breakpoints
- Color variables
Breakpoints are based on same naming conventions as Bootstrap
/**********************************************/
/* BREAKPOINTS (based on bootstrap) */
/* 576,768,992,1200,1600*/
/**********************************************/
$sm-max: 575px;
$sm-min: 576px;
$md-max: 767px;
$md-min: 768px;
$lg-max: 991px;
$lg-min: 992px;
$xl-max: 1199px;
$xl-min: 1200px;
$xxl-max: 1599px;
$xxl-min: 1600px; // not part of bootstrap
Scoping Media Queries to new styles
.my-custom-class {
@include sm-max {
background-color: red; // only apply below 576px;
}
@include xl-min {
background-color: pink; // apply above 1200px;
}
}
.my-custom-class2 {
@include custom-min(900px){
border: 1px solid red; // apply if the screen width is greater than 900px;
}
}
.my-custom-class3 {
@include custom-minmax(600px, 700px){
border: 1px solid blue; // between 600 and 700px apply this border color
}
}
.my-custom-class4 {
@include custom-max(500px){
border: 3px dotted black; // below 500px apply border
}
}
Utility Padding / Margin Functions
pt-
- padding toppb-
- padding bottompl-
- padding leftpr-
- padding rightpx-
- padding left/rightpy-
- padding top / bottomp-
- padding all 4 sidesmt-
- margin topmb-
- margin bottomml-
- margin leftmr-
- margin rightmx-
- margin left/rightmy-
- margin top / bottomm-
- margin all 4 sides
Examples of using utility classes. The number denoted at the end is multipled by 2 to get the amount of margins it changes
<div class="mt-4">
This adds margin-top of 8px
</div>
<div class="pb-8">
This adds padding-bottom of 16px
</div>
<div class="px-0">
This adds padding-left and padding-right of 0px
</div>
<div class="m-3">
This adds margins all around of 6px
</div>
Examples of using utility classes
See _utility-single.scss for more examples, feel free to add your own single prop css classes here too
<div class="text-left">
Text Aligns Left
</div>
<div class="d-flex">
Applies flexbox on div element
</div>
src/
โโโ scss/
โโโ base/
โ โโโ _media-queries_.scss -> Utility mixins for media queries scoped inside classes
โ โโโ _normalize.scss -> Base resets for HTML
โ โโโ _reset.scss -> Box model defaults
โ โโโ _typography.scss -> Typography
โ โโโ _variables.scss -> Variable Declarations
โ โโโ _utility-multi.scss -> Helper Classes for margin/paddings and text for responsiveness
โ โโโ _utility-single.scss -> Single Use Utility Classes
โ โโโ _vendor-overrides_.scss -> Put Bootstrap / Material UI Overrides here etc if you use another UI framework
โโโ pages/
โ โโโ _home.scss -> Home Page specific Styles on `/` route
โ โโโ _login.scss -> /login specific styles
โ โโโ _register.scss -> /register specific styles
โโโ reusable/
โโโ _profile-menu.scss -> Add your component styles here in reusable
main.scss
Folder Struct:
- Base is used for utility / initializations for sass
- Pages are specific to routes, generally kept to a minimum
- Reusable is any specific component styling
Main.scss
is the main import for all other files. You can add additional reference files here
//==============================================================================
// Configuration
//==============================================================================
@import 'base/variables';
@import 'base/media-queries';
@import 'base/normalize';
@import 'base/reset';
@import 'base/typography';
@import 'base/utility-multi';
@import 'base/utility-single';
@import 'base/vendor-overrides';
//==============================================================================
// Pages
//==============================================================================
@import 'pages/home';
@import 'pages/login';
@import 'pages/register';
//==============================================================================
// Reusable Components
//==============================================================================
@import 'reusable/profile-menu';
The code is open source and available under the MIT Liscense
Built and maintained by Vincent Tang