Jump to content

Sky Slate Blueberry Blackcurrant Watermelon Strawberry Orange Banana Apple Emerald Chocolate
Photo

Intuitive CSS shortcuts


  • Please log in to reply
6 replies to this topic
k6
  • Members
  • 6 posts
  • Last active: Sep 04 2011 09:20 AM
  • Joined: 09 Mar 2011
I'm a professional CSS/HTML expert who wanted write css faster cross-editor. So I made shortcuts of all the css properties in a intuitive way. It has saved me lot of time. Hope if saves yours too.

The idea is that I write dot, then 3 first letters of the property, then enter. If it has dash in it, I include first letter that is after the dash ( same for 2 dashes etc ).

Here's an simple example:
.mar equals margin:px

I added the px too because I usually use pixels in my css.

Here's more 'complicated' version:
.borlc

If you figured it out, you must know css quite well. :) Anyways it equals
border-left-color


But why stop with property name. I have included for some properties the value too. For example
.bacrnr equals background-repeat:no-repeat


These give me 99% unique strings though. There are some conflicts like
border-radius and border-right.

For now I've added 2 characters after dash for border-radius like so .borra


Btw, it outputs
-webkit-border-radius:px;
-moz-border-radius:px;
border-radius:px;

One could do some extra shortcuts like .borra5, .borra10. I think these are quite popular radiuses for corners.

Here's the code:
;
;    INTuitive Css Shortcuts ( .intcs )
;    By Hannes Kirsman ( [email protected] )
;    https://github.com/hkirsman/.intcs
;
:oc:.bac::background:url(../images/){Left}
:oc:.baca::background-attachment:url(../images/){Left}
:oc:.bacc::background-color:{#}
:oc:.baci::background-image:url(../images/){Left}
:oc:.bacp::background-position:
:oc:.bacr::background-repeat:
:oc:.bacrnr::background-repeat:no-repeat
:oc:.bor::border:1px solid {#}
:oc:.borb::border-bottom:1px solid {#}
:oc:.borbc::border-bottom-color:{#}
:oc:.borbs::border-bottom-style:solid
:oc:.borbw::border-bottom-width:1px
:oc:.borc::border-color:
:oc:.borco::border-collapse:
:oc:.borl::border-left:1px solid {#}
:oc:.borlc::border-left-color:{#}
:oc:.borls::border-left-style:solid
:oc:.borlw::border-left-width:1px
:oc:.borr::border-right:1px solid {#}
;Conflicts with border-right so .borra shortcut is used
:oc:.borra::-webkit-border-radius:px;{Enter}-moz-border-radius:px;{Enter}border-radius:px;{Left}{Left}{Left}
:oc:.borrc::border-right-color:{#}
:oc:.borrs::border-right-style:solid
:oc:.borrw::border-right-width:1px
:oc:.bors::border-style:solid
;Conflicts with border-style so .borsp is used
:oc:.borsp::border-spacing:
:oc:.bort::border-top:1px solid {#}
:oc:.bortc::border-top-color:{#}
:oc:.borts::border-top-style:solid
:oc:.bortw::border-top-width:1px
:oc:.borw::border-width:1px
:oc:.bot::bottom:px{Left}{Left}
:oc:.caps::caption-side:
:oc:.cle::clear:
:oc:.cli::clip:
:oc:.col::color:#
:oc:.con::content:
:oc:.coui::counter-increment:
:oc:.cour::counter-reset:
:oc:.cur::cursor:
:oc:.dir::direction:
:oc:.dis::display:
:oc:.disb::display:block
:oc:.disib::display:inline-block
:oc:.disn::display:none
:oc:.empc::empty-cells:
:oc:.flo::float:
:oc:.fon::font:
:oc:.fonf::font-family:
:oc:.fons::font-size:px{Left}{Left}
:oc:.fonst::font-style:
:oc:.fonv::font-variant:
:oc:.fonw::font-weight:
:oc:.fonwb::font-weight:bold
:oc:.fonwn::font-weight:normal
:oc:.hei::height:px{Left}{Left}
:oc:.lef::left:
:oc:.lets::letter-spacing:px{Left}{Left}
:oc:.linh::line-height:px{Left}{Left}
:oc:.liss::list-style:
:oc:.lissi::list-style-image:url(../images/){Left}
:oc:.lissp::list-style-position:
:oc:.lisst::list-style-type:
:oc:.mar::margin:px{Left}{Left}
:oc:.marb::margin-bottom:px{Left}{Left}
:oc:.marl::margin-left:px{Left}{Left}
:oc:.marr::margin-right:px{Left}{Left}
:oc:.mart::margin-top:px{Left}{Left}
:oc:.maxh::max-height:px{Left}{Left}
:oc:.maxw::max-width:px{Left}{Left}
:oc:.minh::min-height:px{Left}{Left}
:oc:.minw::min-width:px{Left}{Left}
:oc:.orp::orphans:
:oc:.out::outline:
:oc:.outc::outline-color:
:oc:.outs::outline-style:
:oc:.outw::outline-width:px{Left}{Left}
:oc:.ove::overflow:
:oc:.oveh::overflow:hidden
:oc:.ovev::overflow:visible
:oc:.pad::padding:px{Left}{Left}
:oc:.padb::padding-bottom:px{Left}{Left}
:oc:.padl::padding-left:px{Left}{Left}
:oc:.padr::padding-right:px{Left}{Left}
:oc:.padt::padding-top:px{Left}{Left}
:oc:.pagba::page-break-after:
:oc:.pagbb::page-break-before:
:oc:.pagbi::page-break-inside:
:oc:.pos::position:
:oc:.posa::position:absolute
:oc:.posr::position:relative
:oc:.quo::quotes:
:oc:.rig::right:px{Left}{Left}
:oc:.tabl::table-layout:
:oc:.texa::text-align:
:oc:.texac::text-align:center
:oc:.texaj::text-align:justify
:oc:.texal::text-align:left
:oc:.texar::text-align:right
:oc:.texd::text-decoration:
:oc:.texdn::text-decoration:none
:oc:.texdu::text-decoration:underline
:oc:.texi::text-indent:
:oc:.texs::text-shadow:
:oc:.text::text-transform:
:oc:.textu::text-transform:uppercase
:oc:.top::top:px{Left}{Left}
:oc:.unib::unicode-bidi:
:oc:.vera::vertical-align:
:oc:.vis::visibility:
:oc:.whis::white-space:
:oc:.wid::width:px{Left}{Left}
:oc:.wido::widows:
:oc:.wors::word-spacing:
:oc:.z::z-index:

The latest version is also up on GitHub:
<!-- m -->https://github.com/hkirsman/.intcs<!-- m -->

Click on the big button 'Downloads'


If you have suggestions ( maby you know better way doing it in AutoHotkey ), or just want to rant or praise, please do so! :)

Thanks![/code]

TLM
  • Administrators
  • 3864 posts
  • Last active:
  • Joined: 21 Aug 2006
Funny I'm working on a css/html converter that works with photoshop slices.
Based on the naming scheme in PS it will be either a parent div plus corresponding css element.
I took the lazy route and just added each phrase to the condition to separate each element and place them in their appropriate hierarchy.
Heres one for the html portion
cnt:=!!cnt
loop % docLine0
  newdocEnd .=	( inStr( docLine%a_index%, "<body" ) ? "<body>`r`n"
		: inStr( docLine%a_index%, "ImageReady Slices" ) ? ""
		: inStr( docLine%a_index%, "Table_01" ) ? a_tab "<div id=`""" fileNameNoExt `""">`r`n"
		: inStr( docLine%a_index%, "-" ) ? a_tab . a_tab . docLine%a_index% "></div>`r`n"
		: inStr( docLine%a_index%, "</body" ) ? a_tab "</div>`r`n" "</body>`r`n</html>"
		: inStr( docLine%a_index%, "</html" ) ? ""
		: inStr( docLine%a_index%, "<img" ) ? ( "",  cnt++, imgHTMArr0:=cnt, imgHTMArr%cnt%:=docLine%a_index% "`n`r" )
		: inStr( docLine%a_index%, "</div" ) ? ""
		: docLine%a_index% )
msgbox % newdocEnd
It makes adding new conditions a breeze :D!

Posted Image

don't duplicate, iterate!


k6
  • Members
  • 6 posts
  • Last active: Sep 04 2011 09:20 AM
  • Joined: 09 Mar 2011

Funny I'm working on a css/html converter that works with photoshop slices.
Based on the naming scheme in PS it will be either a parent div plus corresponding css element.
I took the lazy route and just added each phrase to the condition to separate each element and place them in their appropriate hierarchy.
Heres one for the html portion

cnt:=!!cnt
loop % docLine0
  newdocEnd .=	( inStr( docLine%a_index%, "<body" ) ? "<body>`r`n"
		: inStr( docLine%a_index%, "ImageReady Slices" ) ? ""
		: inStr( docLine%a_index%, "Table_01" ) ? a_tab "<div id=`""" fileNameNoExt `""">`r`n"
		: inStr( docLine%a_index%, "-" ) ? a_tab . a_tab . docLine%a_index% "></div>`r`n"
		: inStr( docLine%a_index%, "</body" ) ? a_tab "</div>`r`n" "</body>`r`n</html>"
		: inStr( docLine%a_index%, "</html" ) ? ""
		: inStr( docLine%a_index%, "<img" ) ? ( "",  cnt++, imgHTMArr0:=cnt, imgHTMArr%cnt%:=docLine%a_index% "`n`r" )
		: inStr( docLine%a_index%, "</div" ) ? ""
		: docLine%a_index% )
msgbox % newdocEnd
It makes adding new conditions a breeze :D!


sry, how does it work?

TLM
  • Administrators
  • 3864 posts
  • Last active:
  • Joined: 21 Aug 2006
Essentially you name the divs in photoshop slices and when ps outputs the html the script looks at the names and decides what goes where.
I'm still working on it but its getting very close now..

Posted Image

don't duplicate, iterate!


k6
  • Members
  • 6 posts
  • Last active: Sep 04 2011 09:20 AM
  • Joined: 09 Mar 2011

Essentially you name the divs in photoshop slices and when ps outputs the html the script looks at the names and decides what goes where.
I'm still working on it but its getting very close now..


Dont't have Photoshop at hand to test it right now but I will.

  • Guests
  • Last active:
  • Joined: --
You may wish to look into zencoding <!-- m -->http://www.autohotke...921.html#457921<!-- m -->

See some examples here <!-- m -->http://coding.smashi... ... html-code/<!-- m -->

k6
  • Members
  • 6 posts
  • Last active: Sep 04 2011 09:20 AM
  • Joined: 09 Mar 2011

You may wish to look into zencoding <!-- m -->http://www.autohotke...921.html#457921<!-- m -->

See some examples here <!-- m -->http://coding.smashi... ... html-code/<!-- m -->


Tx for sharing! Zen coding is really revolutionary! Somebody could nominate this guy for Nobel HTML Prize!