SluggoWebDev

söndag 24 januari 2016

Sluggo Beat XP - WIP - Adjust the Sluggo Plates

After my séjour with Sluggo Pins Mark II, I'm now back on track with Sluggo Beat.

I've nearly lost my track, so I started with an easy part - adjusting the textcolumns.

The Beat is sketchy in this part and the code is long-winded. I'll let it be, for now, because it works, and return to it later on and work it through. Maybe I'll find a pattern and make a function to get rid of some codelines.

The Beat has ten basic wireframes/grids. Every grid have five parts - aka Sluggo Plates - one header, one footer, two main content plates and one aside plate.

Every Plate is slightly different and will act a little bit on its own, but still have the feeling of being a part of the same family.

The Main Plates with responsive text columns.

I've put my effort on each Plate to deliver the best seamless user experience from zero pixel to infinity width.

The challenge is to constantly check everything at every width.

My goal with the textcolumns is to make the most pleasent reading experience at any screen size. The lines must have a comfortable width and should not be to long or to short. Sluggo Beat is intendend to be a smooth lean machine and every detail must be considered (or be taken away).

Content is still King and every bump on that road must be even out.

lördag 23 januari 2016

Sluggo Pins Mark II -The Launch!

I was ready to launch when the code started to crumble and fall apart.

Something went wrong with the core code that listed the pins, and without a proper code I haven't got a solid product to use.

I wrote and rewrote the code and finally got a new core and a lot of new insights. The code went even better and shorter than I hoped for. It fulfilled my expectations by far.

Finally - the Sluggo Pins Mark II is released!

Download your copy at Codepen today:

http://codepen.io/steffodimfelt/pen/dYBeYo

lördag 16 januari 2016

Sluggo Pins Mark II - Pre-launch 2

Ehhh... No... Aaand... No...

The padding won't work. Nor the margins.

My calculations got too complicated.

And they didn't work properly.

Went out for a walk and suddenly I got it.

Tables...

Oh, man... Tables... Of course...

All the pins structured between columns and the space will also be definied in separat columns. The table can have various width and still have constant space between columns.

Feels like going back to basic and throw away all complicated-calcutated-spaces-did-not-work-anyway.

So simple...

Love it.

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
</style>
</head>
<body>

<table style="width:100%">
<tr>
<td>Pin Row 1</td>
<td style="width:10px">Space</td>
<td>Pin Row 2</td>
</tr>
</table>
</body>
</html>

torsdag 14 januari 2016

Sluggo Pins Mark II - Pre-launch

The new Sluggo Pin-version is on its way. I'm tuning and tweaking the last lines to make it pixel-perfect and small-sized. Got rid of 45 lines of code when I fixed the problem with columns not lined up properly.

Discovered the the columns lined up differently depending on where source and target tags are in the HTML. But not always - three-in-a-row lines up just perfectly...

I also put some if-statements through a JS-minifier and got rid of 40 more lines. Instead of:

if (Columns == "1R" ){

if (ColWidth > 0){Columns = 1;}}

...I got:

"1R"==Columns&&(ColWidth>0&&(Columns=1));

...And a new way to write code more efficient.

It's just the final touch left and the last doublecheck before the launch.

Sluggo Pins Mark II - WIP - Solve the padding problem between pins

Just when I thought I was done and ready for launch, I got a drawback - if all the pictures are equal in size the pins become different in height. I've never seen it before because I've used different sized pictures.

So, why did it happen?

Padding problems

The major problem is that the columns have different kinds of padding. Left and right columns have only left or right padding, but the columns in the middle have left and right padding. This gives the left and right columns some extra space and therefore makes them slightly smaller.

Why did I do that?

Well, in Mark I there where padding around all sides of the columns. The problem comes when the user wants a wide padding. The left padding of the left column and right padding on the right column makes them not lined up with the other objects on the page.

My first attempt to fix this was to put padding on all pins but the first one. The padding turned out very well, but the far left column still needed some extra padding, and I couldn't put that padding anywhere - either the left margin gets to wide or there will be too much space between column 1 and 2.

Margins mayhem

So I tried to adjust the margins, but ended up with more mess than before. The big problem was that added margins pushes columns to the right. The last column won't fit so it is placed underneath the others, leaving a gap.

When I got rid of all padding and margins, everything looks fine and dandy. So I have to figure out what I can do to solve this problem besides margins and padding.

Constant columns

Sluggo Pins columns is based on constant numbers. 1/50 is 50% of the target div, 1/25 is 25% and so on.

To predefine the numbers is a great way to make all columns constant - until you want som space between. And the different kind of space, acts differently.

Padding will shrink the inner content, because the outline of the div is constant.
Margins will push the divs to the side.

My solution

My solution is to get rid of the constant numbers when I build the columns. The most important issue is that the spaces between the pins is equal to the input from the user.

My thought is something like this:

(Target Width - (Padding value*(Columns-1)))/Columns = Columns Width

This will get:

Space between columns that doesn't push the pins. The pins will shrink equally.
An accurate width of the columns. The width is based on the current target.
No padding on the far left or far right side.

Update

The right calculation is:

var WidthOut = (ColWidth-(PadIn*(Columns-1)))/Columns;

(ColWidth is the value from $(Target).width();)

Right on spot...

onsdag 13 januari 2016

Sluggo Beat XP - WIP - Hotdish Navigation

The basic mobile version number 1 of Sluggo Hotdish is set.

Went trough some minor issus about the logotype and the hamburger-icon. I wanted them horizontal AND vertical centered.

My first idea was a function that calculated the height of the navigation-bar and the height of the logotype and hamburger-icon to give equal padding on all sides.

The result turned our terrible - the logotype made a jump when it positioned after the page where loaded. For my defence I could only say that it was late at night...

The perfect solution just involve this easy CSS (Thank God!):


#Logotype

{

width:80%;

height:100%;

position: relative;

}



#Logotype img

{

position: absolute; 

top: 50%; left: 50%;

transform: translate(-50%, -50%);

}