Categories: AngularJS

Flexbox layout with Angular and Flex-Layout

What are you using to create a grid layout with Angular? Whatever it is, Bootstrap or Material or something else, you should try the CSS flexbox layout system instead. Using the flex-layout Angular module you can create a responsive web app effortlessly.

Angular responsive mobile layout using flex-layout

They have a demo online that shows all sorts of different layouts that you can create using flex-layout.

To use it with Angular, after installing it, you just have to use the fxLayout and fxLayoutAlign attributes.

Angular responsive layout using flex and layout-wrap and the flex-layout module

flex-layout Code Example

Here’s an example of using flex-layout to create a layout with paragraphs that are hidden based on the resolution of the screen (whether it’s a phone, tablet or desktop):

<div fxLayout="row">
  <div fxFlex fxFlexOrder="-1">
    <p>This is an example of a flexbox CSS layout using Angular</p>
  </div>
  <div fxFlex fxFlexOrder="1" fxFlexOrder.gt-md="3">
    <p fxHide="false" fxHide.gt-md>Hello</p>
    <p fxShow="false" fxShow.gt-md>world!</p>
  </div>
  <div fxFlex fxFlexOrder="2">
    <p>Cool</p>
  </div>
  <div fxFlex fxFlexOrder="3" fxFlexOrder.gt-md="1">
    <p fxHide="false" fxHide.gt-md>Another way</p>
    <p fxShow="false" fxShow.gt-md>to say hello world</p>
  </div>
</div>

Now you are not constrained by Bootstrap or Material or some other layout module, you can use CSS flexbox to lay out a responsive and elegant Angular grid layout!

Want to learn more AngularJS?

Check out the resources at Learning AngularJS

Categories: Life

Trying out Compass, a CSS Framework

[Update: 17 November 2018…it’s amazing to look back at this blog post from 2009 and see how much things have changed near the end of 2018. Right now we no longer use CSS frameworks; the last standing framework is Bootstrap, with CSS being written in whatever ways necessary to make React, Angular and other JavaScript SPA (Single Page Applications) look great. The SASS language for CSS now looks like pretty much like CSS and doesn’t rely on indentation by default with SCSS files. Some projects use SASS and Bootstrap supports it. What’s really changed is that I find it very useful to use Stylelint to lint CSS files.]

A week or so ago I decided to finally sit down and try out the Compass CSS framework. When I first looked at it, I was dismayed to find that it required Yet Another Language to learn, but then I quickly saw its advantages when I started using it.

The Compass CSS framework aims to be a real framework that does some heavy-lifting to let a web designer focus on CSS. It compiles a language called SASS into CSS and uses modules to allow integration with other “plain” grid-based CSS frameworks such as YUI GridsBlueprint, and 960 Grid System.

The SASS language is indentation-based and is similar to YAML. When Compass is run, it generates CSS files from the SASS files. This lets SASS provide all sorts of nifty things, such as inheritence, mixins, functions and variables. Inheritence and mixins are important because you can define a general border style, such as a left border that is solid thin and black, and then apply it to whatever CSS selectors you like. Then when you make a change to the border style, you only have to make the change once instead of finding/replacing the styles in all the selectors.

When trying to learn Compass, I decided to convert an old stylesheet to SASS. I wrote less than 100 lines of SASS to generate over 400 lines of CSS. On top of that, I used variables for different colours and added/subtracted to those colour values to generate new colours. Instead of finding/replacing and manually calculated, SASS took care of both of those things.

SASS functions let you calculate things based on the input that you give it. Just like functions in any other programming language. SASS mixins let you combine various styles under a CSS selector.

An example of the SASS syntax:

// example of a variable
!titleColor = #a3a

//example of a mixin/function
=minSize(!a)
  :font-size = (!a + 10) "px"

// inherited css selectors
a
  color: blue
  &:hover
    :color black
  &:visited
    :color purple

// more inheritence
body
  #header
    // color variable
    :background-color = !titleColor
    #blog-title
      // mixin/function call
      +minSize(22)
    #description
      +minSize(8)
      :font-family sans-serif
  #content
    +minSize(9)
    :background-color = !titleColor + #505
    #blog-post
      :font-family serif

And here is the CSS output that was generated by SASS:

a {
  color: blue; }
  a:hover {
    color: black; }
  a:visited {
    color: purple; }

body #header {
  background-color: #aa33aa; }
  body #header #blog-title {
    font-size: 32 px; }
  body #header #description {
    font-size: 18 px;
    font-family: sans-serif; }
body #content {
  font-size: 19 px;
  background-color: #ff33ff; }
  body #content #blog-post {
    font-family: serif; }

You can see how the selectors are nested and inherited. You can also see how the font-size of the various elements that used the minSize function were generated. The best part is the addition of two colours to create the colour for the body #content.

Basically, to summarize why you would want to use Compass:

  • SASS lets you use variables and functions to generate CSS
  • SASS lets you mix styles with different CSS selectors
  • Compass has plugins and modules to support the grid-base frameworks like Blueprint

This was a short post, mainly because as a programmer, the idea of variables/functions and a proper language for generating CSS is instantly appealing. So I’m hoping to create a module/plugin or plain template of my own for the MovableType blogging software and I’m attempting to convert templates and themes to use Compass to learn more about Compass and to improve my not-so-great web design skills.