【Response': "early adopters" and "fill holes" in the foundation raster layout, and "foundation raster"

【Response': "early adopters" and "fill holes" in the foundation raster layout, and "foundation raster"
When it comes to responsive frameworks, we have to mention two responsive frameworks-bootstrap and foundation. I have already explained the title. Today I will introduce you to the foundation framework. What is "early adopters "? Let's take a preliminary look at the flexibility and strength of the foundation "? That is, I mark the pitfall I used when I used it, so that everyone can "detour" when using it! Yes. Today I am talking about the goat who looks warm (diao) Wen (de) yi) Ya (bi) on the left side of the northern sauce: foundation! : Four main points of the article: 1. row and column 2. block grids for foundation grid layout 3. responsive raster and visualization 4. floating Grid

[Note] In this article, I used the React framework, which may affect reading. Please forgive me. className is equivalent to class, style = {background: 'red'} is equivalent to style = "background: red" and can be safely consumed.

 

[Preparations] Write the following two items in your html file:

<Link rel = "stylesheet" href = "http://cdn.staticfile.org/foundation/6.3.0-rc3/css/foundation.min.css"> (placed inside the head label) <script src = "http://cdn.staticfile.org/jquery/3.1.1/jquery.min.js"> </script> (placed at the bottom of the body)

 

1. row and column)

<div className = 'row'>   <div className = 'small-2 medium-6 large-10 columns' style = {{background:'red'}}>column1</div>   <div className = 'small-10 medium-6 large-2 columns' style = {{background:'blue'}}>column2</div></div>

There are multiple column child elements under a row parent element, and the column child elements are divided by grid length. The grid is divided into 12 columns in total. As you can see, for small 2 + 10 = 12, for medium 6 + 6 = 12... what you need to do is to write className = 'row' to the row parent element, write [size]-numbers in each sub-element of the column, and set the sum of the numbers to 12, the preceding two columns are used. If there are three columns, they can be small-2, small, small-8, small-2 (and 12), generally 12, the following will also introduce the case where it can be no less than 12, which is very simple! Right! [Note]: You must remember to write columns after the column sub-element className! (This should be a mistake many new users will make) demo: large devices: (single-line full screen 100%) medium-sized devices: (single-line full screen 100%) small devices: (single-line full screen 100%) The class written to className = 'row' occupies the parent element by default, so note that we did not write with: 100%  1.1 although simple, don't be too happy, because the first pitfall is coming... (^ ω ^ ).We changed the above Code and removed the layout of medium and large:

<div className = 'row'>   <div className = 'small-6 columns' style = {{background:'red'}}>column1</div>   <div className = 'small-6 columns' style = {{background:'blue'}}>column2</div></div>

Demo: Small Device: (single-line full screen 100%) medium-sized device: (single-line full screen 100%) Large device: (single-line full screen 100%) what! Didn't I only write about the small layout? How can medium-sized devices and large devices become the same layout as small devices? Look below [Foundation layout "inherit"]: The large size will automatically "inherit" small size, that is, you only write small-6 columns, it will write small-6 medium-6 large-6 columns by default. Similarly, even if you write small-6 medium-10 columns, it also writes the inheritance of small-6 medium-10 large-10 columns by default, which is one-way: from small to large, that is, you only write large-6 columns, small and medium cannot get values.If we write

<div className = 'row'>   <div className = 'large-6 columns' style = {{background:'red'}}>column1</div>   <div className = 'large-6 columns' style = {{background:'blue'}}>column2</div></div>

On small devices and medium-sized devices: (single line occupies 100% of full screen) 1.2 next is the second pitfall we may encounter... (^ ω ^ ).Let's "Take a closer look" at our display on large devices: note that there is a blank space on both sides. (Oh, what's wrong? Didn't I say that it accounts for 100% of the parent element by default) This is because of the internal mechanism of the foundation. The maximum size (max-width) of the grid (. row) is 62.5rem. The size of the wide screen device may be larger than 62.5rem, so that the column cannot fill the page completely!Don't worry. Let's do some compensatory operations. Let's add max-width: 100% to the row parent element ;:

<div className = 'row' >  <div className = 'large-6 columns' style = {{background:'red'}}>column1</div>  <div className = 'large-6 columns' style = {{background:'blue'}}>column2</div></div>

Demo: (maximum screen width for large devices) no blank! The trap is already filled! (. Too many items) Please! 1.3 next is our third pitfall... (^ ω ^). (wait for me to take it and dig it out again)You may ask, buddy, all you have written is a demo where the number in size-number is 12, but I just want to write 12 in total, what will happen? Let's try it! :

<div className = 'row' style = {{maxWidth:'100%'}}>  <div className = 'small-3 columns' style = {{background:'red'}}>column1</div>  <div className = 'small-3 columns' style = {{background:'blue'}}>column2</div>  <div className = 'small-3 columns' style = {{background:'yellow'}}>column2</div></div>

Note: The yellow color block is on the rightmost side, indicating that when your sum cannot be 12, the last child element of the row parent element will automatically float to the right.[Solution] Add the end class name to the last child element.

<div className = 'row' style = {{maxWidth:'100%'}}>  <div className = 'small-3 columns' style = {{background:'red'}}>column1</div>  <div className = 'small-3 columns' style = {{background:'blue'}}>column2</div>  <div className = 'small-3 columns end' style = {{background:'yellow'}}>column3</div></div>

Demo: (a total of 75% in full screen) see no, it comes up! 1.4 next is our fourth pitfall... (^ ω ^ ).[Center a single row of foundation] many times we do not need to put multiple columns in a row grid. In many cases, we only need to put one column in a row, then let it center. We need to add size-centered after the corresponding size-number, for example, small-centered.

<div className = 'row'>   <div className = 'small-6 small-centered columns' style = {{background:'red'}}>column1</div></div>

Demo: (on a small device)

 

  I guess what will happen on medium and large devices? That's right! As before, medium and large "inherit" the center feature of small! Therefore, you are "centered" on medium/large devices. What the hack! But what if I do not want to be centered on medium/large devices? You can only write like this: add size-uncentered 

<div className = 'row'>  <div className = 'small-6 small-centered medium-uncentered large-uncentered columns' style = {{background:'red'}}>
   column1
  </div></div>

Demo :( on medium/large devices) (single row occupies full screen 50%) so that you cancel passive Center 2. block grids)Sometimes our layout objects are not displayed in the form of rows or columns, for example:

<div className = 'row small-up-2 medium-up-3 large-up-4' style = {{maxWidth:'100%'}}>   <div className = 'columns column-block' style ={{minHeight:'20px',background:'grey'}}></div>   <div className = 'columns column-block' style ={{minHeight:'20px',background:'blue'}}></div>   <div className = 'columns column-block' style ={{minHeight:'20px',background:'red'}}></div>   <div className = 'columns column-block' style ={{minHeight:'20px',background:'yellow'}}></div>   <div className = 'columns column-block' style ={{minHeight:'20px',background:'black'}}></div>   <div className = 'columns column-block' style ={{minHeight:'20px',background:'orange'}}></div></div>

  The row and columns Class names are still added to the parent element and child element. At the same time, write size-up-number: number in the parent element to indicate the maximum number of blocks in each row, and write columns column-block in the sub-element.Demo: large devices: (single-line full screen 100%) medium-sized devices: (single-line full screen 100%) small devices: (single-line full screen 100%) 2.1 point 1In this way, the Upper and Lower Block-level raster columns are written by margin-bottom by default. The out-of-the-box experiment shows that margin-bottom: 30px on medium/large devices and margin-bottom on small devices: 20px; of course, most of the time you may not want this margin, the method to remove it is very simple, without adding column-block, we can, for example, write:

<div className = 'row small-up-2 medium-up-3 large-up-4' style = {{maxWidth:'100%'}}>   <div className = 'columns ' style ={{minHeight:'20px',background:'grey'}}></div>   <div className = 'columns ' style ={{minHeight:'20px',background:'blue'}}></div>   <div className = 'columns ' style ={{minHeight:'20px',background:'red'}}></div>   <div className = 'columns ' style ={{minHeight:'20px',background:'yellow'}}></div>   <div className = 'columns ' style ={{minHeight:'20px',background:'black'}}></div>   <div className = 'columns ' style ={{minHeight:'20px',background:'orange'}}></div></div>

On medium-sized devices: (single-line full screen 100%) margin-bottom has been removed. 2.2 pitfall 2: The effect of writing columns or column by subclass name is the same(In fact, it is not a pitfall) I am confused when I read the official documentation, the subclass name used in the elastic raster section of the official document is not columns but column (s is not followed)

 

The experiment proves that, in all the above and below examples, whether the class name you write is column or columns, the effect is the same... _ (: 3 "rows )_  2.3 pitfall 3: In a block-level grid, you cannot define the width of each grid by writing the "small-6 medium-4 large-2" row and column raster.A good thing about block-level raster is that it solves the limitation that row-level raster can only achieve Adaptive Layout in a single row. So we thought, can we combine two things? Unfortunately, no! We combine the two writing methods and write them as follows:

<div className = 'row small-up-2 medium-up-3 large-up-4' style = {{maxWidth:'100%'}}>  <div className = 'small-3 columns' style ={{minHeight:'20px',background:'grey'}}></div>  <div className = 'small-3 columns' style ={{minHeight:'20px',background:'blue'}}></div>  <div className = 'small-3 columns' style ={{minHeight:'20px',background:'red'}}></div>  <div className = 'small-3 columns' style ={{minHeight:'20px',background:'yellow'}}></div>  <div className = 'small-3 columns' style ={{minHeight:'20px',background:'black'}}></div>  <div className = 'small-3 columns' style ={{minHeight:'20px',background:'orange'}}></div></div>

If this method can be used successfully, we imagine that on a small screen, because small-up-2 and two grid blocks are displayed in a single row, each grid occupies 3/12 = 1/4, two grids occupy 1/4 + 1/4 = 1/2 of the screen, which is 50%. Let's see the demo: demo :( small screen) (single row occupies 100% of the screen) The two grids account for 100% of the full screen instead of 50%. This indicates that the size-number adjustment has no effect in the block-level raster:  Although in a block-level grid, you cannot specify the width of a single grid by specifying the Class Name of the row or column grid, you can specify the width by specifying the style.

<div className = 'row small-up-2 medium-up-3 large-up-4' style = {{maxmaxWidth:'100%'}}>  <div className = ' columns ' style ={{width:'25%',minHeight:'20px',background:'grey'}}></div>  <div className = ' columns ' style ={{width:'25%',minHeight:'20px',background:'blue'}}></div>  <div className = ' columns ' style ={{width:'25%',minHeight:'20px',background:'red'}}></div>  <div className = ' columns ' style ={{width:'25%',minHeight:'20px',background:'yellow'}}></div>  <div className = ' columns ' style ={{width:'25%',minHeight:'20px',background:'black'}}></div>  <div className = ' columns ' style ={{width:'25%',minHeight:'20px',background:'orange'}}></div></div>

Demo: Small Screen 3. Responsive raster and VisualizationYou may have encountered such a requirement to make a webpage to adapt to both the mobile phone end and the PC end (or small screen and medium/large screen) at the same time) at this time, you want a page element to be displayed only on a medium or large screen instead of a small screen. How can we control this visual response? The show-for-size class and show-for-size-only class of foundation can help you easilyShow-for-size class

<Div> <p className = 'show-for-small'> display on small/medium/large screens </p> <p className = 'show-for-medium '> display on medium and large screens </p> <p className = 'show-for-large '> display on large screens </p> </div>

Demo: Large Screen: Medium-sized screen: small screen: show-for-size-only class:

<Div> <p className = 'show-for-small-only'> I only display on small screens </p> <p className = 'show-for-medium-only'> I only display on medium-sized screens </p> <p className = 'show-for-large-only'> I only display on large screens </p> </div>

Demo: Large Screen: Medium-sized screen: small screen: [Note] the difference between the show-for-size class and the show-for-size-only class is that the show-for-size class has the "inheritance" feature, that is, if you only write className = 'show-for-small', it is equivalent to writing className = 'show-for-small show-for-medium show-for-large 'on any screen. can be displayed, show-for-small-only can only be displayed on a small screen.  4. Floating GridFoudation also has a class called floating class (in fact, tile thinks this does not seem very useful. After all, you can write css by yourself, but I personally feel that if you write a class name under foudation, the code looks nice (~ Token ~) Sorry, I don't know what you think)

<div className = 'row'>   <p className = 'float-left'>float-left</p>   <p className = 'float-right'>float-right</p></div>

Demo:

 

Last point: Link to the cainiao tutorial and official document: http://www.runoob.com/foundation/foundation-tutorial.html (I am that tutorial) http://foundation.zurb.com/sites/docs/grid.html (I am that document) [Note] I wrote this article based on my reference to the official English document. I would like to make a suggestion here-not just look at the cainiao tutorial (not just ignore it, but not just watch it !), It is recommended that you take a closer look at the official English documents. Otherwise, you will feel the following -- 

 

Last point