Clean and minimalist theme for writers

Hey all,

Recently I was looking for a simple WordPress theme for free, and I found some. But none of these themes fulfilled my needs.

With that experience, I decided to create my own theme. I created it for my Blog. As you can see now, If you are visiting my blog you can see it live.  If you also struggling to find a theme, You can give my theme a try. I named it Crafty. You can download it via Github.

The theme is simple and responsive. You can use SASS/SCSS to style it and more other options changeable from admin.

This is a very short post, Just wanted to share the theme with you. Thank you,

 

Download Crafty

2-0

Using LESS with create-react-app without ejecting 🤐

Easy setup Less popular LESS.

If you’re a fan of create-react-app (react official command line interface),
you probably know
it supports SASS by default (SOON). It’s ready & being included in the next release (https://github.com/facebook/create-react-app/pull/4195).

With less effort, you can use SASS or SCSS with CRA.

But what about LESS? Not that easy.

Why do you need LESS if CRA already supports SASS? 

I hope you already know the difference between SASS & LESS. There are lots of discussions about LESS and SASS, I’m not going to dive deeply into this topic. There could be many reasons to use LESS, but my personal experience was, I wanted to use a framework written in LESS.

If you want to override some variables or mixins of a LESS framework, the best way is overriding it with your own LESS file. For this, you need to make LESS work with React.

OK, guys. Enough talking, let’s make it work.

Create a basic app using CRA.
I’m gonna create a simple app for this tutorial. I’ll call it react-with-less. Run this in your CLI : ´create-react-app react-with-less´

Then run npm start, it will open your browser in the port 3000 http://localhost:3000/

2. Using create-react-app’s custom config solution: react-app-rewired.

In your terminal run: npm install react-app-rewired — save. After installing react-app-rewired successfully we need to change scripts field in package.json.

Open up the project with your favorite code editor. Mine is VS Code. 😻

3. Updating package.json

Change the script field in package.json from this:

to this:

4. Override Webpack config.

Create a file called config-overrides.js in the root folder and add this content.

 

5. Using less loader, react-app-rewire-less

Back in the terminal install the rewire-less package. Run ´ npm install react-app-rewire-less´ in the terminal.

6. Updating config-overrides.js with rewire-less.

If you successfully installed react-app-rewire-less, we can start updating config-overrides.js. So, open up config-overrides.js and first import the rewire-less package:

const rewireLess = require(‘react-app-rewire-less’);

Then we can override config like this :

7. Styling with LESS 🤴🏼.

Hi5 guys, Now you are officially a Less person. But wait. We haven’t used it yet.

Let’s go back to the code editor and delete App.css file. Now open up App.js file.

In the top of the file you can see import ‘./App.css’;. Change it to

import ‘./App.less’;

Then create the less file in the same directory. Open up App.less File and add some css for testing. I’m gonna change the body background color:

body {
background: #000;
}

Go back to terminal and run npm start. Tadaaaa! Now you can see your changes in the browser.

If you missed something, you can check out this repo in Github:

https://github.com/malithmcr/cra-with-less

PR’s welcome.

Check out my other article about how to create a contact form with react + php:

https://blog.bitsrc.io/how-to-build-a-contact-form-with-react-js-and-php-d5977c17fec0

That’s all guys!


I hope this solution helps someone out. Thank you for reading. If you have any questions or remarks, leave a comment below.If you have any questions or remarks, leave a comment below.

Happy coding…. &$§!§!$Z/%/(!

 

2-0

New project – SpareTime Design

Recently I worked on this personal blog project for my client. This website includes a shop and a few other pages. I created the theme from scratch. Also a few plugins. If you are interested in graphic design, you can save this blog and read weekly. Also they provide free themes and vector graphics.

Live urlhttps://sparetime.design/

Tech Stack : WordPress, WooCommerce, Javascript , scss

Screenshot :

0-0

My favorite scss mixins and features

Ever since I started using SCSS/SASS, I knew I’d use this for all my future projects. It really helped me to write CSS in a meaningful way. I’m writing this post to share my favorite scss features and mixins. I use these every day for my current work.

This is not a tutorial about how to use scss. Just some very useful code snippets for scss.

  1. Mixin for media queryThis mixing help me to write responsive code for all of my projects.
    @mixin bp($feature, $value) {
    // Set global device param
    $media: only screen;
    // Media queries supported
    @if $feature == min-width{
    @media (min-width: #{$value}) {
    @content;
    }
    }@else if $feature == max-width{
    @media (max-width: #{$value}) {
    @content;
    }
    }@else{
    @media (min-width: #{$feature}) and (max-width: #{$value}) {
    @content;
    }
    }
    }Usage:

    * For min-width and max-width:
    * @include bp(350px ,750px)
    * For min-width:
    * @include bp(min-width, 200px)
    * For max-width:
    * @include bp(max-width, 750px)

  2. @import @import '_header'; Because of Import option my codebase looks very clean. It’s very easy to use. Similar to css import with scss import you can split your css into smaller chunks. But scss @import performance is faster than css @import. Because of css @import make a http request to each @import file. But scss combines all imported files and makes one single css file.
  3. Operators
    Sass allows you to use math operators in your stylesheet. Isn’t it so cool to use maths in css ? for example:$width : 200;
    @if (windowSize > 640) {
    font-size: (16px / 24px); // Outputs as CSS
    width : (20px * $width);
    }
  4. @extend
    Using @extend you can re-use same styling that has been used for other component.
    This avoid you to repeat writing same thing again, also known as ‘DRY’.
    .wishlist-icon {
    color: #000;
    background-color: #fff;
    }
    .user-icon {
    @extend .wishlist-icon;
    font-size: 12px;
    }
  5. Placeholder selectors This also works like @extend but little bit different. This will compile only if you ever use it.
    %footer-component {
    background: black;
    font-size: 12px;
    // and so on...
    }
    .left {
    @extend %footer-component;
    color: red;
    }
    .right {
    @extend %footer-component;
    color: white;
    }
    This will compiled to :.right, .left {
    background: black;
    font-size: 12px;
    }

    .left {
    color: red;
    }

    .right {
    color: white;
    }

That’s it for now guys. I’ll keep updating this list whenever I find a good scss feature.
check out my other posts or leave a comment here for support. Thank you so much.

0-0

Quick update!

Assuming you already read my post about post image plugin. I’m writing this quick update to tell you that my plugin is now available to download from wordpress directly.

WordPress plugin url : https://wordpress.org/plugins/awesome-post-images/#description

click here

Post about the plugin : http://blog.malith.pro/wp-post-images-awesome-custom-image-uploader-for-wordpress-posts/

click here

 

Thank you for all your support!

1-0

Code discipline – Rules for my codes.

I remember how many mistakes I made when I started to write programs and the times I was trying to be a programmer. That was a really tough time. Like every other programmer, we all suck in the beginning. Also we all learn, with practice and experience we write better code and understand difficult algorithms. I never stopped learning and becoming a better programmer. I still do so many stupid things. But from all those mistakes I learn something. Sometimes I know how it should be done but even then I don’t use what I know, maybe because of laziness or because I just don’t care. However I don’t wanna do it anymore. I decided to set some rules for myself when I write code next time.

My rules , My code

  • Always document my code, Comment. Comment. Comment.
  • Don’t write ninja code. Write human readable code.
  • Don’t follow the trend.
  • Prevent Deep Nesting.
  • Don’t push broken code
  • Write maintainable code.
  • Use less media queries and write media queries only when you need.
  • Use Appropriate Naming Convention for css.
  • Use JS Lint.
  • Use Flexbox and Grid in the future.
  • Follow a Proper Coding Standard.
  • Always handle errors.
  • Use DRY Approach.
  • Create something valuable and helpful to others.

For now this is it. But I will update this list again when I notice something I should do.

Thank you for reading guys, I recently did an experiment with content load animations like facebook. you can take a look here. Also press that star button ;).

0-0

Enjoy this blog? Please spread the word :)