I'm testing since severals month angular + ionic, and I used a lot the <ion-grid>. But since I'm doing an application that will be available on desktop AND on mobiles, sometimes I need VERY different layouts, and I find hard to achieve this sometime with the flexbox approach of the ion-grid component.
Is there a way to use instead the CSS Grid(https://css-tricks.com/snippets/css/complete-guide-grid/ ) inside of ionic? It would make some layout much easier.
Is this somehow supported directly by Ionic? Or does this require me to directly make it in CSS? What would be the downside of it not directly supported by Ionic?
In ionic there is nothing that force you to use only ionic elements, the point of using these elements is to make it easier for users for faster work.
So instead of using bootstrap to make a grid layout for example :
<div class="blabla">
<div class="row">
<div class="col-6 col-sm-12 ..."></div>
</div>
</div>
So ion-grid or ion-row or ion-col are just for faster use for a user, but if it comes for better performance between default elements in ionic and bootstrap, for sure it will be better in ionic elements, but if you can achieve your things without using library of bootstrap and just use css, then it will not differ at all since css is a part of ionic and not you who is adding the css file, so its very normal to use css and html normal elements like div to achieve tour results without ionic elemwnts.
Related
can you help me understand what bootstrap is? I know people is it for styling pages but can you clarify it to me? A big company like Twitter, Facebook or YouTube can use it?
Bootstrap is a very nice set of "styles" for all elements of any webpage. With it, a developer can focus on what they want to build (i.e. the elements) and very easily apply all the styling (including a lot of the colours, positioning, layout, movement/javascript) by simply adding few lines of code at the start of the webpage and adding a bootstrap class to an element, or wrapping parts of their webpage in a <div>.
Here is an excellent example of a very basic site that is made to look professional very quickly using very simple bootstrap. Click on "full page demo", then view -> view source to see the source code.
You can see some classic bootstrap classes like
<div class="jumbotron text-center">
and
<div class="container-fluid">
Bootstrap is a free and open-source front-end framework developed with css and javascript.
For styling and other change of the html, we make CSS classes and ids. And the main work we do in the css file and js file . But in bootstrap there is already some files which have many built in classes and ids .
After adding bootstrap to a html file we can do many work by only calling those classes and ids .
like ,
<p class="text-center">Center aligned text on all viewport sizes.</p>
only calling the class "text-center" we can align text center . No need to do any other css .
Many big company like Twitter, Facebook or YouTube can use it. On the other hand some make their custom files like bootstrap.
This a very simple question but I can't seem to get the coding right. How do you create a 6 picture photo grid like the one on here http://innisfree-template.blogspot.ca/ ? I don't need the text block in the middle, just need to know how to stagger the photos like this.
You could try and use flexbox or css grid layout instead of using bulky frameworks just for a simple grid. Try to avoid them for simple tasks.
Usually I use a jquery library like Isotope to achieve that type of grid. Using javascript all the boxes will riarrange dinamically if you change them in the future.
Page has two div elements in columns and my requirement is to resize the left column by selecting one side (right edge).
Below is my HTML code
<div id="leftSide" class="left-panel" >
<div class="left-top-panel">
</div>
</div>
<div id="rightSide" class="right-panel" >
</div>
I know there is css resize property. This is not helping me because using this element can be resized by selecting a corner.
I want to achieve this in my angular2 components. Any help on this is much appreciated.
This sounds like something that would be solved by a library or similar, not by Angular. Angular provides a framework that might allow you to hook into that sort of logic, but I would recommend using CSS/Component libraries to provide you with that functionality.
Is it good practice to use multiple .container and .container-fluids? (not nested)
I'd like to create some segments of my page with max-width and some without any.
You can use any number of '.containers' and '.container-fluid''s in a page. Beware when you are using nested '.container' since its having fixed widths at breakpoints. The examples in the bootstrap site itself have used multiple containers. So you can use..
This is well answered here: Multiple and/or nested Bootstrap containers?
Usually, with Bootstrap I use more than one container: one for the main content itself, the normal one; one inside the .header; and one inside the .footer.
You can use both, and also nested if required in your layout web page.
I'm currently using a .container for each section on my website. It's based on this template: http://blackrockdigital.github.io/startbootstrap-stylish-portfolio/.
As long as you don't nest them you'll be good!
I'm trying to do a simple layout on bootstrap but I can't find a solution that doesn't involve javascript.
I need the template to be like this on medium / large desktops: http://jsfiddle.net/Xx3G4/1/
And it must stay like this on small devices: http://jsfiddle.net/Xx3G4/
If I wasn't clear enough, I need the block "p1":
<div class="teemo-block">p1</div>
to be right after the block "stuff" on medium / larges and after the news on small / x-small.
PS:
Do not forget to re size the jsfiddle to see it on the correct viewport;
The solution of this problem using javascript is pretty easy, the problem is finding one without the use of it.
Thanks for reply
If you are using twitter bootstrap and if you don't have problem creating 2 "p1" blocks, one before and the other after the block "stuff", then there is one solution with the bootstrap class name. Bootstrap has a class called hidden-phone(renamed as hidden-xs in version 3), which hides the element with this class names in phones. Check here
The other solution would be to create 2 blocks as said above, use media queries to display one block and hide the other block. But this is not a pretty good solution, just in case if you don't find any other way without involving javascript
Just reposting and translating the answer I got on Portuguese SO (https://pt.stackoverflow.com/questions/9508/posicao-dos-blocos-em-bootstrap/9721#9721)
I have removed the classes col-push and col-pull and replaced them to pull-left and pull-right, also from bootstrap.
<div class="col-xs-12 col-md-4 pull-right">
<div class="teemo-block">
p1
</div>
</div>
Since, by default, all the 'cols' on bootstrap has float left, if you want to change that you must change it manually, that's why the news block got the pull-left and the other blocks got the pull-right, forcing them to stay on the desired position.
Check the result:
http://jsfiddle.net/luckmattos/hsCw9/7/