Mobile first is a mindset, you start to build your design from the smallest screen to the largest, this way you will ensure that quality and responsiveness will be delivered first for those who have the least screen real estate. Design in a small space is harder, the information should be accessible. Progressively you will rearrange the information as your available space increases and you can accommodate more elements.

Modern web design gave us the flexbox, we already covered this in a past post. But what is next? If we are serious about mobile first we need to organize our code in such way that will deliver it, and this is how Bulma comes into play.

Bulma

Made with Bulma

Bulma is a Flexbox framework, very similar to the all-time famous Bootstrap. It is Open Source and it’s fully responsive mobile first framework. Bulma is the work of Jeremy Thomas, a CSS Guru. Bulma is open source and it is just a CSS framework written in SASS, the main difference from Bootstrap, among others.

In this article, we are going to cover some of the best features of the framework.

Modularity

Bulma is modular, you don’t need to download the entire framework, you can use one of the 39 .sass modules Individually. For example, if you want to use just the grid module you can import it alone:

@import "bulma/sass/utilities/_all"
@import "bulma/sass/grid/columns"

Now you can use the Columns class for the container and the Column for the items


<div class="columns">
     <div class="column">1</div>
     <div class="column">2</div>
     <div class="column">3</div>
     <div class="column">4</div>
     <div class="column">5</div>
</div>

Grid

The flexbox makes Bulma a powerful framework, yet easy to implement, all columns have the same width no matter how many columns you have in a Columns container.

The grid comes with modifiers called sizes

See the Pen Bulma Experiments by allur.co (@allurco) on CodePen.0

Magic Tiles

With Bulma Tiles you can create 2d Grid like designs with nested elements. The flexibility is great and you can push your bounderies to the limit with it.

See the Pen Bulma Magic Title by allur.co (@allurco) on CodePen.0

To start creating you need at least 3 levels

tile is-ancestor
|
└───tile is-parent
    |
    └───tile is-child

The Code Pen layout about has the following Hierarchy;

tile is-ancestor
|
└───tile is-parent
    |
    └───tile is-child tile is-ancestor
|
└───tile is-parent
    |
    └───tile is-child
|
└───tile is-parent
    |
    └───tile is-parent is-vertical
        |
        └───tile is-child
        |
        └───tile is-child
|
└───tile is-parent is-vertical 
    |
    └───tile
        |
        └───tile is-child
    |
    └───tile
        |
        └───tile is-child
| 
└───tile is-parent
    |
    └───tile is-child

What’s next?

Bulma is pretty complete, modern and lightweight. Besides the topics mentioned in this article, you have Components, Buttons, Form Elements, Elements of Design like Boxes, Icons, Tables and more.

For the layout, Bulma is packed with other features like the Hero component, Sections, and the Media Object.

You should head to the Bulma Documentation and Experiment right now.

Until the next time!

3d is the world we live in. Everything we interact is in the 3d space. Today we selected some pens that explore this concept in a 2d screen. 3d in web still very new and unexplored, but with the right execution, it can perform its role to inform and be beautiful.

There is much more good stuff out there and its allur’s job to select and bring you the best we will definitely be revisiting this subject.

1. Exploded isometric via CSS 3D transforms, by Scott Henderson

See the Pen Exploded isometric via CSS 3D transforms by Scott Henderson (@scootman) on CodePen.0

2. CSS 3D Solar System, by Julian Garnier

See the Pen CSS 3D Solar System by Julian Garnier (@juliangarnier) on CodePen.0

3. Clock 3D, by Kara Olthof

See the Pen Clock 3D by Gerard Ferrandez (@ge1doot) on CodePen.0

4. 3D Cube for tabbed content, by Gerard Ferrandez

See the Pen 3D Cube for tabbed content by Kara Olthof (@raevenk) on CodePen.0

5. Rollers #2 (pure CSS infinitely unwrap/ wrap prisms), by Ana Tudor

See the Pen Rollers #2 (pure CSS infinitely unwrap/ wrap prisms) by Ana Tudor (@thebabydino) on CodePen.0

See you all next time!

Complex grid layout has been one of the biggest hurdles on web design. First, we work with tables, but tables were not enough, they were inelegant code, hard to maintain. Then we started to see a paradigm shift towards the box model and the introduction of the cascade style sheets. After that, we started to use classes and ids to build what it seems complex layouts and position definitions to play with layers of elements. At this point, the CSS was enough adopted and we started to see a definition of pure CSS grid-like structures with defined math.

We divided the page into 10, 12 or 16 columns. We boxed our content in a specific width to match the grid that we chose to work on, and we calculate all the other sizes. Other web designers noticed and started to build frameworks, first just a small stylesheets. With the mobile revolution, we started to see full flagged frontend frameworks with a defined grid layout math.

The Flexbox

But it would be nice if we could have a way to automatically calculate the space between elements base on the space available. This cannot be achieved with traditional float boxes and closed grids.

For that, the flexbox is the solution, and this is not widespread yet, but we all should embrace it; it’s modern, it’s clean and it’s what the whole frontend design should be.

Let’s start with an unordered list of elements:

We can create some boxes with the code below. On the first line we determined that our columns have 100px, but that is not enough to fill the container evenly. On the second line we used percentages to try to fill the whole space.

See the Pen FlexBox One by allur.co (@allurco) on CodePen.0

Things start to get complex when we add gutters:

See the Pen FlexBox Two by allur.co (@allurco) on CodePen.0

Of course we can do the math and find the optimal results for the spaces and the width, also with pseudo elements we can remove the firts margin of the left and the last margin on the right to flush it to our content. But there is an easier way:

For this html markup we have the following css, please look how clean the code is and how easy we can implement different layouts:

See the Pen FlexBox Three by allur.co (@allurco) on CodePen.0

Flexbox has a direction property, that can be vertical (column) and horizontal (row), on the exemples above we use the horizontal direction or row.

The wrap property will calculate the minimum amount of items that will fit in a row, you have three options for this:

Remember when you wanted to have all the boxes the same size, and then you started to create a javascript to calculate the size of the biggest one and so on? Well, flexbox has the align property, consider the following markup:

See the Pen FlexBox Four by allur.co (@allurco) on CodePen.0

The Flexbox Item

At this point, you can see that all the properties are applied to the Flexbox container. That is the main source of all goodness, while the items are just laid out inside of it. But there are several items properties that can change the layout in different ways.

For the item, the most difficult to understand properties are the ones that control the size of the content. I have laid down a code pen with the quick explanation of it:

See the Pen FlexBox Items by allur.co (@allurco) on CodePen.0

You can control the content flow inside the item with flex-basis, using flex-basis: auto, the content will dictate the calculations, but using flex-basis: 0 the other properties will be controling the inner math of the items, check it out:

See the Pen FlexBox Items flex-basis by allur.co (@allurco) on CodePen.0

Where to go from here?

You just discovered the power of flexbox. Now complex layouts as navigation menus, top header bars got a lot easier now. Please take your time and test all the options available. Until next time.

See the Pen Flexbox playground by Gabi (@enxaneta) on CodePen.0

Today in our curated list of the best Pens, we had in mind to help our readers with some useful and fancy ui animations and tools. This collection of Pens will sure it can serve as base for your own creations or unlock that creative block.

1. Polaroid Memories – CSS only by Nico

See the Pen Polaroid Memories – CSS only by Nico (@nicokoenig) on CodePen.0

2. CSS Only Floated Labels by Nick Salloum

See the Pen CSS Only Floated Labels by Nick Salloum (@callmenick) on CodePen.0

3. Button Loading Animation by Joshua Ward

See the Pen Button Loading Animation by Joshua Ward (@joshua_ward) on CodePen.0

4. The bRadio — a radio for Bootstrap 4 with Custom Properties by Stas Melnikov

See the Pen The bRadio — a radio for Bootstrap 4 with Custom Properties by Stas Melnikov (@melnik909) on CodePen.0

5. Tag Livros Loader by Pedro Henrique Pires

See the Pen Tag Livros Loader by Pedro Henrique Pires (@pedrohenriquepires) on CodePen.0

Code Pen is a social development environment for frontend developers. We think that it makes sense for allur to be publishing the best Pens out there because it is just what allur is about. Design and how we implement it on the web. We are web developers and quality code and stylish designs are what we aim to achieve.

We hope you like this little collection.

Yesterday Apple announced the much awaited iPhone X and to go ahead helping the community we found 3 free iPhone X mockups worth of show casing on allur.

There will be a lot of new mockups and illustrations going forward and we will surely update this list. Enjoy

1. iStores Freebie iPhone X Mockup

Allur - iPhone X Mockup

2. Jae-Seong, Jeong iPhone X Mockup

https://www.uplabs.com/posts/free-iphone-x-mockup-1677f83e-caea-4a79-824c-3d7ce86cc65e

3. Graphic Pear iPhone X

https://www.graphicpear.com/iphone-x-mockup-psd/

4. This one is not a free mockup, but it is worthy of mention:

This is a simple straightforward iPhone X mockup, from the latest Apple release in 2017.

Included is a PSD file with the smart object so you can replace the design with yours. High quality and easily changeable background.

Simply double click on the Smart Object and replace it with your own design, and voila! A beautiful mock-up ready for your Hero/Presentation on your website/landing page!

These are our first curated list of the best Pens. Every week will be posting a new curated list. Check it Out

1. “HER” movie loading by Siyoung Park

See the Pen Her – OS1 Loading by Siyoung Park (@psyonline) on CodePen.0

2. E-Commerce Shop (Single Item) by Fabio Ottaviani

See the Pen Daily UI #012: E-Commerce Shop (Single Item) by Fabio Ottaviani (@supah) on CodePen.dark

3.CSS Site Scroll Micro Animation by Ryan Mulligan

See the Pen CSS Site Scroll Micro Animation by Ryan Mulligan (@hexagoncircle) on CodePen.dark

4.Hamburger Icon Animations by Rosa

See the Pen Hamburger Icon Animations by Rosa (@RRoberts) on CodePen.dark

5. Printer Pull Down To Refresh by Nikolay Talanov

See the Pen Printer Pull Down To Refresh by Nikolay Talanov (@suez) on CodePen.dark

Code Pen is a social development environment for frontend developers. We think that it makes sense for allur to be publishing the best Pens out there because it is just what allur is about. Design and how we implement it on the web. We are web developers and quality code and stylish designs are what we aim to achieve.

We hope you like this little collection.