Modularity is a boilerplate and methodology for compiling your CSS and revolves around PostCSS and SASS and uses GulpJS. It's a basis for providing you with all of your CSS needs to become more efficienet and organized. It is meant to encourage best practices and ease-of-use when building sites.
- install nodeJS
- install npm
- clone this repo
- open a shell up in the project folder and run
npm install
to install dependencies and then rungulp
to watch && process - Edit styles ONLY from the
components
folder and they are output in theapp
folder. Include theSCSS
file extension if you are using SASS mixins. If you are only using PostCSS, you can use plain CSS files.
You can include more PostCSS plugins and if you want to, use SASS or plain old CSS. Up to you.
Every site is different, but they all have underlying issues in which Modularity aims to solve:
- Compartementalize your style-sheets (stay organized)
- Grids are annoying and everyone has a different way to make them, there are hundred's of frameworks and methods. lost grid-system is super flexible and easy for everyone to read. No need to reinvent the wheel.
- Choosing the right amount of negative space between elements can be a tough decision, or when scaling elements proprtionate to other elements. Choosing a body copy size that looks good with heading sizes... modular-scale helps to resolve these issues by providing a sass function
ms(x)
. Just update the_variables.scss
file to change the scaling options. More at **modularscale-sass. - Use semantic media queries, ie
$mobile
,$desktop
,$iphone_landscape
, etc. Useem
notpx
. Why? Checkout https://zellwk.com/blog/media-query-units/ for more info. Recommending and already included, breakpoint-sass. - Exclude bulky prefixes in you SASS/CSS source files, only include them in the output files via autoprefixer.
- Live reload styles with browser-sync. You can share your project and updates locally or use tunnel-me to share remotely.
- Sourcemaps should be created and are configured to already be working. They help you and others debug your CSS.
- CSS should be compressed on PRODUCTION sites.(cssnano).
- Media queries should be combined. (setup already via PostCSS plugin mediaQueryPacker).
- Responsive typography can easily be created without the use of jQuery plugins or complicated mixins. Simply use a min/max font-size and min/max viewport range in
px
orem
like so:
.foo {
font-size-responsive: 12px 32px 480px 1024px;
}
.bar {
font-size-responsive: 1em 2.2em 320px 767px;
}