Brian Dys

Tag: Dys Sahagun

  • Center-align lists

    —

    by

    Brian Dys
    in

    It’s easy to center-align a bunch of text: [code lang=”html” title=”HTML”] <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p> [/code] [code lang=”css” title=”CSS”] p {text-align:center;} [/code] But how do you center-align a list such as a ul or an ol with children set as inline (or side by side)? Simply set the parent (ul) to…

  • Design principle #1: set defaults

    —

    by

    Brian Dys
    in

    Avoid making the user choose from too many options. Do: set default options for users to choose from–ideally the most common and provide a way for them to choose what is not initially presented. Avoid: presenting a wide array of options that the interface gets cluttered and the users confused on which to choose. Choose…

  • Trying out Brackets for front-end development

    —

    by

    Brian Dys
    in

    For the longest time, I’ve been using Adobe Dreamweaver and Notepad++ in developing the front-end of websites (and I remember trying out PageMill long ago and resorted to Notepad). I’m looking into one of Adobe’s projects: Brackets.   Brackets is an open-source editor for web design and development built on top of web technologies such…

  • CSS, I could see what you’re doing there…

    —

    by

    Brian Dys
    in

    …you’re translating all the features and functions of all software combined into styles and you’re making the browser a mashup of those software. One day, Photoshop will have an “export to HTML and CSS” function wherein the lens flare filter I dearly love would be a bunch of vector shapes rendered by the browser. And…

  • —

    by

    Brian Dys
    in

    The browser unifies content. It forces us to adhere to standards. Imagine a time wherein your doodles in Paper could be opened and edited freely in Illustrator then shared instantly on the web–all these would be possible if they would be speaking in discernible language.

  • We’re waiting for position:sticky

    —

    by

    Brian Dys
    in

    Sounds like booger? Nope, it’s what’s been brewing in browsers and hopefully it becomes a standard. The basic syntax is: [code lang=”css” title=”CSS”] div {position:sticky;} [/code] We already have position:fixed and it sticks! Well, if you’re familiar with the CSS propety-value position:fixed, it fixes the position of an element relative to the viewport (and not…

  • Minify and un-minify CSS

    —

    by

    Brian Dys
    in

    Whether you have an unreadable stylesheet or you want to minify/compress it for optimization purposes, Client-side CSS (De)Compressor is your friend. Update: since the previous tool doesn’t exist anymore, here’s another tool to unminify your CSS: http://mrcoles.com/blog/css-unminify/ http://minify.avivo.si/#results

  • Setting the width of absolutely-positioned elements

    —

    by

    Brian Dys
    in

    One way to set the height of an element to 100% is to absoultely-position it yet you needed a max-width for it to follow (instead of a simple width) for layout reponse purposes. The solution is to simply set its width to 100% and set the max-width to your desired value. For example: [code lang=”css”…

  • 100% parent, definite-width child

    —

    by

    Brian Dys
    in

    You want to have a 100% expanding parent while still having control over the child to have a definite width? What’s the use for this? A 100% background not interfering with the child that has width. [code title=”HTML” lang=”html”] <div class="container"> <div class="content"> Content </div> </div> [/code] [code title=”CSS” lang=”css”] .container { background-color:red; } .content…

  • CSS border box, here we come

    —

    by

    Brian Dys
    in

    Hey, remember that time when you switched from the table layout to div layout? This is the time to be “out with the old and in with the new”. We’ll be leaving behind the contraption that alleviate the pains of the CSS box model. Just to refer to that contraption, familiar with this? [code] <div…