Day 2 and 3 - Setup Theming and Components

Day 1 Setup Theming

CSS framework are really vital today and there are many to choose from. Twitter Bootstrap is my default choice when it comes building website. It still works find and can do the job but I want to use something new, more simpler quick and easy but enough to handle the expectation at the same time.

Base on my quick research I found two. BulmaCSS and TailwainCSS. Both have a great documentation and community. But I choose BulmaCSS because it is so simple to use. Tailwind is a utility-first css framework that means to create a certain component you need to add and mix different class in order to build a certain component. Where are BulmaCSS have default components already like Button that you can just quickly grab on.

Also I use Storybook for preparing the components for the website. Storybook is where you can build all of your app components and can be a documentation as well. By doing this you can see the overall view of the components you need to adjust the styling.

I also use styled-components not only for styling but I for controlling how will the style/component will behave on certain setups.

After the setup I quickly add the branding colors and the logo. I also adjust some settings for the SVG setup so it can render well.

Day 2 Creating Components

First off I started creating the Toggle Switch components since I feel this will require more time. I will be honest with but I'm not CSS wizard that can just create css in an instant. So I quickly google some CSS Toggle Switch and w3schools gave me some base css that I can play on.

To this:

So after creating the component I started ways on how on implement toggle darkmode using styled-components and found out that I can use ThemeProvider. Base in the documentation it is build using the React Context API. Where different components can grab certain prop settings anywhere.

By doing this we can create a certain default option for multiple styling and then just pass a certain key (light or dark) to toggle the rest of the styles base on the configuration.

Thats it for today! Thank you!