iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

1 Like 0 留言 5490 瀏覽

鐵人賽 Modern Web DAY 29

CSS 實戰心法系列第 29 篇

技術 CSS 實戰小技巧 - 不使用 important 的高優先值技巧

在維護舊的專案很多必須放下自尊，用一些手段來維持成果的運作，但有些作法如果過於殘暴可能會影響到未來的維護，CSS !important 就是一個很好用的手段，他...

卡斯伯 ‧ 2016-12-29

1 Like 0 留言 3360 瀏覽

鐵人賽 Modern Web DAY 28

CSS 實戰心法系列第 28 篇

技術實戰小技巧 - iOS 表單的使用者體驗優化

最後幾篇再來額外介紹一些小技巧，這些小技巧都是非常冷門的卻是實用的手法，分享給大家參考看看。先前有一位朋友詢問到 iOS 表單有個小問題讓他困擾，就是用戶在...

卡斯伯 ‧ 2016-12-28

3 Like 0 留言 3597 瀏覽

鐵人賽 Modern Web DAY 27

CSS 實戰心法系列第 27 篇

技術 CSS 框架自幹心得 - 失敗三次的框架建構經驗

先前提到過有自幹過框架，主要的經驗是兩次，第三次就不再完全重新自幹了，每次到了最後都會發現有些概念不夠完美，然後修正前一版的錯誤再出發一次!?後來發現自幹本身就...

卡斯伯 ‧ 2016-12-27

1 Like 0 留言 3465 瀏覽

鐵人賽 Modern Web DAY 26

CSS 實戰心法系列第 26 篇

技術實戰心法 - 應避免的 Sass @extend

Sass 的 @extend 可以將相同的樣式整理再一起，在其他語言來說是非常帥氣的技法，但在 CSS 中請警慎使用。就如同本篇鐵人賽一開始所介紹到的 OOC...

卡斯伯 ‧ 2016-12-26

1 Like 1 留言 2963 瀏覽

鐵人賽 Modern Web DAY 25

CSS 實戰心法系列第 25 篇

技術實戰心法 - Sass Map 快出產出大量樣式

上一篇介紹了很短的程式碼產生一整組 Grid System，然後還提供變數讓 Grid 還有額外的參數可以設定，手寫的 CSS 如果要重新計算 12 組以上的計...

卡斯伯 ‧ 2016-12-25

1 Like 1 留言 3295 瀏覽

鐵人賽 Modern Web DAY 24

CSS 實戰心法系列第 24 篇

技術實戰心法 - 自幹 Grid System

自己本身是不常自幹 Grid，但透過自幹會了解更細的運作原理，grid system 和其他元件不太一樣，他是屬於外容器型的元件，一層包覆著一層變化性相當高，如...

卡斯伯 ‧ 2016-12-24

2 Like 0 留言 3441 瀏覽

鐵人賽 Modern Web DAY 23

CSS 實戰心法系列第 23 篇

技術實戰心法 - 常見的垂直置中手法

上一章節介紹了各種 Utilities ，唯獨垂直置中不介紹，因為在製作、使用垂直置中時要先思考 "支援的瀏覽器"，就算現在全部 IE 的使...

卡斯伯 ‧ 2016-12-23

1 Like 0 留言 2586 瀏覽

鐵人賽 Modern Web DAY 22

CSS 實戰心法系列第 22 篇

技術實戰心法 - 經常使用，但卻容易被忽視的 CSS

Bootstrap 3 載入以後其實就有包含大部分的元件，原本的設計概念上是希望透過一套框架就能滿足大多的需求，但實際在專案運作時有許多客製化需要微調，而很多微...

卡斯伯 ‧ 2016-12-22

1 Like 1 留言 4110 瀏覽

鐵人賽 Modern Web DAY 21

CSS 實戰心法系列第 21 篇

技術 Bootstrap 透過 Sass 新增自定義元件

許多人在使用 Bootstrap 時，如果有需要新增、調整，都是寫在 CSS 的後方或是另開一個新檔透過 "覆蓋" 的特性來新增、調整。先前...

卡斯伯 ‧ 2016-12-21

3 Like 0 留言 5065 瀏覽

鐵人賽 Modern Web DAY 20

CSS 實戰心法系列第 20 篇

技術 Sass 資料夾結構

對於 Bootstrap 有一定了解後，我們即將要開始新增元件，不過在新增前我在分享一下 Sass 開發時的資料結構。 Sass 資料夾結構相信大家也聽說 SM...

卡斯伯 ‧ 2016-12-20

1 Like 0 留言 9154 瀏覽

鐵人賽 Modern Web DAY 19

React - DOM界的彼方系列第 19 篇

技術 Day19: React篇: TodoList程式 + 樣式(Style)

本章的目標是在React元件中的套用樣式(Style)，而且可以因狀態改變的作樣式變化，從上一章的程式碼作這些修改都是很簡單的，在React中使用CSS的樣式...

eyesofkids ‧ 2016-12-19

1 Like 0 留言 3827 瀏覽

鐵人賽 Modern Web DAY 19

CSS 實戰心法系列第 19 篇

技術 Bootstrap 一次看懂元件的使用組合

Bootstrap 的官方文件有完整的說明以及範例，就算是如此，還是會有許多朋友希望有快速入門的介紹，本篇就來介紹絕大部分 Bootstrap 元件的組合手法，...

卡斯伯 ‧ 2016-12-19

2 Like 0 留言 3622 瀏覽

鐵人賽 Modern Web DAY 18

CSS 實戰心法系列第 18 篇

技術 Bootstrap 元件分類概觀 (content, container)

接下來我們依循著 OOCSS 與 Bootstrap 的設計模式繼續擴資、修改元件，不過在繼續下一個階段以前，我們先來了解一下 Bootstrap 的設計模式。...

卡斯伯 ‧ 2016-12-18

2 Like 0 留言 3212 瀏覽

鐵人賽 Modern Web DAY 16

CSS 實戰心法系列第 16 篇

技術將 Bootstrap 導入自動化流程

先前的流程我們將 Gulp 的基礎流程已經建立起來了，現在我們要將 Bootstrap 導入自動化流程，讓接下來的客製化更為容易。 Bower 本範例是使用大...

卡斯伯 ‧ 2016-12-16

1 Like 0 留言 3524 瀏覽

鐵人賽 Modern Web DAY 15

CSS 實戰心法系列第 15 篇

技術為什麼 Boostrap (這篇很短~)

Bootstrap 是目前主流的 CSS 框架，先前也有提到，在起初我是很不喜歡 Bootstrap 的框架，認為他搶走我大部分的工作且缺乏特色，但在研究後會發...

卡斯伯 ‧ 2016-12-15

1 Like 0 留言 2618 瀏覽

鐵人賽 Modern Web DAY 14

CSS 實戰心法系列第 14 篇

技術 Gulp - Webserver

Gulp 很適合搭配任何其他的前後端結構，就先前介紹的幾個章節，只要略為修改輸入及輸出的路徑即可；除了搭配其他後端結構外，Gulp 也有適合直接開發的方法，本章...

卡斯伯 ‧ 2016-12-14

1 Like 0 留言 3878 瀏覽

鐵人賽 Modern Web DAY 13

CSS 實戰心法系列第 13 篇

技術 Gulp - 在本地端製作 Icon Fonts

網頁設計都會需要大量的小 icon，現在的 icon 都傾向使用 web fonts 來處理，因為 web font 所製作的 icon 有以下的好處：載入...

卡斯伯 ‧ 2016-12-13

1 Like 0 留言 2406 瀏覽

鐵人賽 Modern Web DAY 12

CSS 實戰心法系列第 12 篇

技術 Gulp - 定義預設開發環境

今天的進度來做個小調整，讓大家在使用 Gulp 時就能相容於目前的環境，目前使用的主要套件有：gulp-sass、gulp-postcss，這次調整後會有一個主...

卡斯伯 ‧ 2016-12-12

1 Like 0 留言 3423 瀏覽

鐵人賽 Modern Web DAY 11

CSS 實戰心法系列第 11 篇

技術 Gulp - 透過 PostCSS 加入 CSS Prefix

說到 CSS prefix 相信大家都不是很清楚當下主流版本的 prefix 有哪些是必要？又有哪些是不必要的？以往都是使用 Sass 的 Compass 來...

卡斯伯 ‧ 2016-12-11

0 Like 0 留言 2019 瀏覽

技術 JavaScript專案學習筆記 -鍵盤監聽 1/30天

感謝https://javascript30.com/的免費教程 Demo：http://codepen.io/FutureFronterAndy/pen/Vm...

阿盧 ‧ 2016-12-11

8 Like 0 留言 6294 瀏覽

鐵人賽 Modern Web DAY 5

Half-Stack Developer 養成計畫系列第 5 篇

技術為自己的人生鮮艷上色：CSS

為自己的人生鮮艷上色：CSS 在大概熟悉 HTML 以後，你可能會發現一件事：靠腰，我的網頁為什麼長那麼醜？沒錯，慘不忍睹的程度大概就跟你照鏡子差不多吧（開玩笑...

huli ‧ 2016-12-15

1 Like 0 留言 7322 瀏覽

鐵人賽 Modern Web DAY 10

CSS 實戰心法系列第 10 篇

技術 Gulp 與 Sass 開發環境

Gulp 是我目前最使用的自動化工具，在先前一篇也有介紹有哪些自動化工具，這篇開始會介紹 Gulp 自動化工具如何使用、有哪些推薦的工具以及一些經驗上的分享。而...

卡斯伯 ‧ 2016-12-10

2 Like 0 留言 5616 瀏覽

鐵人賽 Modern Web DAY 9

CSS 實戰心法系列第 9 篇

技術 CSS 實戰心法搶到決定權，開發環境自己來

前端工程師一般來說只要搞定 HTML、CSS、Javascript 就可以了，所以後端的環境上不用太在意，但在這幾年的體悟下，這是一個不負責任的想法。我用過的...

卡斯伯 ‧ 2016-12-09

2 Like 0 留言 5634 瀏覽

鐵人賽 Modern Web DAY 8

CSS 實戰心法系列第 8 篇

技術 CSS 框架架構參考 Bootstrap

Bootstrap 是目前我最喜歡的 CSS 框架。雖說如此，我以往可是很討厭 Bootstrap 的，身為一名設計師希望能夠有更多自己發揮的空間，所以早期一...

卡斯伯 ‧ 2016-12-08

0 Like 0 留言 68671 瀏覽

鐵人賽 Modern Web DAY 8

網頁程式設計so easy 系列第 8 篇

技術 Day7 [CSS介紹-2]

表格框線當我們寫一個表格希望它有框線時，我們通常會這樣寫 <table border="1"> <tr>...

smallone1 ‧ 2016-12-08

1 Like 0 留言 6531 瀏覽

鐵人賽 Modern Web DAY 7

CSS 實戰心法系列第 7 篇

技術 CSS 框架架構參考 PURE CSS

在瞭解完 OOCSS 後，可以看看主流框架是不是有帶入其中之概念，接下來會介紹兩篇 PureCSS 與 Bootstrap，這兩者的簡單架構概念讓大家參考參考。...

卡斯伯 ‧ 2016-12-07

0 Like 0 留言 5961 瀏覽

鐵人賽 Modern Web DAY 7

網頁程式設計so easy 系列第 7 篇

技術 Day6 [CSS介紹-1]

在網頁中加入CSS樣式在HTML文件中使用CSS主要有四種方法：用style元素定義內嵌樣式 <head> ... <...

smallone1 ‧ 2016-12-07

1 Like 1 留言 21431 瀏覽

鐵人賽 Modern Web DAY 6

CSS 實戰心法系列第 6 篇

技術 CSS 的元件狀態

CSS 元件狀態重點可以分為兩部分，一個是原生的 CSS 偽類(Pseudo-classes)，另一則是配合 Javascript 所提供的 Class，在這部...

卡斯伯 ‧ 2016-12-06

4 Like 0 留言 4403 瀏覽

鐵人賽 Modern Web DAY 5

CSS 實戰心法系列第 5 篇

技術小故事 + 圖文介紹 CSS 的命名技巧

程式語言的命名一直是個麻煩課題，除了要有良好邏輯外，還必須有大量的英文詞彙能力。CSS 雖然不需要有太深的邏輯，但由於上手容易，團隊合作的命名就容易被其他小夥伴...

卡斯伯 ‧ 2016-12-05

1 Like 0 留言 3947 瀏覽

鐵人賽 Modern Web DAY 4

CSS 實戰心法系列第 4 篇

技術 OOCSS 容器與內容分離 (最佳實踐)

結構與樣式分離，對於網頁的樣式設計是一種解放，所有元件的樣式組合搭配及擴增變得更自由。這篇要介紹的是容器與內容分離，簡單來說我們可以把元件分為兩大類型：容...

卡斯伯 ‧ 2016-12-04