Skip to content

Commit

Permalink
Update Responsive Container and docs
Browse files Browse the repository at this point in the history
  • Loading branch information
@picturepan2
picturepan2 committed Aug 15, 2017
1 parent a8ba146 commit d6b5a13
Show file tree
Hide file tree
Showing 6 changed files with 37 additions and 22 deletions.
4 changes: 2 additions & 2 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ Spectre.css is a lightweight, responsive and modern CSS framework for faster and

Spectre is a side project based on years of CSS development work on a large web service project. Spectre only includes modern base styles, responsive layout system, CSS components and utilities, and it can be modified for your project with LESS compiler.

Read [the documentation](https://picturepan2.github.io/spectre/) to learn more.
Read [the documentation](https://picturepan2.github.io/spectre/getting-started.html) to learn more.

### Getting started

Expand Down Expand Up @@ -36,7 +36,7 @@ Alternatively, you can use the [unpkg](https://unpkg.com/) CDN to load compiled

### Compiling custom version

You can compile your custom version of Spectre.css. Read [the documentation](https://picturepan2.github.io/spectre/index.html#compiling).
You can compile your custom version of Spectre.css. Read [the documentation](https://picturepan2.github.io/spectre/getting-started.html#compiling).

### Documentation and examples

Expand Down
18 changes: 12 additions & 6 deletions docs/dist/spectre.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1334,14 +1334,20 @@ code {
padding-right: .4rem;
width: 100%;
}
.container.grid-1280 {
max-width: 1280.8px;
.container.grid-xl {
max-width: 1296px;
}
.container.grid-960 {
max-width: 960.8px;
.container.grid-lg {
max-width: 976px;
}
.container.grid-480 {
max-width: 480.8px;
.container.grid-md {
max-width: 856px;
}
.container.grid-sm {
max-width: 616px;
}
.container.grid-xs {
max-width: 496px;
}
.columns {
display: flex;
Expand Down
2 changes: 1 addition & 1 deletion docs/dist/spectre.min.css
View file

Large diffs are not rendered by default.

10 changes: 5 additions & 5 deletions docs/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
</head>
<body>
<div class="section section-header">
<div class="grid-header container grid-960">
<div class="grid-header container grid-lg">
<div class="s-brand">
<div class="s-logo">
<img src="img/spectre-logo.svg" alt="Spectre.css CSS Framework" />
Expand All @@ -24,7 +24,7 @@ <h2>Spectre.css</h2>
</div>

<div class="section section-hero bg-gray">
<div id="overview" class="grid-hero container grid-960 text-center">
<div id="overview" class="grid-hero container grid-lg text-center">
<h1>Spectre.css</h1>
<h2>A <u>lightweight</u>, <u>responsive</u> and <u>modern</u> CSS framework</h2>
<div class="columns">
Expand Down Expand Up @@ -69,7 +69,7 @@ <h2>A <u>lightweight</u>, <u>responsive</u> and <u>modern</u> CSS framework</h2>
</div>

<div class="section section-features bg-primary text-light text-center">
<div class="container grid-960">
<div class="container grid-lg">
<h2>Installation</h2>
<div class="columns">
<div class="column col-10 col-sm-12 centered">
Expand All @@ -83,7 +83,7 @@ <h2>Installation</h2>
</div>

<div class="section section-updates bg-gray">
<div class="container grid-960">
<div class="container grid-lg">
<div class="columns">
<div class="column col-4 col-xs-12">
<div class="card">
Expand Down Expand Up @@ -129,7 +129,7 @@ <h2>Installation</h2>
</div>

<footer class="section section-footer">
<div id="copyright" class="grid-footer container grid-960">
<div id="copyright" class="grid-footer container grid-lg">
<p><a href="getting-started.html" target="_blank">Documents</a> | <a href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a> | <a href="https://twitter.com/spectrecss" target="_blank">Twitter</a> | <a href="https://www.paypal.me/picturepan2" target="_blank">PayPal Donate</a> | Version <span class="version"></span></p>
<p>Designed and built with ♥ by <a href="https://twitter.com/picturepan2" target="_blank">Yan Zhu</a>. Licensed under the <a href="https://github.com/picturepan2/spectre/blob/master/LICENSE" target="_blank">MIT License</a>.</p>
</div>
Expand Down
5 changes: 3 additions & 2 deletions docs/layout.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -410,11 +410,12 @@ <h3 class="s-title"><a href="#responsive" class="anchor" aria-hidden="true">#</a

<h4 class="s-subtitle">Responsive container</h4>
<div class="docs-note">
<p>The responsive layout also provides fixed-width containers. Use <code>grid-480</code>, <code>grid-960</code> or <code>grid-1280</code> to <code>container</code> for a fixed-width container with the specific max-width.</p>
<p>The responsive layout also provides fixed-width containers. Use <code>grid-xs</code>(480px), <code>grid-sm</code> (600px), <code>grid-md</code> (840px), <code>grid-lg</code> (960px) or <code>grid-xl</code> (1280px) to <code>container</code> for a fixed-width container with the specific max-width.</p>
</div>

<!-- layout example -->
<pre class="code" data-lang="HTML"><code>&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;container grid-960&quot;</span>&gt;
<pre class="code" data-lang="HTML"><code><span class="com">&lt;!-- 100% width container with max-width set to grid-lg (960px) --&gt;</span>
&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;container grid-lg&quot;</span>&gt;
&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;columns&quot;</span>&gt;
...
&lt;<span class="tag">/div</span>&gt;
Expand Down
20 changes: 14 additions & 6 deletions src/layout.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,16 +7,24 @@
width: 100%;
&:extend(.clearfix all);

&.grid-1280 {
max-width: @size-xl + 2 * @layout-spacing;
&.grid-xl {
max-width: @size-xl + 2 * @layout-spacing * @html-font-size;
}

&.grid-960 {
max-width: @size-lg + 2 * @layout-spacing;
&.grid-lg {
max-width: @size-lg + 2 * @layout-spacing * @html-font-size;
}

&.grid-480 {
max-width: @size-xs + 2 * @layout-spacing;
&.grid-md {
max-width: @size-md + 2 * @layout-spacing * @html-font-size;
}

&.grid-sm {
max-width: @size-sm + 2 * @layout-spacing * @html-font-size;
}

&.grid-xs {
max-width: @size-xs + 2 * @layout-spacing * @html-font-size;
}
}

Expand Down

0 comments on commit d6b5a13

Please sign in to comment.