mirror of https://github.com/SnapKit/SnapKit
Updates
This commit is contained in:
Robert Payne
parent
6826d81412
commit
7c7d52b171
|
|
@ -1,8 +1,9 @@
|
|||
title: Snap
|
||||
title: SnapKit
|
||||
email: robertpayne@me.com
|
||||
description: Swift AutoLayout DSL for iOS and OS X
|
||||
url: "http://www.snapkit.io/"
|
||||
twitter_username: robertjpayne
|
||||
github_username: robertjpayne
|
||||
github_username: SnapKit
|
||||
|
||||
markdown: kramdown
|
||||
markdown: redcarpet
|
||||
redcarpet:
|
||||
extensions: ["no_intra_emphasis", "fenced_code_blocks", "autolink", "strikethrough", "tables", "superscript", "with_toc_data"]
|
||||
|
|
|
|||
|
|
@ -1,2 +1 @@
|
|||
<footer id="footer">
|
||||
</footer>
|
||||
<footer id="footer"></footer>
|
||||
|
|
@ -7,7 +7,7 @@
|
|||
<meta name="description" content="{% if page.excerpt %}{{ page.excerpt | strip_html | strip_newlines | truncate: 160 }}{% else %}{{ site.description }}{% endif %}">
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="//cloud.typography.com/797458/727746/css/fonts.css">
|
||||
<link rel="stylesheet" type="text/css" href="/css/main.css">
|
||||
<link rel="stylesheet" type="text/css" href="/stylesheets/main.css">
|
||||
<link rel="canonical" href="{{ page.url | replace:'index.html','' | prepend: site.baseurl | prepend: site.url }}">
|
||||
<link rel="alternate" type="application/rss+xml" title="{{ site.title }}" href="{{ "/feed.xml" | prepend: site.url }}">
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<header id="header">
|
||||
<h1 id="logo">SnapKit</h1>
|
||||
<a id="logo" href="/">SnapKit</a>
|
||||
<nav id="nav">
|
||||
<ul>
|
||||
<li><a href="https://github.com/SnapKit/SnapKit">Github</a></li>
|
||||
|
|
|
|||
|
|
@ -1,14 +0,0 @@
|
|||
---
|
||||
layout: default
|
||||
---
|
||||
<div class="post">
|
||||
|
||||
<header class="post-header">
|
||||
<h1 class="post-title">{{ page.title }}</h1>
|
||||
</header>
|
||||
|
||||
<article class="post-content">
|
||||
{{ content }}
|
||||
</article>
|
||||
|
||||
</div>
|
||||
|
|
@ -1,15 +0,0 @@
|
|||
---
|
||||
layout: default
|
||||
---
|
||||
<div class="post">
|
||||
|
||||
<header class="post-header">
|
||||
<h1 class="post-title">{{ page.title }}</h1>
|
||||
<p class="post-meta">{{ page.date | date: "%b %-d, %Y" }}{% if page.author %} • {{ page.author }}{% endif %}{% if page.meta %} • {{ page.meta }}{% endif %}</p>
|
||||
</header>
|
||||
|
||||
<article class="post-content">
|
||||
{{ content }}
|
||||
</article>
|
||||
|
||||
</div>
|
||||
|
|
@ -1,5 +1,6 @@
|
|||
@import "normalize";
|
||||
@import "bourbon/bourbon";
|
||||
@import "settings";
|
||||
@import "foundation/components/grid";
|
||||
@import "foundation/components/type";
|
||||
@import "syntax-highlighting";
|
||||
|
|
@ -1,3 +1,5 @@
|
|||
@import "foundation/functions";
|
||||
|
||||
$body-bg: #FFF;
|
||||
$body-font-color: #444;
|
||||
$body-font-weight: 400;
|
||||
|
|
@ -5,7 +7,11 @@ $body-font-style: normal;
|
|||
$header-font-color: #444;
|
||||
$header-font-weight: 500;
|
||||
$header-font-style: normal;
|
||||
$header-bottom-margin: 0.75rem;
|
||||
|
||||
$body-font-family: "Gotham Rounded A", "Gotham Rounded B", "Helvetica Neue", "Helvetica", sans-serif;
|
||||
$header-font-family: $body-font-family;
|
||||
$header-line-height: 1;
|
||||
|
||||
// $small-range: (0em, em-calc(767));
|
||||
// $medium-range: (em-calc(768), em-calc(1023));
|
||||
// $large-range: (em-calc(1024), 0em);
|
||||
|
|
@ -3,7 +3,6 @@
|
|||
*/
|
||||
.highlight {
|
||||
background: #fff;
|
||||
// @extend %vertical-rhythm;
|
||||
|
||||
.c { color: #998; font-style: italic } // Comment
|
||||
.err { color: #a61717; background-color: #e3d2d2 } // Error
|
||||
|
|
|
|||
11
about.md
11
about.md
|
|
@ -1,11 +0,0 @@
|
|||
---
|
||||
layout: page
|
||||
title: About
|
||||
permalink: /about/
|
||||
---
|
||||
|
||||
This is the base Jekyll theme. You can find out more info about customizing your Jekyll theme, as well as basic Jekyll usage documentation at [jekyllrb.com](http://jekyllrb.com/)
|
||||
|
||||
You can find the source code for the Jekyll new theme at: [github.com/jglovier/jekyll-new](https://github.com/jglovier/jekyll-new)
|
||||
|
||||
You can find the source code for Jekyll at [github.com/jekyll/jekyll](https://github.com/jekyll/jekyll)
|
||||
162
css/main.scss
162
css/main.scss
|
|
@ -1,162 +0,0 @@
|
|||
---
|
||||
---
|
||||
@charset "utf-8";
|
||||
@import "base";
|
||||
|
||||
body, html {
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
strong {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
pre {
|
||||
border: rem-calc(1) solid #CCC;
|
||||
border-radius: rem-calc(5);
|
||||
background-color: #F7F7F7;
|
||||
padding: rem-calc(8) rem-calc(12);
|
||||
|
||||
code {
|
||||
color: #222;
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
#header {
|
||||
width: 100%;
|
||||
height: rem-calc(340);
|
||||
text-align: center;
|
||||
background-color: #444444;
|
||||
@include background-image(linear-gradient(90deg, #00C7B5 0, #0056C7 100%));
|
||||
#logo {
|
||||
color: transparent;
|
||||
text-indent: -99999px;
|
||||
width: rem-calc(534);
|
||||
height: rem-calc(128);
|
||||
margin-top: rem-calc(90);
|
||||
@include retina-image(/img/logo, rem-calc(534) rem-calc(128));
|
||||
background-size: 100% 100%;
|
||||
display: inline-block;
|
||||
}
|
||||
#nav {
|
||||
margin-top: rem-calc(10);
|
||||
ul {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
li {
|
||||
display: inline-block;
|
||||
margin: 0 rem-calc(5);
|
||||
padding: rem-calc(6) rem-calc(24);
|
||||
border: rem-calc(1) solid white;
|
||||
border-radius: rem-calc(5);
|
||||
min-width: rem-calc(80);
|
||||
|
||||
a {
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
text-transform: uppercase;
|
||||
|
||||
&:hover {
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#content-wrapper {
|
||||
margin: rem-calc(40);
|
||||
#content {
|
||||
width: 100%;
|
||||
max-width: rem-calc(960);
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
#page-home {
|
||||
|
||||
#top {
|
||||
@include clearfix;
|
||||
#info {
|
||||
width: rem-calc(460);
|
||||
margin-right: rem-calc(40);
|
||||
float: left;
|
||||
|
||||
h2 {
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
ul {
|
||||
margin: rem-calc(20) 0;
|
||||
li {
|
||||
margin-bottom: rem-calc(20);
|
||||
}
|
||||
}
|
||||
}
|
||||
#example {
|
||||
width: rem-calc(460);
|
||||
float: left;
|
||||
|
||||
h6 {
|
||||
margin: rem-calc(10) 0;
|
||||
text-align: center;
|
||||
font-size: rem-calc(11);
|
||||
text-transform: uppercase;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
.box {
|
||||
border: rem-calc(1) dashed black;
|
||||
border-radius: rem-calc(5);
|
||||
position: relative;
|
||||
height: rem-calc(200);
|
||||
span {
|
||||
position: absolute;
|
||||
display: block;
|
||||
top: 1px;
|
||||
left: 1px;
|
||||
border-radius: rem-calc(5);
|
||||
padding: rem-calc(3) rem-calc(7);
|
||||
background-color: #EEE;
|
||||
font-size: rem-calc(11);
|
||||
line-height: rem-calc(11);
|
||||
}
|
||||
|
||||
.box {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border-color: red;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
margin-left: -25px;
|
||||
margin-top: -25px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
#get-started-btn {
|
||||
margin: 0 auto;
|
||||
margin-top: rem-calc(80);
|
||||
padding: rem-calc(12) rem-calc(24);
|
||||
display: block;
|
||||
font-size: rem-calc(20);
|
||||
font-weight: 300;
|
||||
background: none;
|
||||
border: 1px solid #444;
|
||||
border-radius: rem-calc(5);
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: #444;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,283 @@
|
|||
---
|
||||
layout: default
|
||||
permalink: /docs/
|
||||
id: docs
|
||||
---
|
||||
## Requirements
|
||||
|
||||
* iOS 7.0+ / OS X 10.9+
|
||||
* Xcode 6.3+
|
||||
|
||||
> While SnapKit supports iOS 7.0, frameworks are not supported for iOS 7.0 so you must use manually embed the framework for non app store apps or integrate the source files directly.
|
||||
|
||||
## Installing
|
||||
|
||||
The first thing you’ll need to do with SnapKit is get it installed into your project. We support three different integrations:
|
||||
|
||||
### Cocoapods
|
||||
|
||||
[CocoaPods](http://cocoapods.org) is a dependency manager for Cocoa projects.
|
||||
|
||||
CocoaPods 0.36 adds supports for Swift and embedded frameworks. You can install it with the following command:
|
||||
|
||||
```bash
|
||||
$ gem install cocoapods
|
||||
```
|
||||
|
||||
To integrate SnapKit into your Xcode project using CocoaPods, specify it in your `Podfile`:
|
||||
|
||||
```ruby
|
||||
source 'https://github.com/CocoaPods/Specs.git'
|
||||
platform :ios, '8.0'
|
||||
use_frameworks!
|
||||
|
||||
pod 'SnapKit', '~> 0.10.0'
|
||||
```
|
||||
|
||||
Then, run the following command:
|
||||
|
||||
```bash
|
||||
$ pod install
|
||||
```
|
||||
|
||||
### Carthage
|
||||
|
||||
Carthage is a decentralized dependency manager that automates the process of adding frameworks to your Cocoa application.
|
||||
|
||||
You can install Carthage with [Homebrew](http://brew.sh/) using the following command:
|
||||
|
||||
```bash
|
||||
$ brew update
|
||||
$ brew install carthage
|
||||
```
|
||||
|
||||
To integrate SnapKit into your Xcode project using Carthage, specify it in your `Cartfile`:
|
||||
|
||||
```
|
||||
github "SnapKit/SnapKit" >= 0.10.0
|
||||
```
|
||||
|
||||
### Embedded Framework
|
||||
|
||||
- Add SnapKit as a [submodule](http://git-scm.com/docs/git-submodule) by opening the Terminal, `cd`-ing into your top-level project directory, and entering the following command:
|
||||
|
||||
```bash
|
||||
$ git submodule add https://github.com/SnapKit/SnapKit.git
|
||||
```
|
||||
|
||||
- Open the `SnapKit` folder, and drag `SnapKit.xcodeproj` into the file navigator of your app project.
|
||||
- In Xcode, navigate to the target configuration window by clicking on the blue project icon, and selecting the application target under the "Targets" heading in the sidebar.
|
||||
- Ensure that the deployment target of `SnapKit.framework` matches that of the application target.
|
||||
- In the tab bar at the top of that window, open the "Build Phases" panel.
|
||||
- Expand the "Target Dependencies" group, and add `SnapKit.framework`.
|
||||
- Click on the `+` button at the top left of the panel and select "New Copy Files Phase". Rename this new phase to "Copy Frameworks", set the "Destination" to "Frameworks", and add `SnapKit.framework`.
|
||||
|
||||
## Usage
|
||||
|
||||
SnapKit is designed to be extremely easy to use. Let's say we want to layout a box that is constrained to it's superview's edges with 20pts of padding.
|
||||
|
||||
```swift
|
||||
let box = UIView()
|
||||
superview.addSubview(box)
|
||||
|
||||
box.snp_makeConstraints { (make) -> Void in
|
||||
make.top.equalTo(superview).offset(20)
|
||||
make.left.equalTo(superview).offset(20)
|
||||
make.bottom.equalTo(superview).offset(20)
|
||||
make.right.equalTo(superview).offset(20)
|
||||
}
|
||||
```
|
||||
|
||||
Or even shorter:
|
||||
|
||||
```swift
|
||||
let box = UIView()
|
||||
superview.addSubview(box)
|
||||
|
||||
box.snp_makeConstraints { (make) -> Void in
|
||||
make.edges.equalTo(superview).inset(UIEdgeInsetsMake(20, 20, 20, 20))
|
||||
}
|
||||
```
|
||||
|
||||
Not only does this greatly shorten and increase the readability of constraints SnapKit is also taking care of a few crucial steps in the process:
|
||||
|
||||
- Determining the best common superview to install the constraints on.
|
||||
- Keeping track of the constrainted installed so they can easily be removed later.
|
||||
- Ensuring `setTranslatesAutoresizingMaskIntoConstraints(false)` is called on all appropriate views.
|
||||
|
||||
### Not all things are created equal
|
||||
|
||||
> `.equalTo` equivalent to **NSLayoutRelation.Equal**
|
||||
|
||||
> `.lessThanOrEqualTo` equivalent to **NSLayoutRelation.LessThanOrEqual**
|
||||
|
||||
> `.greaterThanOrEqualTo` equivalent to **NSLayoutRelation.GreaterThanOrEqual**
|
||||
|
||||
These three equality constraints accept one argument which can be any of the following:
|
||||
|
||||
#### 1. ViewAttribute
|
||||
|
||||
```swift
|
||||
make.centerX.lessThanOrEqualTo(view2.snp_left)
|
||||
```
|
||||
|
||||
ViewAttribute | NSLayoutAttribute
|
||||
------------------------- | --------------------------
|
||||
view.snp_left | NSLayoutAttribute.Left
|
||||
view.snp_right | NSLayoutAttribute.Right
|
||||
view.snp_top | NSLayoutAttribute.Top
|
||||
view.snp_bottom | NSLayoutAttribute.Bottom
|
||||
view.snp_leading | NSLayoutAttribute.Leading
|
||||
view.snp_trailing | NSLayoutAttribute.Trailing
|
||||
view.snp_width | NSLayoutAttribute.Width
|
||||
view.snp_height | NSLayoutAttribute.Height
|
||||
view.snp_centerX | NSLayoutAttribute.CenterX
|
||||
view.snp_centerY | NSLayoutAttribute.CenterY
|
||||
view.snp_baseline | NSLayoutAttribute.Baseline
|
||||
|
||||
|
||||
#### 2. UIView/NSView
|
||||
|
||||
if you want view.left to be greater than or equal to label.left:
|
||||
|
||||
```swift
|
||||
// these two constraints are exactly the same
|
||||
make.left.greaterThanOrEqualTo(label)
|
||||
make.left.greaterThanOrEqualTo(label.snp_left)
|
||||
```
|
||||
|
||||
#### 3. Strict Checks
|
||||
|
||||
Auto Layout allows width and height to be set to constant values.
|
||||
if you want to set view to have a minimum and maximum width you could pass a primitive to the equality blocks:
|
||||
|
||||
```swift
|
||||
// width >= 200 && width <= 400
|
||||
make.width.greaterThanOrEqualTo(200)
|
||||
make.width.lessThanOrEqualTo(400)
|
||||
```
|
||||
|
||||
However Auto Layout does not allow alignment attributes such as left, right, centerY etc to be set to constant values.
|
||||
So if you pass a primitive for these attributes SnapKit will turn these into constraints relative to the view's superview ie:
|
||||
|
||||
```swift
|
||||
// creates view.left <= view.superview.left + 10
|
||||
make.left.lessThanOrEqualTo(10)
|
||||
```
|
||||
|
||||
You can also use other primitives and structs to build your constraints, like so:
|
||||
|
||||
```swift
|
||||
make.top.equalTo(42)
|
||||
make.height.equalTo(20)
|
||||
make.size.equalTo(CGSizeMake(50, 100))
|
||||
make.edges.equalTo(UIEdgeInsetsMake(10, 0, 10, 0))
|
||||
make.left.equalTo(view).offset(UIEdgeInsetsMake(10, 0, 10, 0))
|
||||
```
|
||||
|
||||
### Learn to prioritize
|
||||
|
||||
> `.prority` allows you to specify an exact priority
|
||||
|
||||
> `.priorityHigh` equivalent to **UILayoutPriority.DefaultHigh**
|
||||
|
||||
> `.priorityMedium` is half way between high and low
|
||||
|
||||
> `.priorityLow` equivalent to **UILayoutPriority.DefaultLow**
|
||||
|
||||
Priorities are can be tacked on to the end of a constraint chain like so:
|
||||
|
||||
```swift
|
||||
make.left.greaterThanOrEqualTo(label.snp_left).priorityLow()
|
||||
make.top.equalTo(label.snp_top).priority(600)
|
||||
```
|
||||
|
||||
### Composition, composition, composition
|
||||
|
||||
SnapKit also gives you a few convenience methods to create multiple constraints at the same time.
|
||||
|
||||
#### edges
|
||||
|
||||
```swift
|
||||
// make top, left, bottom, right equal view2
|
||||
make.edges.equalTo(view2);
|
||||
|
||||
// make top = superview.top + 5, left = superview.left + 10,
|
||||
// bottom = superview.bottom - 15, right = superview.right - 20
|
||||
make.edges.equalTo(superview).insets(UIEdgeInsetsMake(5, 10, 15, 20))
|
||||
```
|
||||
|
||||
#### size
|
||||
|
||||
```swift
|
||||
// make width and height greater than or equal to titleLabel
|
||||
make.size.greaterThanOrEqualTo(titleLabel)
|
||||
|
||||
// make width = superview.width + 100, height = superview.height - 50
|
||||
make.size.equalTo(superview).offset(CGSizeMake(100, -50))
|
||||
```
|
||||
|
||||
#### center
|
||||
|
||||
```swift
|
||||
// make centerX and centerY = button1
|
||||
make.center.equalTo(button1)
|
||||
|
||||
// make centerX = superview.centerX - 5, centerY = superview.centerY + 10
|
||||
make.center.equalTo(superview).offset(CGPointMake(-5, 10))
|
||||
```
|
||||
|
||||
You can chain view attributes for increased readability:
|
||||
|
||||
```swift
|
||||
// All edges but the top should equal those of the superview
|
||||
make.left.right.bottom.equalTo(superview)
|
||||
make.top.equalTo(otherView)
|
||||
```
|
||||
|
||||
### Hold on for dear life
|
||||
|
||||
Sometimes you need modify existing constraints in order to animate or remove/replace constraints.
|
||||
In SnapKit there are a few different approaches to updating constraints.
|
||||
|
||||
#### 1. References
|
||||
You can hold on to a reference of a particular constraint by assigning the result of a constraint make expression to a local variable or a class property.
|
||||
You could also reference multiple constraints by storing them away in an array.
|
||||
|
||||
```swift
|
||||
var topConstraint: Constraint? = nil
|
||||
|
||||
...
|
||||
|
||||
// when making constraints
|
||||
view1.snp_makeConstraints { (make) -> Void in
|
||||
self.topConstraint = make.top.equalTo(superview).offset(padding.top).constraint
|
||||
make.left.equalTo(superview).offset(padding.left)
|
||||
}
|
||||
|
||||
...
|
||||
// then later you can call
|
||||
self.topConstraint.uninstall()
|
||||
|
||||
// or if you want to update the constraint
|
||||
self.topConstraint.updateOffset(5)
|
||||
```
|
||||
|
||||
### 2. snp_remakeConstraints
|
||||
|
||||
`snp_remakeConstraints` is similar to `snp_makeConstraints`, but will first remove all existing constraints installed by SnapKit.
|
||||
|
||||
```swift
|
||||
func changeButtonPosition() {
|
||||
self.button.snp_remakeConstraints { (make) -> Void in
|
||||
make.size.equalTo(self.buttonSize)
|
||||
|
||||
if topLeft {
|
||||
make.top.left.equalTo(10)
|
||||
} else {
|
||||
make.bottom.equalTo(self.view).offset(-10)
|
||||
make.right.equalTo(self.view).offset(-10)
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
---
|
||||
layout: default
|
||||
id: faq
|
||||
permalink: /faq/
|
||||
---
|
||||
## FAQ
|
||||
|
||||
### Cocoapods won't let me install SnapKit into my iOS 7.0 project?
|
||||
|
||||
SnapKit doesn't use any iOS 8.0 specific APIs but because Cocoapods does not support integrating Swift code without dynamic frameworks it cannot be integrated via Cocoapods for iOS 7.0 deployments. You should instead embed the source code directly into your application.
|
||||
|
||||
### Do you have any examples?
|
||||
|
||||
We're working on getting some great examples! Stay tuned.
|
||||
|
||||
### What about Swift's operator overloading?
|
||||
|
||||
SnapKit's intention is to be simple and understandable to ensure new users and old alike can easily dive in and get going. While operator overloading may make the code a bit more concise it greatly reduces the readability.
|
||||
|
||||
### Why not just use Interface Builder?
|
||||
|
||||
SnapKit is about building code based views and layouts. Interface Builder is fiddly and limiting when it comes to building constraints and is a nightmare for your source control change logs.
|
||||
|
||||
### Who's behind all this?
|
||||
|
||||
* [Robert Payne](https://github.com/robertjpayne)
|
||||
* [Jonas Buddleman](https://github.com/cloudkite)
|
||||
* [Countless others](https://github.com/SnapKit/SnapKit/graphs/contributors)
|
||||
|
Before Width: | Height: | Size: 20 KiB After Width: | Height: | Size: 20 KiB |
|
Before Width: | Height: | Size: 48 KiB After Width: | Height: | Size: 48 KiB |
12
index.html
12
index.html
|
|
@ -2,18 +2,18 @@
|
|||
layout: default
|
||||
id: home
|
||||
---
|
||||
<div id="top">
|
||||
<div id="info">
|
||||
<h2>SnapKit is a DSL to make autolayout easy on both iOS and OS X.</h2>
|
||||
<div class="row">
|
||||
<div id="info" class="small-12 large-6 columns">
|
||||
<h4>SnapKit is a DSL to make autolayout easy on both iOS and OS X.</h4>
|
||||
<ul>
|
||||
<li><strong>Simple & Expressive</strong> chaining DSL allows building constraints with minimal amounts of code while ensuring they are easy to read and understand.</li>
|
||||
<li><strong>Type Safe</strong> by design to reduce programmer error and keep invalid constraints from being created in the first place increases productivity.</li>
|
||||
<li><strong>Type Safe</strong> by design to reduce programmer error and keep invalid constraints from being created in the first place for maximized productivity.</li>
|
||||
<li><strong>Compatible</strong> for both iOS and OS X apps installable through Cocoapods or Carthage.</li>
|
||||
<li><strong>Free</strong> to use in all projects and licensed under the flexible MIT license.</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div id="example">
|
||||
<div id="example" class="small-12 large-6 columns">
|
||||
{% highlight swift %}
|
||||
let box = UIView()
|
||||
let container = UIView()
|
||||
|
|
@ -35,4 +35,4 @@ box.snp_makeConstraints { (make) -> Void in
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<button id="get-started-btn"><a href="/docs">Get Started →</a></button>
|
||||
<button id="get-started-btn"><a href="/docs">Getting Started & Docs →</a></button>
|
||||
|
|
@ -0,0 +1,212 @@
|
|||
---
|
||||
---
|
||||
@charset "utf-8";
|
||||
@import "base";
|
||||
|
||||
body, html {
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-font-smoothing: antialiased;
|
||||
font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
strong {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
pre {
|
||||
border: rem-calc(1) solid #CCC;
|
||||
border-radius: rem-calc(5);
|
||||
background-color: #F7F7F7;
|
||||
padding: rem-calc(8) rem-calc(12);
|
||||
|
||||
code {
|
||||
display: block;
|
||||
color: #222;
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
code {
|
||||
border: none;
|
||||
border: rem-calc(1) solid #CCC;
|
||||
border-radius: rem-calc(3);
|
||||
background-color: #F7F7F7;
|
||||
padding: rem-calc(3) rem-calc(6);
|
||||
}
|
||||
|
||||
table {
|
||||
overflow: auto;
|
||||
th {
|
||||
padding: rem-calc(8) rem-calc(16);
|
||||
font-weight: 500;
|
||||
border: rem-calc(1) solid #ccc;
|
||||
}
|
||||
tr {
|
||||
border: rem-calc(1) solid #ccc;
|
||||
}
|
||||
td {
|
||||
padding: rem-calc(5) rem-calc(16);
|
||||
border: rem-calc(1) solid #ccc;
|
||||
}
|
||||
margin-bottom: $paragraph-margin-bottom;
|
||||
}
|
||||
|
||||
.highlight {
|
||||
margin-bottom: $paragraph-margin-bottom;
|
||||
}
|
||||
|
||||
#header {
|
||||
width: 100%;
|
||||
height: rem-calc(340);
|
||||
text-align: center;
|
||||
background-color: #444444;
|
||||
@include background-image(linear-gradient(90deg, #00C7B5 0, #0056C7 100%));
|
||||
#logo {
|
||||
color: transparent;
|
||||
text-indent: -99999px;
|
||||
width: rem-calc(534);
|
||||
height: rem-calc(128);
|
||||
margin-top: rem-calc(90);
|
||||
@include retina-image(/images/logo, rem-calc(534) rem-calc(128));
|
||||
background-size: 100% 100%;
|
||||
display: inline-block;
|
||||
}
|
||||
#nav {
|
||||
margin-top: rem-calc(40);
|
||||
ul {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
li {
|
||||
display: inline-block;
|
||||
margin: 0 rem-calc(5);
|
||||
padding: rem-calc(6) rem-calc(24);
|
||||
border: rem-calc(1) solid white;
|
||||
border-radius: rem-calc(5);
|
||||
min-width: rem-calc(80);
|
||||
|
||||
a {
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
text-transform: uppercase;
|
||||
|
||||
&:hover {
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: rem-calc(534)) {
|
||||
height: rem-calc(200);
|
||||
#logo {
|
||||
margin-top: rem-calc(40);
|
||||
width: rem-calc(280.0);
|
||||
height: rem-calc(67);
|
||||
background-size: rem-calc(280) rem-calc(67);
|
||||
}
|
||||
#nav {
|
||||
margin-top: rem-calc(20);
|
||||
ul {
|
||||
li {
|
||||
margin: 0 rem-calc(4);
|
||||
padding: rem-calc(3) rem-calc(12);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#content-wrapper {
|
||||
margin: rem-calc(30) rem-calc(20);
|
||||
#content {
|
||||
width: 100%;
|
||||
max-width: rem-calc(960);
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
#page-docs {
|
||||
#content-wrapper {
|
||||
#content {
|
||||
max-width: rem-calc(800);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#page-home {
|
||||
|
||||
#info {
|
||||
h2 {
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
ul {
|
||||
margin: rem-calc(20) 0;
|
||||
padding-left: rem-calc(20);
|
||||
padding-right: rem-calc(20);
|
||||
li {
|
||||
margin-bottom: rem-calc(20);
|
||||
}
|
||||
}
|
||||
}
|
||||
#example {
|
||||
h6 {
|
||||
margin: rem-calc(10) 0;
|
||||
text-align: center;
|
||||
font-size: rem-calc(11);
|
||||
text-transform: uppercase;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
.box {
|
||||
border: rem-calc(1) dashed black;
|
||||
border-radius: rem-calc(5);
|
||||
position: relative;
|
||||
height: rem-calc(200);
|
||||
span {
|
||||
position: absolute;
|
||||
display: block;
|
||||
top: 1px;
|
||||
left: 1px;
|
||||
border-radius: rem-calc(5);
|
||||
padding: rem-calc(3) rem-calc(7);
|
||||
background-color: #EEE;
|
||||
font-size: rem-calc(11);
|
||||
line-height: rem-calc(11);
|
||||
}
|
||||
|
||||
.box {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border-color: red;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
margin-left: -25px;
|
||||
margin-top: -25px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#get-started-btn {
|
||||
margin: 0 auto;
|
||||
margin-top: rem-calc(80);
|
||||
padding: rem-calc(12) rem-calc(24);
|
||||
display: block;
|
||||
font-size: rem-calc(20);
|
||||
font-weight: 300;
|
||||
background: none;
|
||||
border: 1px solid #444;
|
||||
border-radius: rem-calc(5);
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: #444;
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue