Sponsored Content
The Lounge What is on Your Mind? Phase III: CSS Flexbox Upgrades Post 303021311 by Neo on Wednesday 8th of August 2018 04:08:10 AM
Old 08-08-2018
Phase III: CSS Flexbox Upgrades

On my never ending quest to get rid of table tags and make the site responsive for all device sizes, I plan to use CSS Flexbox with jQuery.

I tried using Bootstrap Flex and CSS Grids, but none of these worked as easy and clean as CSS Flexbox.

For example, today I changed the top header area (forum name and member avatar area at the very top of the each page) to be responsive (see YT video below or go to YT link directly).

Code:
<style>
    .flex-container-header {
        display: flex;
        flex-wrap: wrap;
        align-items: stretch;
        justify-content: space-between;
    }
</style>
<script>
    $(document).ready(function () {
        $(window).on('resize', neoAdjustFlex);
        neoAdjustFlex();
        function neoAdjustFlex() {
            if ($(window).width() < 500) {
                $(".flex-container-header").css({ "justify-content": "space-around" });
            }
            else {
                $(".flex-container-header").css({ "justify-content": "space-between" });
            }
        }
    });
</script>

I plan to do this with the menus and then on to other forum views like search results, thread and discussion views, member lists, etc.

Code:
https://www.youtube.com/watch?v=9nrue8l9oIo

Or watch the vid here:


 

9 More Discussions You Might Find Interesting

1. UNIX for Dummies Questions & Answers

Hardware Upgrades..

Quick question would it effect Linux if I upgraded my Ram from 128RD Ram to 256RDRAM (I'm going to simply pop in a second 128 RAM chip)...would I need to change any configuration options etc or would Linux detect all this with no problem? (4 Replies)
Discussion started by: PravusMentis
4 Replies

2. AIX

HMC upgrades

Hey!!! Has anyone done HMC patch installation remotely? I would love to know if that would be possible. I have been doing through CD/DVD but hate to do the additional work of finding someone in the DC and sending him the CD's. I have seen the option to supply remote site. can that be helpful?... (5 Replies)
Discussion started by: balaji_prk
5 Replies

3. AIX

How can I manage redundant HMC upgrades with firmware upgrades?

Lets says I have 2 HMC's A and B, connected to a p570 managed system. Right now the firmware level of the p570 is EM320_076 and that needs to be upgraded to EM340_095. Now the HMC's are at V7R3.3 and as per the code matrix the HMC's needs to be upgraded to V7R3.4 Servicepack 2. Now my... (5 Replies)
Discussion started by: balaji_prk
5 Replies

4. Solaris

init phase

Hello, Can somebody explain me the relationship between /sbin and /etc directories ? what is the relationship between them and what are the roles of files such as rcd.1 etc? (1 Reply)
Discussion started by: saudsos
1 Replies

5. AIX

Need to confirm something regarding TL upgrades

Hi everyone, My current AIX OS level is "7100-01-06-1241" and I am planning to upgrade it to " 7100-02-03 ". Can i directly upgrade it to "7100-02-03" from 7100-01-06" ? or first i need to upgrade the "7100-01-06" LPAR to TL 02 and then reboot and then upgrade it to TL 02 SP03 ? ... (4 Replies)
Discussion started by: System Admin 77
4 Replies

6. What is on Your Mind?

Prototyping New Responsive Mobile for UNIX.COM - Phase III

From Prototyping New Responsive Mobile for UNIX.COM - Phase II, we move to Phase III. Basically, the core prototype for every day browsing the forums, replying, posting and editing on mobile is nearly finished with the exception of a few formatting issues with regard to rare system messages or... (4 Replies)
Discussion started by: Neo
4 Replies

7. War Stories

Postbit Changes (Phase II Upgrade)

Next in the pipeline, thinking I will work on postbit (the core of the posts) and try to get Bootstrap and badges working in postbit and not break the quick editors in the post. Note, I had to turn off the scrollbars in postbit for now because when I turn them on, it breaks the quick editor in... (11 Replies)
Discussion started by: Neo
11 Replies

8. Shell Programming and Scripting

XML Phase with awk

Hi Guys, Input XML File :- <managedObject class="RMOD_R" distName="MRBTS-101/X/R-7"> <list name="activeCellsList"> <p>15</p> <p>201</p> </list> <p name="aldManagementProtocol">True</p> <p name="serialNumber">845</p> </managedObject> Output :- ... (5 Replies)
Discussion started by: pareshkp
5 Replies

9. Docker

Docker learning Phase-I

Hello All, I had recently learnt a bit of Docker(which provides containerization process). Here are some of my learning points from it. Let us start first with very basic question: What is Docker: Docker is a platform for sysadmins and developers to DEPLOY, DEVELOP and RUN applications ... (7 Replies)
Discussion started by: RavinderSingh13
7 Replies
CSS::Squish(3pm)					User Contributed Perl Documentation					  CSS::Squish(3pm)

NAME
CSS::Squish - Compact many CSS files into one big file SYNOPSIS
use CSS::Squish; my $concatenated = CSS::Squish->concatenate(@files); my $squisher = CSS::Squish->new( roots => ['/root1', '/root2'] ); my $concatenated = $squisher->concatenate(@files); DESCRIPTION
This module takes a list of CSS files and concatenates them, making sure to honor any valid @import statements included in the files. The benefit of this is that you get to keep your CSS as individual files, but can serve it to users in one big file, saving the overhead of possibly dozens of HTTP requests. Following the CSS 2.1 spec, @import statements must be the first rules in a CSS file. Media-specific @import statements will be honored by enclosing the included file in an @media rule. This has the side effect of actually improving compatibility in Internet Explorer, which ignores media-specific @import rules but understands @media rules. It is possible that future versions will include methods to compact whitespace and other parts of the CSS itself, but this functionality is not supported at the current time. COMMON METHODS
new( [roots=>[...]] ) A constructor. For backward compatibility with versions prior to 0.06 you can still call everything as a class method, but should remember that roots are shared between all callers in this case. if you're using persistent environment (like mod_perl) then it's very recomended to use objects. concatenate( @files ) Takes a list of files to concatenate and returns the results as one big scalar. concatenate_to( $dest, @files ) Takes a filehandle to print to and a list of files to concatenate. "concatenate" uses this method with an "open"ed scalar. RESOLVING METHODS
The following methods help map URIs to files and find them on the disk. In common situation you control CSS and can adopt it to use imports with relative URIs and most probably only have to set root(s). However, you can subclass these methods to parse css files before submitting, implement advanced mapping of URIs to file system and other things. Mapping works in the following way. When you call concatenate method we get content of file using file_handle method which as well lookup files in roots. If roots are not defined then files are treated as absolute paths or relative to the current directory. Using of absolute paths is not recommended as unhide server dirrectory layout to clients in css comments and as well don't allow to handle @import commands with absolute URIs. When files is found we parse its content for @import commands. On each URI we call resolve_uri method that convert absolute and relative URIs into file paths. Here is example of processing: roots: /www/overlay/, /www/shared/ $squisher->concatenate('/css/main.css'); ->file_handle('/css/main.css'); ->resolve_file('/css/main.css'); <- '/www/shared/css/main.css'; <- handle; content parsing find '@import url(nav.css)' -> resolve_uri('nav.css', '/css/main.css'); <- '/css/nav.css'; ... recursivly process file find '@import url(/css/another.css)' -> resolve_uri('/css/another.css', '/css/main.css'); <- '/css/another.css' ... roots( @dirs ) A getter/setter for paths to search when looking for files. The paths specified here are searched for files. This is useful if your server has multiple document roots or document root doesn't match the current dir. See also 'resolve_file' below. file_handle( $file ) Takes a path to a file, resolves (see resolve_file) it and returns a handle. Returns undef if file couldn't be resolved or it's impossible to open file. You can subclass it to filter content, process it with templating system or generate it on the fly: package My::CSS::Squish; use base qw(CSS::Squish); sub file_handle { my $self = shift; my $file = shift; my $content = $self->my_prepare_content($file); return undef unless defined $content; open my $fh, "<", $content or warn "Couldn't open handle: $!"; return $fh; } Note that the file is not resolved yet and is relative to the root(s), so you have to resolve it yourself or call resolve_file method. resolve_file( $file ) Lookup file in the root(s) and returns first path it found or undef. When roots are not set just checks if file exists. _resolve_file( $file, @roots ) DEPRECATED. This private method is deprecated and do nothing useful except maintaining backwards compatibility. If you were using it then most probably to find files in roots before submitting them into concatenate method. Now, it's not required and this method returns back file path without changes. resolve_uri( $uri_string, $base_file ) Takes an URI and base file path and transforms it into new file path. BUGS AND SHORTCOMINGS
At the current time, comments are not skipped. This means comments happening before @import statements at the top of a file will cause the @import rules to not be parsed. Make sure the @import rules are the very first thing in the file (and only one per line). Processing of @import rules stops as soon as the first line that doesn't match an @import rule is encountered. All other bugs should be reported via <http://rt.cpan.org/Public/Dist/Display.html?Name=CSS-Squish> or bug-CSS-Squish@rt.cpan.org. AUTHOR
Thomas Sibley <trs@bestpractical.com>, Ruslan Zakirov <ruz@bestpractical.com> COPYRIGHT AND LICENSE
Copyright (c) 2006. This library is free software; you can redistribute it and/or modify it under the same terms as Perl itself, either Perl version 5.8.3 or, at your option, any later version of Perl 5 you may have available. perl v5.10.1 2010-01-14 CSS::Squish(3pm)
All times are GMT -4. The time now is 11:34 AM.
Unix & Linux Forums Content Copyright 1993-2022. All Rights Reserved.
Privacy Policy