Hi, I’m Brian Dys — a photographer from the inside looking out · a composer entangled in electronic music · a UX designer · a spouse, a parent, & everything in between.
About Snippet
0
Comment
If you have a padded content, everything in it will be bound by the padding around it.
But how do we expand an element to the edges of the container, disobeying the padding – something like a full-width picture.
We use negative left and right margins to offset the spacing brought about by the padding.
Negativity only for margins
The tendency of the negative margin is to, instead of inserting the specified space, it allows the content to fill in a space to that direction. So, for margin-left: -1rem, it will allow the content 1rem at the left – couple that with a margin-right: -1rem, it will allow the content 1rem at the right. That will offset the 1rem padding around the container.
[codepen_embed height=”798″ theme_id=”1820″ slug_hash=”FybHu” default_tab=”result”]See the Pen A Dose of Negativity by Brian Dys Sahagun (@BrianSahagun) on CodePen.[/codepen_embed]
As tested on the img element, margin-right does not work – so we wrap the image in a div and apply the negative margins on that element.
You can use negative margins to offset/correct unwanted spacings around elements.
Update – 10/9/2014
This post has been moved to Design DriveThru.
It’s like trying to solve a puzzle – you try out different solutions until you either come to a dead end or to face more questions.
That’s how it is trying to establish a foundation, a system in simplifying the process of designing an internet product such as websites, apps, and nowadays, whatnot.
How can we simply turn the abstract ideas of clients into a bunch of playing cards we could easily identify and arrange and ultimately build into a house (not made of cards)? Also at the same time, with only a flick of a switch, upload themselves and make available for usage.
That’s what I’m trying to find out (at least the first part).
I’m lazy. But it’s the lazy people who invented the wheel and the bicycle because they didn’t like walking or carrying things.
I’m looking for a bubblegum patch for tables displayed in narrow viewports. So, I thought about display: block, max-width: 100%, and overflow-x: auto. Take a look at the examples: Example 1 shows the problem of the overflowing content of the table and Example 2 shows the quick solution.
[codepen_embed height=”621″ theme_id=”1820″ slug_hash=”Kobqa” default_tab=”result”]See the Pen Lay It on the Table by Brian Dys Sahagun (@BrianSahagun) on CodePen.[/codepen_embed]
A while ago, I was connecting my HTC phone to Mac and it needed a piece of app to do so. Of course, there’s a requirement to agree to something I seldom read.
My behavior is to press on the label “I agree to the terms of the license agreement” instead of on the checkbox hoping that this will also tick the box.
But nothing happens because the label is a mere label unconnected from the form element (checkbox).
How do we make it easier for the user?
We must provide an action whether the user’s behavior is to press on the checkbox or on the label – the box should toggle.
-
White-label product
A white-label product or service is a product or service produced by one company (the producer) that other companies (the marketers) rebrand to make it appear as if they made it.
Source: http://en.wikipedia.org/wiki/White-label_product
If clients say, “We want this widget white-labeled,” theme it, rebrand it, they mean.
Yesterday, I was scouting for an Adobe Creative Cloud reseller. It was Microphase who sponsored the event at My Cinema, Greenbelt 3.
Adobe Creative Cloud for Teams looks apt for the Chikka Design team. Joining entails having one administrator who will then purchase “seats” or subscriptions for people in the team. Long gone are the boxes and the discs and the serial numbers.
The downside (for end users) as I’ve heard (not from the event) is that you can only install any Creative Cloud app on two desktop devices and on five mobile devices and you can only use one at a time. E.g., Illustrator in your iMac at the office and PC at home; Photoshop in 5 of your Cherry Mobile tablets – and leave one not running. Crap if you left one open at home.
Adobe, get your act together. When you say that we can use Creative Cloud anywhere, mean it. Some people here own a computer shop! Let us use it anywhere there’s cloud up above.
Oh yeah, sometimes it’s only the sky.
But let’s see – I have yet to try this big purchase.
Because imagine, it will amount to one little Kia Picanto car in 5 years for a team of 5.
—
Enough of Adobe. And more of X-Men. Because along with the marketing spiel of Adobe Creative Cloud (and Symantec – the part I took a nap) is an X-Men screening.
This X-Men:
It’s the one I knew from grade school of the 90s – right after the Ghost Busters era. Storylines didn’t bear much meaning to me. I just wanted to watch Rogue and Gambit get it on. And listen to Storm murmur “Bulburine,” as my cousin pointed out.
I ensured to not miss my beloved characters so I recorded one damn episode in VHS – the episode recalling Gambit’s past.
But unlucky me, one kid (I don’t remember who) – there’s always that one kid who will plug in a 110-volt appliance into a 220-volt socket.
And due to a bout of the crazy, I was forced to record several episodes on cassette tape. And listened to the intro whenever I would miss the X-Men.