Saturday, May 30, 2015

Updated mockups for Askbot

8:47 AM Posted by Unknown No comments
According to the feedback received from the mentors, I updated the mockups that I have created for Askbot using colors used in the Fedora color palette and also giving more focus on the grid system. I have included some little user experience improvements also in these mockups and we are planning to discuss further on user experience of Askbot as well.

Answer Page Desktop View Mockups







































Answer Page Mobile View Mockups


Ask Question page desktop view mockups






























Ask Question page mobile view mockups


























User Profile page desktop view mockup






































User Profile page mobile view mockups


























Sign in page Desktop view mockups






































Sign in page Mobile view mockups


Tags Page Desktop View Mockup

































Tags Page Mobile View Mockups



























People Page Desktop View Mockups
































People Page Mobile View Mockups



























Badges Page Desktop View Mockups






























Badges Page Mobile View Mockups

Wednesday, May 27, 2015

Tuesday, May 26, 2015

Color Pallete

9:45 AM Posted by Unknown 1 comment
This is the finalized color palette that I am using for the mockups in Inkscape and I will be adhering to this while I start coding the mockups.


Monday, May 25, 2015

Sunday, May 24, 2015

Inkscape Mockups for Askbot

6:47 AM Posted by Unknown 2 comments
Askbot User Profile page desktop view mockup


 




































Askbot User Profile page mobile view mockups


Askbot Ask Question page desktop view mockups



Askbot Ask Question page mobile view mockups





Saturday, May 23, 2015

GSoC Update #3

6:54 AM Posted by Unknown 3 comments
I had a meeting yesterday (22nd May 2015) at the #fedora-apps IRC channel with mentors Sarup Banskota and Suchakra Sharma. The purpose of the meeting was to revise my timeline and refine what I have included in the timeline into more specific sub tasks.  

My actions items in this meeting were:

  • Analyse the flow of pages in askbot
  • Set up a staging instance to share work in progress
  • Creating mockups for the askbot pages
You can see the minutes of the meeting at:
http://meetbot.fedoraproject.org/fedora-apps/2015-05-22/fedora-apps.2015-05-22-17.10.log.html

Friday, May 22, 2015

Compass THE FRAMEWORK

7:27 AM Posted by Unknown No comments
What is Compass? 

Compass is an open source css authoring framework. It adds useful mixins to sass. Compass is very much popular because of its ease and usefulness in creating styles for web based applications.

Installation


Installing Compass in your machine is really simple. Just need to type the following commands in the command line if you are using windows or on the terminal if you are using Linux.

For installing you need to have ruby gems installed in your machine. As we discussed about installation of Ruby and Sass in the previous blog post, now let's just install Compass.

sudo gem install compass

After that all you need to do is create a compass project in your theme directory with the following command.

compass create nameofyourtheme

Like we did with Sass we may need to start watching the Compass project and hence type the commands:

nameofyourtheme$ compass watch

Then you will be able to view something like the following.

>>> Compass is watching for changes. Press Ctrl-C to Stop.
    write stylesheets/ie.css
    write stylesheets/print.css
    write stylesheets/screen.css

Now you are all ready to start coding.:)

Coding with Compass

Inside the theme of the Compass project we created we can see
  • sass directory
  • stylesheets directory
  • .sass-cache directory
  • config.rb file

Yeah you guessed right! :) It's inside the sass directory that we should be placing our scss files and the corresponding css files will be placed inside the stylesheets directory.

Type something in the screen.scss file inside the sass directory and hit save. Then you will be able to see the corresponding changes in the screen.css file the stylesheets directory.

Inside the screen.scss file you will have something like

/* Welcome to Compass.
 * In this file you should write your main styles. (or centralize your imports)
 * Import this file using the following HTML or equivalent:
 * <link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" /> */
@import "compass/reset";

Also add the following line to it.

@import "compass";

By adding this we will be access many of the awesome mixins provided by Compass.

For example: 

@include float-right;

is a cross browser compatible float-right command.

Also

$test_color: #ccc;
color: shade($test_color, 30%);

is a Compass color mixin.

And 

@include text-shadow(0 2px 2px rgba(#000,0.3));

 is a mixin for applying text shadow and rgbs() is again a Sass mixin.

All of the Compass mixins that you might want will be here. Learning all of these might take sometime yet after learnt all these will make your work much more easier than using native css.



Labels