Color Pallete

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.

Read More

Answer page and Sign in page mockups for Askbot

Answer Page Desktop View Mockups

Answer Page Mobile View Mockups

Sign in page Desktop view mockups

Sign in Page Mobile view mockups

Read More

Inkscape Mockups for Askbot

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

Read More

AskFedora Pages/Flow

Read More

GSoC Update #3

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

Read More

Compass THE FRAMEWORK

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.

Read More

Sass which will make my life easy

Hi there, this will be my first blog update on GSoC project Askfedora redesign. For the project I may need to write all the styles from scratch for all the interfaces of AskFedora and I will be using sass, compass and susy in the redesigning process.

I am totally new to the languages Sass and Susy and to the framework Compass and hence I'm learning these from scratch. Here are some notes on using Sass I learnt which might be useful for anyone interested in styling. So here goes. :)

Before going into details you might need to have an idea about CSS prepocessing.

CSS Preprocessing

CSS as we all know is used for styling web pages. Many beautiful styles can be created with CSS yet when the style sheets are getting more larger they become more difficult to maintain. CSS preprocessing can help us here. 

CSS Preprocessors like Sass have many features which are similar to those offered in programming languages like Java or C. These features include variables, nesting, mixins (discussed later), inheritance etc. which we cannot see in CSS. These features make maintenance of our styles more easier which reduces most of the work for the programmers.

What is Sass?

Sass a CSS Preprocessor and is the mostly used most powerful professional css extension tool in the world.
When coding it will be filename.scss that we will be editing and sass converts to a css file.

Installation

Installing Sass only requires just require you to type in the following commands in the terminal. To install Sass you need to have ruby gems installed in your computer. The set of commands below take care of that also.

sudo apt-get install rubygems

sudo gem update

sudo gem install sass

And if Sass is properly installed we can view its version by typing in "sass -v". It should display something like the following.

Sass 3.4.13 (Selective Steve)

Coding with Sass

To experiment with Sass I created a simple style.scss file and in the terminal you need to type in

sass --watch style.scss:style.css

This is to instruct Sass to watch over the edits that are done to the style.scss file and every time a change is done to the style.scss file it needs to update a style.css file accrodingly.

Sample code with Sass

This is the sample code that I typed referring the Sass tutorial [1] at their site which includes many features of Sass which are

• Sass variables
• Nesting
• Partials and require statement
• Mixins
• Inheritance
• Operators

----------------- style.scss -----------------

@import 'reset'; //importing sass partials

/* Use of variables */
$font-stack: Helvetica, sans-serif;   
$primary-color: #333;

body{
    font: 100% $font-stack;
    color: $primary-color;
}

/* Nesting */
nav{   
    ul{
        margin: 0;
        padding: 0;
        list-style: none;
    }

    li{display: inline-block}

    a{
        display: block;
        padding: 6px 12px;
        text-decoration: none;
    }
}

@mixin border-radius($radius) {  //mixins
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
      -ms-border-radius: $radius;
          border-radius: $radius;
}

.box { @include border-radius(10px); }

/* Inheritance */
.message{   
    border: 1px solid #ccc;
    padding: 10px;
    color: #333;
}

.success{
    @extend .message;
    border-color: red;
}

.error{
    border-solor: red;
}

.warning{
    @extend .message;
    border-color: yellow;
}


/* Creating a simple grid with sass operators */
.container{
    width: 100%;
}

article[role="main"]{
    float: left;
    width: 600px / 960px * 100%;
}

article[role="complimentary"]{
    float: right;
    width: 300px / 960px * 100%;
}

----------------- _reset.scss -----------------

html,
body,
ul,
ol{
    margin: 0;
    padding: 0;
}

The corresponding converted css file:

----------------- style.css -----------------

html,
body,
ul,
ol {
  margin: 0;
  padding: 0; }

/* Use of variables */
body {
  font: 100% Helvetica, sans-serif;
  color: #333; }

/* Nesting */
nav ul {
  margin: 0;
  padding: 0;
  list-style: none; }
nav li {
  display: inline-block; }
nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none; }

.box {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  border-radius: 10px; }

/* Inheritance */
.message, .success, .warning {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333; }

.success {
  border-color: red; }

.error {
  border-solor: red; }

.warning {
  border-color: yellow; }

/* Creating a simple grid with sass operators */
.container {
  width: 100%; }

article[role="main"] {
  float: left;
  width: 62.5%; }

article[role="complimentary"] {
  float: right;
  width: 31.25%; }

/*# sourceMappingURL=style.css.map */

I would give you a briefing about the above code.

Sass Variables

First under the variables section we can declare Sass variables with a '$' mark infront of the name of the variable. For example if we want to use the same color in number of different places we can assign it to a variable and use it so that we only need to change the value of the variable if we want to change the color.

The variables are replaced by their corresponding values in the translated css file.

Nesting

Nesting is done to avoid complications, by having a clearly visible hierarchy. Like for instance instead of using "nav li" we can make "li" nested inside "nav" to make it more clearly visible and manageable.

Partials and Import Statement

Sass partials are used to include small sass code snippets inside scss files which starts with an underscore. The file names starts with underscore so that Sass will identify them as partials and include them in the scss files which import them.

Partials such as "_reset.scss" which I have indicated above can be included in your main scss files by importing them using the commands like:

@import 'reset'

Note that the underscore in front the file name and .scss extension is missing in the import statement.

Mixins

If you want to have a group of css statement together in many places we can use Mixins provided by Sass. In the above example we have a Mixin named "border-radius" which will accept a variable named "radius" and the same set of css codes will be repeated each time we include:

@include border-radius(10px);

Inheritance

The concept of inheritance that we come across in object oriented programming languages is applied for css styles also. In the above example all the styles which are applied for the message class will be inherited to error, success and warning classes also.

Operators

Sass has the following operators which we can deal with.

+, -, *, / and %

As you can see only the result of these operations will be displayed in the converted .css file.

References

[1] - http://sass-lang.com/guide
        Sass language guide 

Read More