css-blue

Style, conventions and general CSS methodologies. Part II Sass, BEM, rscss, SMACSS, WTF?

Level: intermediate

Hello dev-friends! Let’s continue the topics discussed in part I.

Today we will look closer at different CSS writing methodologies, such as BEM, rscss, SMACSS. It should be also mentioned, that the methodologies can be combined (eg OOCSS + BEM). Of course only if it makes a sense to us. That’s actually important thing. It’s not so good to use sucking things only because they are so “cool” now, so trendy and so on. It doesn’t matter – in next days, weeks or months there something “completely new and awesome” will appear 😉 But this is a separate topic, on which I don’t want to waste the time 😉 OK, to the point.

modern-devs

CSS methodologies: SMACSS

Let’s start with SMACSS. And I have to say I never used this approach of organizing and writing CSS in real-life project. It’s not about SMACSS sucks or something like that. Simply this methodology is not comfortable for me. For sure it has many advantages, just for me some details are annoying. BUT, of course, it may be very good and comfortable for the others. It’s up to you! So…

SMACSS (Scalable and Modular Architecture for CSS), created by Jonathan Snook, is a style guide for CSS code. In this approach we organize the CSS code by categories (Base, Layout, Module, State, Theme). Let’s look at them closer.

Base

Basic styles, general. This style group is responsible for default values; default appearance of page elements (margins, input, fonts, example: normalize.scss).

Layout

Layout styles define the appearance and placement of typical web and page elements, such as header, footer, sidebars. In SMACSS (and not only) it is assumed to use the prefix “l-” for them.

Module

Modules in SMACSS are independent, reusable code blocks (UI), such as menu, search box, list items, etc. We can say that they are something like blocks in BEM. Modules are usually located in containers, inside layout elements.

The assumption is that each module should be independent of the other modules. It should work the same way in every container we put him in. Therefore, do not create styles that are dependent on the parent container.

As an example we can consider the menu module:

...

.menu {
  background: #00a;
}

.menu h1 {
  font-size: 20px;
}

.menu .menu-item {
  border: 1px solid #000;
}
...

State

They simply define the appearance of the element’s state, depending on the situation (e.g. hidden, expanded, etc). We collapse or expand menu, make elements visible or hidden, move cursor over an element, and other such situations.

css-sass-black

CSS structure, style and conventions. Sass, OOCSS, BEM, rscss, SMACSS, OMG?

Level: intermediate

What does it mean to be busy? For example, there was absolutely no time for new posts on the blog, but the topics list is never-ending. I was so busy, professionally and privately. Today we back “on-line”, with a really nice topic.

We can save our time by optimizing daily tasks. Organizing and automating them. And I always try to implement such improvements step by step. No use to complain that there is so much to do and no time for all. The effects may be surprising. Otherwise our frustration can keep growing.

In the matter of programming, we could write here about the tools, such as webpack. But this topic deserves for separate articles. Today we will focus on approaches for writing CSS styles. In a good, comfortable (for us and the others) way. Such codes will be easier to maintain and develop.

“Long term value of the software is directly proportional to the quality of code base…”
— Douglus Crockford

Do you know any other guides and conventions for CSS structure? Like OOCSS, BEM, rscss, SMACSS. Or maybe OMG? Maybe you have seen code samples, that were written using one of these approaches, like BEM or other SMACSS… but you maybe didn’t care about. This article looks closer at the topic of writing better CSS.

Note: personally I write my styles mostly usingSass (SCSS – Syntactically Awesome Style Sheets), so articles and code examples here will be also made using this CSS pre-processor, also known as “CSS with superpowers” 🙂

See more at official website: http://sass-lang.com. Starting work with Sass goes smoothly, especially when we use a framework, that provides a nice support for such technologies (such as Ruby on Rails).

About style giude, in case of JavaScript / ES6, my favorite one is this elaborated by Airbnb:

https://github.com/airbnb/javascript

Same about approach to writing (S)CSS:

https://github.com/airbnb/css

Setup of linting tool will help us to keep the right syntax.

NOTE: the only detail I don’t like and don’t use about Airbnb style guide for CSS is about letter case for blocks. In case of fronted-development, I’m not a fan of PascalCase / camelCase.

Certainly in other cases, like writing classes in Ruby / RoR, we use PascalCase, and also snake_case for naming methods. In both cases it’s great and looks good. Just somehow I don’t like it for CSS.

For CSS I prefer kebab-case (spinal-case, hyphen delimited, https://en.wikipedia.org/wiki/Letter_case#Special_case_styles), so I DON’T write any:

.pageHead {}
.sub_header {}
...

BUT:

.page-head {}
.sub-header {}
...

That’s my own preference of course.

Actually there’s so many approaches and conventions, both for JS and CSS. We simply should use those we like, that are nice and reasonable for us. Then let’s follow the conventions we choose, constantly. With this we can really take many advantages for our code development. Without consistency we may create a mess instead.

Let’s start smoothly, from the basic thing – few words about Sass and directory / file structure for our styles.

“Writing CSS is easy. Writing maintainable CSS is hard.”

Why it’s important? For sure I hate to see any “over-engineering” acts, unfortunately it seems to be typical for front-end developers. Therefore we have billions of JS tools, libraries, approaches and so on. But not time for philosophy now, to the point.

content-like-water-rwd-128

Bootstrap Tutorial and RWD – responsive websites

Level: intermediate

Today a quick tutorial about Bootstrap and creating responsive websites. Actually a template of good start point for further projects. We will also talk about the techniques, which allow us to reach specific results. We also collected links to resources with valuable information.

Bootstrap Tutorial – responsive template by hand

As we know, Twitter Bootstrap (TB) is an open-source CSS framework. Incredibly simplifies and accelerates the creation of solid, nice looking web projects (UI). Mobile-first approach included.

So let’s get straight to the point and create a basic template. We want to get it ready to run in desktop, as well mobile browsers. The first detail will be to define the viewport (area visible for the user at one screen). More about HTML5 basics can be found here.

HTML5 document and including necessary files

Let’s create HTML5 document, and include jQuery, as well Bootstrap 3.3.7 (e.g. from https://www.bootstrapcdn.com).

Progress bar

CSS: visually consistent html5 progress bar in all browsers

Level: intermediate

Today a few words about HTML5 progress bar, and more specifically about adding CSS rules to such an element, so it will be looking same in all the browsers. For example there may be a requirement at design level, to keep visually consistent html5 progress bars. The developer may be surprised about the default behavior of this element.

The same appearance of html5 progress bar in all browsers

Different web browsers displays html5 progress bar in a different way. Also the default styles are not same. If we want to get progress bar looking always the same, we need a small CSS trick. A ready solution below.

yeoman-tool

Useful tools for programmers: Yeoman

Level: intermediate

Finally, I’ve got a little bit of time for blogging, so today wanted to write a few words about one of useful tools for developers – Yeoman.

Yo man! Useful tools for programmers – Mr Yeoman

Why to do the tedious, repetitive tasks, if it can be done for us by machine, or in this case – by the program. Yeoman allows us to generate different kind projects, especially creating the structure of folders and the necessary ingredients, in order to the best practices and patterns.

It makes initial creation of necessary folders and files, as well the setup of dependencies.

For example we may create new AngularJS project, where we also want to have Bootstrap, Saas and other extensions, that our project will need.

Installation is based on npm, which for sure we have in our environment, if we have worked with node.js. There also Bower and Grunt will be necessary =>

top-5-plugins-may

Top 5 jQuery plugins and libraries – May 2016

Level: intermediate

The next portion of good jQuery plugins and JavaScript solutions from our library. Here we present a small ranking of top jQuery plugins from May 2016.

Top 5 jQuery plugins from May 2016

Ordered by popularity.

1. Style elements, use media queries to build a responsive menu in jQuery

In this tutorial you’ll style elements and use media queries to build a responsive menu in jQuery. A nice effect reached quickly.

html5-css-progress-bar-mini

Progress bar with CSS and HTML5 in a few lines of code

Level: intermediate

A progress bar in CSS for web project? Sure, and it without using images. Today short and to the point.

Create progress bar with CSS and HTML5

We can use HTML5 and Bootstrap, or define our own CSS styles.

Solution #1 – HTML5

Let’s add Twitter Bootstrap and jQuery to our web page, and a simple code as below.

...
  <div class="progress" style="width: 50%">
    <div class="progress-bar" role="progressbar" aria-valuenow="40"
      aria-valuemin="0" aria-valuemax="100" style="width: 40%">
      40% (default style)
    </div>
  </div>

Ready! We have a progress bar. The colors and progress step we define through CSS classes (e.g.: class=”progress-bar progress-bar-danger”) and properties (e.g.: role=”progressbar”, aria-valuenow=”100″). And besides, we set style width of an element.

More examples of progress bars below.

Top jQuery plugins

Top jQuery plugins – March 2016

Level: intermediate

Hello! We added many new interesting positions to our scripts and plugins library. Here we present a small ranking of top jQuery plugins from March 2016.

Top jQuery plugins from March 2016

Ordered by popularity.

1. Multi-step jQuery form wizard plugin – jquery.steps

The first plugin is a nice way to implement forms in web application: multi-step jQuery form wizard solution. Turn multiple forms into a step-by-step form wizard with nice effects.

AngularJS-tutorial-logo

AngularJS Tutorial – a simple UI to control elements

Level: intermediate

Angular in practice! Today we have a small AngularJS tutorial, about creating small UI connected with dynamically created (refreshed) graphical object.

AngularJS Tutorial – control an element with Angular

In the basic course of Angular, we focused on information. Now it’s time to see it in a real example. Today’s simple tutorial in small steps will help us with this.

Step 1.

Let’s create HTML5 document and include AngularJS library.

Step 2.

Define an element, on which we will operate from the level of UI. In our example we will create a simple element using CSS:

.my-elem {
  background: #00c;
  border-radius: 10%;
  position: absolute;
  width: 200px;
  height: 200px;
  max-width: 500px;
  max-height: 500px;

  /* speed */
  transition: 0.8s;
  -webkit-transition: 0.8s;

  /* init pos*/
  left: 100px;
  top: 200px;
}
angularjs-logo

Learning AngularJS – a basic course part III – summary

Level: intermediate

In the 3rd part of basic Angular course, we will continue topics from the previous part, as well we will touch next related topics.

Further learning AngularJS

Let’s start with filters. It’s a yet another Angular feature, which takes off a part of tedious work from the programmer. Let’s see them in action, when formatting various kind of data.

AngularJS filters

Even in the previous part we could see how simple in use (but useful) the filters are. For example:

...
<p>{{ message.sent | date:'MMM d, y h:mm:ss a' }}</p>
...