beenull/mini.css
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Minor fixes in grid.html

Browse source
This commit is contained in:
Angelos Chalaris 2017-02-07 17:24:20 +02:00
parent c7d9193309
commit 25b0fd76c0
2 changed files with 37 additions and 38 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

74
docs/grid.html
View file

@ -337,7 +337,6 @@
</div>
</div>
</div>
<div class="row">
<div class="col-sm col-lg-10 col-lg-offset-1">
<div class="card fluid">
@ -369,24 +368,24 @@
<div class="row">
<div class="col-sm-12 col-md-6">
<pre>&lt;div class=&quot;row cols-sm-12 cols-md-6&quot;&gt;
&lt;div&gt;
&lt;p&gt;col-sm-12, col-md-6&lt;/p&gt;
&lt;/div&gt;
&lt;div&gt;
&lt;p&gt;col-sm-12, col-md-6&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;</pre>
&lt;div&gt;
&lt;p&gt;col-sm-12, col-md-6&lt;/p&gt;
&lt;/div&gt;
&lt;div&gt;
&lt;p&gt;col-sm-12, col-md-6&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;</pre>
<p class="do"><mark class="tertiary">Do:</mark>&nbsp;You can add multiple predefined layout classes for different screen sizes, allowing you to build responsive predefined layouts.</p>
</div>
<div class="col-sm-12 col-md-6">
<pre>&lt;div class=&quot;row cols-sm-6&quot;&gt;
&lt;div class=&quot;row cols-sm-7&quot;&gt;
&lt;p&gt;col-sm-6&lt;/p&gt;
&lt;/div&gt;
&lt;div class=&quot;row cols-sm-5&quot;&gt;
&lt;p&gt;col-sm-6&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;</pre>
&lt;div class=&quot;row cols-sm-7&quot;&gt;
&lt;p&gt;col-sm-6&lt;/p&gt;
&lt;/div&gt;
&lt;div class=&quot;row cols-sm-5&quot;&gt;
&lt;p&gt;col-sm-6&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;</pre>
<p class="dont"><mark class="secondary">Don't:</mark>&nbsp;Avoid using the normal column classes in conjunction with predefined layouts, as they will most likely not apply and can sometimes cause unexpected behavior.</p>
</div>
</div>
@ -394,7 +393,6 @@
</div>
</div>
</div>
<div class="row">
<div class="col-sm col-lg-10 col-lg-offset-1">
<div class="card fluid">
@ -584,26 +582,26 @@
<div class="row">
<div class="col-sm-12 col-md-6">
<pre>&lt;div class=&quot;row&quot;&gt;
&lt;div class=&quot;col-sm-1 col-md-2 col-lg-3&quot;&gt;
&lt;img src=&quot;...&quot;&gt;
&lt;/div&gt;
&lt;div class=&quot;col-sm-11 col-md-10 col-lg-9&quot;&gt;
&lt;h2&gt;Media object heading&lt;/h2&gt;
&lt;p&gt;Media object content...&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;</pre>
&lt;div class=&quot;col-sm-1 col-md-2 col-lg-3&quot;&gt;
&lt;img src=&quot;...&quot;&gt;
&lt;/div&gt;
&lt;div class=&quot;col-sm-11 col-md-10 col-lg-9&quot;&gt;
&lt;h2&gt;Media object heading&lt;/h2&gt;
&lt;p&gt;Media object content...&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;</pre>
<p class="do"><mark class="tertiary">Do:</mark>&nbsp;You can make your media object responsive, by adding screen-specific layout classes to its columns.</p>
</div>
<div class="col-sm-12 col-md-6">
<pre>&lt;div class=&quot;row&quot;&gt;
&lt;div class=&quot;col-sm-1 col-sm-last&quot;&gt;
&lt;img src=&quot;...&quot;&gt;
&lt;/div&gt;
&lt;div class=&quot;col-sm&quot;&gt;
&lt;h2&gt;Media object heading&lt;/h2&gt;
&lt;p&gt;Media object content...&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;</pre>
&lt;div class=&quot;col-sm-1 col-sm-last&quot;&gt;
&lt;img src=&quot;...&quot;&gt;
&lt;/div&gt;
&lt;div class=&quot;col-sm&quot;&gt;
&lt;h2&gt;Media object heading&lt;/h2&gt;
&lt;p&gt;Media object content...&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;</pre>
<p class="do"><mark class="tertiary">Do:</mark>&nbsp;You can align the media object's content to the left of the image (instead of the other way round), using the <code>.col-<span class="fore-primary">SCR_SZ</span>-normal</code> class, replacing <code><span class="fore-primary">SCR_SZ</span></code> with the desired screen size.</p>
</div>
<div class="col-sm-12 col-md-6">
@ -634,12 +632,12 @@
</div>
<div class="col-sm-12 col-md-6">
<pre>&lt;div class=&quot;row&quot;&gt;
&lt;img src=&quot;...&quot; class=&quot;col-sm-1&quot;&gt;
&lt;div class=&quot;col-sm&quot;&gt;
&lt;h2&gt;Media object heading&lt;/h2&gt;
&lt;p&gt;Media object content...&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;</pre>
&lt;img src=&quot;...&quot; class=&quot;col-sm-1&quot;&gt;
&lt;div class=&quot;col-sm&quot;&gt;
&lt;h2&gt;Media object heading&lt;/h2&gt;
&lt;p&gt;Media object content...&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;</pre>
<p class="dont"><mark class="secondary">Don't:</mark>&nbsp;Do not apply a column class directly to the media element (e.g.<code>&lt;img&gt;</code>) or the content of the media object, as this can cause problems with certain elements. Wrap your media objects columns in <code>&lt;div&gt;</code> elements and apply the grid classes to them, instead.</p>
</div>
</div>

1
docs/v2/DEVLOG.md
View file

@ -841,3 +841,4 @@
- Updated `#header-logo` styling in order to make the framework's logo display properly in Chrome.
- Updated `header`s `logo` element styling to make sure that it does not *jump* in Chrome.
- Documented predefined layouts in `grid.html`.
- Fixed the `pre` segments in `grid.html`.