February 9, 2015 at 13:26Top 10 Things We Understood While Working with Foundation for Apps
- Transfer
Most recently, we launched Foundation for Apps . It was great to get feedback and suggestions from you about our latest framework!
In this short time, we have already managed to learn a lot. Here are the first 10 things that seem important to us:
We started building our framework using Flexbox instead of the traditional float grid. This allowed us to do certain things more accurately, such as mixing fixed- and fluid-width, significantly improve the source code, and reorient the grid. We realized that Flexbox is just great, and it also has support for many different browsers . I had to understand all its subtleties, make it available for different software, but we just got a wonderful grid!
By and large, people very warmly received our ASCII yeti, displayed when installing the framework. We tried many of his variations of ASCII but chose the simplest of them, since it is cool.
No, its true. Four years ago, when we created Foundation for Sites, the entire grid had simple and clear names for each of its elements. When we began to remodel the structure and switch to a vertical grid, many of these names lost their meaning (for example, columns and rows). Some ideas like 'group' and 'block' seemed too abstract to us, but, nevertheless, became the basis for some CMS. Everyone agreed to name everything in the format:
Using Angular, we began to separate the code into separate libraries, for example, to create pop-ups and messages. In order not to get confused, it is necessary to give all files the same prefixes. The first idea was to use, '
ZURB has been creating responsive templates over the course of five years, but it has never been involved in this type of framework. We created models on which web applications could work. As it turned out, such applications do not have their own design language with some principles and norms. For us, this was a kind of experiment, and, as we think, the experience was a success. Our developers managed to create separate elements and blocks of the web application that change their sizes depending on the screen size of the device. There are even elements that change when scrolling and drop-down lists that perform certain actions when selecting elements. We are still working on this “language”, expanding it and adapting all modern web standards to it.
Foundation for Apps was created specifically as a web application framework from day one. I repeat: Foundation for Apps was created with WEB APPLICATIONS ! We wanted to create a responsive web application that would work in most web browsers.
Angular is great, but it was hard for designers to do some things like pagination and other links that require knowledge of routes. We created the Gulp plugin, which just does these things, making life easier for the developer.
You write:
We reading:
We concluded that all JS components simply appear and hide on the page during the creation of Foundation for Apps. The developers made an API showing the necessary elements with simple syntax like
Many people who at least once used percentages to indicate the height of an element should have been very surprised. If you specify a height of 100%, then little will change. We wanted to create full-screen web applications, which is why we used VH (viewport height).
When we wanted to create a brother for our Yeti, we turned to a wonderful illustrator . Adam created a rather similar, but slightly different from the first image of the Yeti.
This is just a little of what we have understood for ourselves at the moment. The web will grow rapidly, and Zurb Family is not going to lag behind.
In this short time, we have already managed to learn a lot. Here are the first 10 things that seem important to us:
1. Flexbox is great, but hard
We started building our framework using Flexbox instead of the traditional float grid. This allowed us to do certain things more accurately, such as mixing fixed- and fluid-width, significantly improve the source code, and reorient the grid. We realized that Flexbox is just great, and it also has support for many different browsers . I had to understand all its subtleties, make it available for different software, but we just got a wonderful grid!
2. People love ASCII art
By and large, people very warmly received our ASCII yeti, displayed when installing the framework. We tried many of his variations of ASCII but chose the simplest of them, since it is cool.
3. It's hard to give names
No, its true. Four years ago, when we created Foundation for Sites, the entire grid had simple and clear names for each of its elements. When we began to remodel the structure and switch to a vertical grid, many of these names lost their meaning (for example, columns and rows). Some ideas like 'group' and 'block' seemed too abstract to us, but, nevertheless, became the basis for some CMS. Everyone agreed to name everything in the format:
grid-<name of what was used>. " Grid-block" was used to create templates, and " " was used for grid-contentapplication content.4. Namespace is an even more complicated thing
Using Angular, we began to separate the code into separate libraries, for example, to create pop-ups and messages. In order not to get confused, it is necessary to give all files the same prefixes. The first idea was to use, '
fa-' but then many told us that they use Famo.us or Font Awesome, whose file names begin with FA. So, we chose a particle zf-, which also coincided with the Zend Framework, but they did not use one.5. There are no specific responsive models in applications
ZURB has been creating responsive templates over the course of five years, but it has never been involved in this type of framework. We created models on which web applications could work. As it turned out, such applications do not have their own design language with some principles and norms. For us, this was a kind of experiment, and, as we think, the experience was a success. Our developers managed to create separate elements and blocks of the web application that change their sizes depending on the screen size of the device. There are even elements that change when scrolling and drop-down lists that perform certain actions when selecting elements. We are still working on this “language”, expanding it and adapting all modern web standards to it.
6. Applications are not web applications
Foundation for Apps was created specifically as a web application framework from day one. I repeat: Foundation for Apps was created with WEB APPLICATIONS ! We wanted to create a responsive web application that would work in most web browsers.
7. Routing is complicated
Angular is great, but it was hard for designers to do some things like pagination and other links that require knowledge of routes. We created the Gulp plugin, which just does these things, making life easier for the developer.
You write:
---
name: home
url: /home
animationIn: bounceIn
animationOut: bounceOut
---
We reading:
var routerApp = angular.module('routerApp', ['ui.router']);
routerApp.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/home');
$stateProvider
.state('home', {
url: '/url',
templateUrl: 'partial-home.html',
controller: 'PageController', //default controller
data: { vars: {
name: home,
url: /home,
animationIn: bounceIn,
animationOut: bounceOut
}}
});
});
8. All components are simply displayed and hidden
We concluded that all JS components simply appear and hide on the page during the creation of Foundation for Apps. The developers made an API showing the necessary elements with simple syntax like
open, closeor toggleinteracting with objects through their ID.9. Height - second-class citizen
Many people who at least once used percentages to indicate the height of an element should have been very surprised. If you specify a height of 100%, then little will change. We wanted to create full-screen web applications, which is why we used VH (viewport height).
10. The New Yeti
When we wanted to create a brother for our Yeti, we turned to a wonderful illustrator . Adam created a rather similar, but slightly different from the first image of the Yeti.
This is just a little of what we have understood for ourselves at the moment. The web will grow rapidly, and Zurb Family is not going to lag behind.