I'm looking to a way to design my website a bit like this one that is inspirating to me : https://flink.to/
My research is more about the way the articles are showing up in a mosaic of squares of two different sizes.
I tried :
Masonry horizontal (http://isotope.metafizzy.co/layout-modes/masonryhorizontal.html) but it doesn't really work in responsive as we can't assign a width and a height in percentage... I'm looking for a solution to display squares in that way.
CSS with Flex direction, but It's not as powerful as it could be : if I have three rows of squares and a very-first-big square, more-little squares don't fill the empty space above the big one.
How could I replicate this in the best way ?
I have found Pure CSS and CSS Skeleton to be really simple and easy to use libraries for responsive grids in CSS.
Here is an example of a similar layout using pure.css
In Pure CSS grids are laid out like this:
<div class="pure-g">
<div class="pure-u-1-3"><p>Thirds</p></div>
<div class="pure-u-1-3"><p>Thirds</p></div>
<div class="pure-u-1-3"><p>Thirds</p></div>
</div>
And in CSS Skeleton like this:
<div class="container">
<div class="row">
<div class="one-third column">1/3</div>
<div class="two-thirds column">2/3</div>
</div>
<div class="row">
<div class="one-half column">1/2</div>
<div class="one-half column">1/2</div>
</div>
</div>
Related
I have a table structure which is made out of distinct blocks which cannot be brought into the same block, such as this - only much larger.
The structure of this ideally needs to stay the same.
<div class="dynamicList">
<div class="header">
<div class="item">col1</div>
<div class="item">col2</div>
</div>
<div class="row">
<div class="item">Learn JavaScript</div>
<div class="item">test message</div>
</div>
<div class="row">
<div class="item">Build something awesome</div>
<div class="item">medium message</div>
</div>
</div>
I want a way to be able to dynamically size the columns in the row to auto fit to the text so that the largest text column width is used for all the others of the same column. On the top is how it looks, at the bottom is how I want it to look.
I was hoping I could get away with just using CSS for this, however I feel I might need some JavaScript too. I am using React, so thought about using useRef hook, but didn't know how well this would perform with a really large table.
What is the best way to calculate this width and then use it across all columns of the same index?
Here is a JS fiddle showing the problem.
https://jsfiddle.net/og8kz3hp/65/
We have a requirement of creating a dashboard in angular where I am using a gauge chart code from here.
My HTML file looks something like this:
<div fxLayout="row" fxLayoutAlign="space-around center" >
<div fxFlex='33%'>
<div id="power-gauge"></div>
</div>
<div fxFlex='33%'>
<!-- Some other chart -->
</div>
<div fxFlex='33%'>
<!-- Some other chart -->
</div>
Now the issue is when the website is being accessed from different resolutions this gauge is not scaling properly as it has a static height and width.
Is there any way I can make it responsive.
Had to give height and width in %.Found the solution here.
I am developing a website in Zurb Foundation 4 and SASS.
My code looks like:
<div class="row">
<div class="large-6 columns redbg"> content goes here... </div>
<div class="large-6 columns greenbg"></div>
</div>
Both of inner divs has background. I have a column gutter of 30px.I want this gutter to be white. The possible solution for it to add parent divs for both of inner divs and apply columns and large-6 class to it and this way code will look like:
<div class="row">
<div class="large-6 columns">
<div class="redbg"> content goes here... </div>
</div>
<div class="large-6 columns">
<div class="greenbg"> content goes here... </div>
</div>
</div>
But by applying this solution I have to create two divs for only the sake of design. Can anyone please guide how to do it or a better approach.
Also I wonder how to collapse a column from just one side (left or right)?
It would be much easier to use CSS - by using the background-clip property, which as its name suggests, allows you to clip the painting area of an elements background.
Since the gutter width in foundation is within the padding box, you can use the content-box value.
Here is a simple example: http://jsfiddle.net/CA669/950/embedded/result/
Can you make the row have a white background? That way the gutter will be white.
The other way I can think of is how you are currently doing it. I've had to do similar solutions.
I attempt to add a background image and use cover to let the browsed resize the image. However the image is very small and doesn't cover the whole background.
I am new to angular so I have a very small idea about how this works.
Also, the search bar isn't in the middle despite using zurb to manage spacing for me.
Here is what the page looks like
Here is the code:
<div >
<!-- Above fold -->
<div class="row">
<div id = "backgroundImage" class="large-12 small-12 columns" ng-style="{'background-image':'url(img/mainBackground.png)','background-size' : 'cover'}">
<!-- search bar -->
<div class="row">
<!--empty -->
<div class="large-3 small-3 columns">
</div>
<div class="large-6 small-6 columns">
<input type="text" id="searchBar" ng-style="{'width': '50%'}">
</div>
<!--empty -->
<div class="large-3 small-3 columns">
</div>
</div>
</div>
</div>
</div>
Adding on to #Marko's response, you are using Angular to style an attribute, but the styles you are providing are just static. Angular's ng-style attribute is intended to be used when you have dynamic styles that you want to apply at runtime based on a given condition. You aren't doing that. You're simply providing static styles that you want to be applied, inline. That's not really considered a best practice. It would be better to just use a static css stylesheet to do what you want.
That being said, the issue you're facing is purely a CSS one, not an angular-specific one. You just need to debug your style on your #backgroundImage div and you'll eliminate a lot of the complexity involved in using ng-style.
Here's a good tutorial on using full-page css background images: http://css-tricks.com/perfect-full-page-background-image/
I have a div inside which I have placed images of many languages. The total size of the div goes above the page size in a browser. So I want the images to keep moving from bottom to top like animation slider. Image size is not what I am looking to change. I just want the images to keep moving from bottom to top. At the end of this website http://www.veepal.com/ there is a div that has images of different programming languages which keep sliding. I want similar functionality. Is it possible??
<div id="languagesRow" style="position: absolute;top:5px;">
<div id="l1"><img class="messagesOne" src="images/languages/English.png"></div>
<div id="l2"><img class="messagesOne" src="images/languages/French.png"></div>
<div id="l3"><img class="messagesOne" src="images/languages/Russian.png"></div>
<div id="l4"><img class="messagesOne" src="images/languages/Chinese.png"></div>
<div id="l5"><img class="messagesOne" src="images/languages/Korean.png"></div>
<div id="l6"><img class="messagesOne" src="images/languages/Hindi.png"></div>
</div>
I dont know what can be used more optimally to achieve this kind of animation so I am tagging jquery, javascript and css in this post.
Well you can use marquee for this:
http://jsfiddle.net/ZB2Fc/
<div class='flags'>
<MARQUEE BEHAVIOR='SCROLL' HEIGHT='25' WIDTH='300' BGColor='yellow' scrollamount="1" onmouseover="this.stop();" onmouseout="this.start();">
<div id="l1">English</div>
<div id="l2">French </div>
<div id="l3">Russian </div>
<div id="l4">Chinese </div>
</MARQUEE>
</div>
CSS Marquee is one option : http://jsfiddle.net/FbKW9/
<marquee behavior="scroll" direction="up" >//item</marquee>