Styling and Material UI for Google Font App

Screen Shot 2017-03-14 at 10.46.13 PM (2)

Been working on the styling all day. Discovered Material UI, which is a CSS framework for react which uses the Material UI design guidelines from google.

Updated all the components to use the Material UI components. Took a while to get it all together and looking good. I was actually trying out some other Material UI CSS frameworks which werent working too well with react, and then I luckily I found this one.

Realised that on previous projects I have lost a lot of time styling components that are already amazingly styled in this library. It is also teaching me to use react better, since the components are all react based, and most of the custom styling for the components I am now keeping within the component script itself so it is easier to track. Plus there is so much less CSS now overall since so much of the styling is already done.

So for this project, I have spent quite a bit of time getting the app and extension to build from the same base script, and also learning Material UI. But these things are already paying dividends in time saved.

Some of the functionality has broken since integrated the Material UI components. So tomorrow I will finish the styling, fix the functionality, and then it should be ready for first release.

Have thought that eventually can be three screen icons at the top

  1. Home – currnet page
  2. Filters – more advanced filtering
  3. Favourites

Will also integrate a details page which will show details for any of the selected fonts.

App is going to be seriously kick ass once it is done.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s