Posts

Showing posts with the label Design

Create a responsive navbar with flexbox and boostrap v4

Image
Create a navbar responsive display with flexbox and boostrap v4 Last week we saw how to setup vscode to compile sass. Today we will see how we can compile bootstrap sass files together with our own sass and define a grid layout for the collapsed nav in smaller screen using flexbox. Flexbox Bootstrap sass media directive Build the nav style We will be creating the style for the following navbar: 1. Flexbox Flexbox allows to control how elements are rendered in a responsive layout. We can control precisely how the space available is occupied by elements together with the order of appearance. There’s few settings for it which are applied to the container and the elements within the container. Refer to MDN documentation if you want more explanation https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes . In this tutorial, I will only use the following css properties: For the container: display: flex; flex-flow: row wrap; display:f...
Post a Comment
Keep reading

Setup vscode to work with sass effortlessly

Image
Setup vscode to work with sass effortlessly Writing sass is very easy with code. Today we will see how we can leverage some NPM packages to compile SASS to CSS, watch file changes and live update the browser for an effortless style development. This post will be composed by 3 parts: 1. Setup vscode task 2. Create a Gulp build script 3. Use live-server for live reload The tasks are from the example of vscode documentation to compile sass https://code.visualstudio.com/docs/languages/css#_transpiling-sass-and-less-into-css . 1. Setup vscode task To use code tasks, we need to create a tasks.json file under the hidden /.vscode folder. | - .vscode - tasks.json | - style.scss | - index.html The tasks allow us to execute programs by selecting from the search bar CMD + shift + P , Run build task . If a default task is set, it can directly be triggered by CMD + shift + B . As a first example we can start by installing the sass compiler with node-sass . npm install -g node-sas...
Post a Comment
Keep reading

How to make a sticky navbar using Bootstrap

Image
How to make a sticky navbar using Bootstrap Today I will demonstrate one way to achieve a sticky navbar in Bootstrap v4 using fixedsticky . This post will be composed by three parts: 1. Get the librairies 2. Page without the nav sticking 3. Make the nav stick 1. Get the librairies As mentioned in the introduction, we will be using fixedsticky and bootstrap v4. We start first by getting those via bower: Bootstrap v4 bower install bootstrap#v4.0.0-alpha.6 Fixed-sticky bower install filament-sticky You should then have it locally in your bower folder. 2. Page without the nav sticking We build a sample page without sticky. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Example</title> <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" /> <style> .content { background-color: rgba(0, 0, 255, 0.21); height: 2000...
Post a Comment
Keep reading

More Gimp tips!

Image
More GIMP tips! Every now and then I discover features on Gimp that I didn’t know existed. It is always a good surprise to find a feature which simplify your work. So today I will show four features that I recently discovered: 1. Extra view 2. Color palette 3. Floating layer 4. Animated GIF 1. Extra view Gimp allows us to display multiple time the same file with different zoom and positions. This is very useful as we can use as a preview view. You can open a new view by going View > New View . 2. Palette to choose colors To choose between colours another easy way is to use Palettes. You can open the palette by adding from Windows > Dockable dialogs > Palette . Once selected, it can be used to set the restrict the colors picker to your own colors. For example if we choose the Gold palette, we will have some shades of brown which can be used to colour objects and make them gold’ish. We can also create our own palettes and those are saved into Gimp settings. For example...
Post a Comment
Keep reading

GIMP Alpha Channel, what is it?

Image
GIMP - Alpha channel, what is it? Few months ago I made a first introduction to GIMP - https://kimsereyblog.blogspot.co.uk/2016/09/gimps-primary-features.html - the post was oriented toward the toolbox and what features were available. Today I would like to share an explanation on what the alpha channel is and show you how you can outline text using the alpha channel. 1. What is the alpha channel The channels tab can be seen from the Layers view. There are 4 channels, Red, Green, Blue and Alpha. The alpha channel is used for transparency. Transparency means that when you export to .png, the transparent parts of your image will show whatever is underneath. This is very useful for apps icons or images for web design. When your layer does not have an alpha channel, its name should be bolded. When it has one it should not be bolded. Also when right click on the layer, Add alpha channel should be grayed out. Having an alpha channel allows us to add transparency to our image....
Post a Comment
Keep reading

GIMP primary features

Image
GIMP’s primary features When working on personal projects, there’s one thing which use to always make me waste lot of time - art. Art in the sense of making logo, icon and other images like feature graphics or promotional images. Making something that looks “ok” is not as easy as it seems especially for people like me who have no sense of art whatsoever. Few weeks ago I completed Baskee and had to develop a feature graphic for it. Also my friend came up with the logo idea and I wanted to enhance it to make it more appealing. This sort of skills are always needed as it is hard to find people to do some art things for free. So might as well learn how to do it yourself by using the best free image editor - GIMP. https://www.gimp.org/ GIMP has been there for a decade and it is a well established software so I decided to jump into it to enhance Baskee logo and create the feature graphic. Here’s the evolution of Baskee logo from top to bottom (v1/v2/v3): This post is a highlight of ...
Post a Comment
Keep reading