CSS Styling Tips Used for loklak Apps

Cascading Style Sheets (CSS) is one of the main factors which is valuable to create beautiful and dynamic websites. So we use CSS for styling our apps in apps.loklak.org.

In this blog post am going to tell you about few rules and tips for using CSS when you style your App:

1.Always try something new – The loklak apps website is very flexible according to the user whomsoever creates an app. The user is always allowed to use any new CSS frameworks to create an app.

2.Strive for Simplicity – As the app grows, we’ll start developing a lot more than we imagine like many CSS rules and elements etc. Some of the rules may also override each other without we noticing it. It’s good practice to always check before adding a new style rule—maybe an existing one could apply.

3.Proper Structured file –

  • Maintain uniform spacing.
  • Always use semantic or “familiar” class/id names.
  • Follow DRY (Don’t Repeat Yourself) Principle.

CSS file of Compare Twitter Profiles App:

#searchBar {
    width:500px;
}

table {
  border-collapse: collapse;
  width: 70%;
}

th, td {
  padding: 8px;
  text-align: center;
  border-bottom: 1px solid#ddd;
}

 

The output screen of the app:


Do’s and Don’ts while using CSS:

  • Pages must continue to work when style sheets are disabled. In this case this means that the apps which are written in apps.loklak.org should run in any and every case. Let’s say for instance, when a user uses a old browsers or bugs or either because of style conflicts.
  • Do not use the !important attribute to override the user’s settings. Using the !important declaration is often considered bad practice because it has side effects that mess with one of CSS’s core mechanisms: specificity. In many cases, using it could indicate poor CSS architecture.
  • If you have multiple style sheets, then make sure to use the same CLASS names for the same concept in all of the style sheets.
    Do not use more than two fonts. Using a lot of fonts simply because you can will result in a messy look.
  • A firm rule for home page design is more is less : the more buttons and options you put on the home page, the less users are capable of quickly finding the information they need.

Resources:

CSS Styling Tips Used for loklak Apps

Developer Tools: Build your query using LQL

Writing request queries is definitely a hard job for developers trying to use any API. Sometimes the query strings go wrong and sometimes you’re not getting the output you’ve been expecting. We understood a similar problem in Loklak API for developers and built the Loklak Query Language (LQL).

This tool takes in the fields and the type of query you want to make and dynamically creates the request URL in front of you. You could even test this URL and see the pretty printed JSON responses returned by the server. Here’s the best part, You get to use this with the custom URL of any loklak server that you deploy.

screenshot

The team has put in quite some effort in scripting easy deployment buttons with Heroku, Bluemix, Scalingo, Docker Cloud etc.., and Tools like this help developers build the queries and look for the data they wanted.

Screen Shot 2016-06-01 at 9.09.29 AM

There are a lot of features that are in store and shows the query for a lot of API endpoints. It’s a great tool to play with, In the future, we’d also be integrating the way the queries have to be made for different programming language APIs that we support. So that way you can directly access the required code segments directly and use them with the supporting library.

It’s a lightweight application, every time a change is made in any of the fields in the form, the query gets generated completely on the client side and at the same time the fields change based on the API call that has been chosen.

Have a look at the LQL here or head over to our github and give us feedback or open an issue.

Developer Tools: Build your query using LQL