Showing posts with label less. Show all posts
Showing posts with label less. Show all posts

Wednesday, July 2, 2014

Responsive web layouts based on Flexbox Model


Hi all,
I'm going to publish a small layouts collection: they're based on the stunning forthcoming Flexible Box layout model so... take it like an experiment!



As of today I've put the first layout, very standard setup for a web application: header, footer, zoom and scoll locked, a main section and the aside.
I'm trying to adhere as much as I can to the rules of semantic html because I strongly believe that this is going to become a standard and I love it.
I just cannot see divs and lot of classes as of 2014, and I'm lucky enough to have the power to force my customers to not use some bad products.
I've choosen to not support old or bad browsers.

So, before you get angry:
  1. check your browser's support
  2. update it... it's free.
  3. change it... it's free as well.

Enjoy the example:  first layout.
Download the full repo from Github!
 
For this work I'm using my own Less mixins:










Monday, June 23, 2014

Change Requirejs, Less compiler and CoffeScript versions in Play Framework

Hi there,
I've found myself struggling with Play 2.2.1 for one (really? just one???) reason: it comes with Less 1.4.2, that's a great CSS compiler but...

...according to the official Less' website, they've released the 1.7.x version!


And what's wrong with 1.4.2? Some bufixes and improvements, as usual, but what I really love is the possibility to pass rulesets to mixins as arguments: definitely great!

The biggest problem is that in our development stage we've frozen the project to Play 2.2.1 and there's no way to upgrade it. So, digging into Play's files I've discovered this wonderful folder:

your-play-path/framework/src/sbt-plugin/src/main/resources

there you can find less-x.x.x.js, coffeescript.js and r.js: just overwrite them and run

your-play-path/framework/build

then leave the console open and type
> compile
> publish-local

...enjoy!


Pietro

Tuesday, May 6, 2014

CSS3 Flexbox made easy!

Hello everybody,
I've decided to use FlexBox (CSS3) layout for my biggest project.

After a while (struggling with some issues and lot of implementation's problem...) I got the job done with some LESS mixins.

I've tested them on Chrome (>32), Firefox (>25) and Safari (>6.0), even on mobile devices (just Android & Apple).
It works like a charm, so I'm giving those mixins to everyone who is learning or developing using this wonderful tecnology.

Let me know for problems, issues or improvements.

Sorry for not posting examples or tutorials but I'm definitely overwhelmed as of today and too busy.

Ciao!
Pietro